鸿蒙笔记--动画

        这一节主要了解一下鸿蒙的动画，动画的引入主要是为了提升用户体验、增加用户反馈和互动感、引导用户操作以及缓解等待带来的不适感。

  属性动画:

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%')}
}