这一节主要了解一下鸿蒙的动画,动画的引入主要是为了提升用户体验、增加用户反馈和互动感、引导用户操作以及缓解等待带来的不适感。
属性动画:
Index.ets
@Entry
@Component
struct Index {@StatewidthSize: number = 100@StateheightSize: number = 40build() {Column({ space: 15 }) {Button('属性动画').width(this.widthSize).height(this.heightSize).onClick(() => {this.widthSize = 210this.heightSize = 90}).animation({duration: 1000,delay: 1000, curve: 'cubic-bezier(.57,.58,.75,1.33)',//curve: Curve.Linear iterations: -1, playMode: PlayMode.Alternate})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}
显示动画
Index.ets
@Entry
@Component
struct Index {@StateheightSize: number = 40build() {Column() {Text('一级菜单').height(40).onClick(() => {animateTo({duration: 500}, () => {this.heightSize = this.heightSize === 40 ? 0 : 40})})Column() {Text('一级菜单').height(this.heightSize)Text('一级菜单').height(this.heightSize)}}.backgroundColor('#069')}
}
这个和Android中的补间动画优点类似。
页面间元素共享动画
页面间元素共享动画是指在两个页面之间进行切换时,通过特定的转场动效实现某些元素的平滑过渡。这种动画通常用于提升用户体验,使页面之间的跳转更加流畅和有趣。具体来说,当路由进行切换时,可以通过设置组件的sharedTransition属性将该元素标记为共享元素并设置对应的共享元素转场动效。这些属性包括id、duration、curve、delay、motionPath、zIndex和type等.它适用于多种场景,如图片的放大缩小、列表项的动态插入和移除等。例如,如果同一个元素在不同页面间的大小有明显差异,可以使用共享元素转场动画衔接,达到放大缩小视图的效果。在开发过程中,可以通过编写相应的代码来配置和实现这些动效。例如,通过设置sharedTransition的id和其他参数,可以使两个页面间的相同元素实现平滑过渡。
Index.ets
import router from '@ohos.router'
@Entry
@Component
struct Index {build() {Column() {Column({ space: 10 }){Image($rawfile('ai.png')).width('100%').aspectRatio(1).sharedTransition('ai', { duration: 500 })Text('ai美女 这是一张由AI产生的美女...').sharedTransition('text', { duration: 500 })}.width('50%').onClick(() => {router.pushUrl({url: 'pages/DetailPage'})})}.height('100%').width('100%').alignItems(HorizontalAlign.Start)}
}
DetailPage.ets
@Entry
@Component
struct DetailPage {build() {Column() {Column({ space: 10 }){Image($rawfile('ai.png')).width('100%').aspectRatio(1).sharedTransition('ai', { duration: 500 })Text('ai美女 这是一张由AI产生的美女...').fontSize(24).sharedTransition('text', { duration: 500 })}.width('100%')}.height('100%').width('100%')}
}