鸿蒙 - arkTs：属性动画，显式动画，组件转场动画

属性动画：

属性动画是通过设置组件的animation属性来给组件添加动画；
代码示例：

1. @Entry
2. @Component
3. struct Index {
4.   @State widthSize: number = 250
5.   @State heightSize: number = 100
6.   @State flag: boolean = true
8.   build() {
9.     Column() {
10.       Button('开始动画')
11.         .onClick(() => {
12.           if (this.flag) {
13.             this.widthSize = 150
14.             this.heightSize = 60
15.           } else {
16.             this.widthSize = 250
17.             this.heightSize = 100
18.           }
19.           this.flag = !this.flag
20.         })
21.         .margin(30)
22.         .width(this.widthSize)
23.         .height(this.heightSize)
24.         .animation({
25.           duration: 2000,
26.           curve: Curve.EaseOut,
27.           iterations: 3,
28.           playMode: PlayMode.Normal
29.         })
30.     }
31.       .width('100%')
32.       .margin({ top: 20 })
33.   }
34. }

复制代码

---

显式动画：

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
代码示例：

1. @Entry
2. @Component
3. struct Index {
4.   @State widthSize: number = 250
5.   @State heightSize: number = 100
6.   private flag: boolean = true
8.   build() {
9.     Column() {
10.       Button('change size')
11.         .width(this.widthSize)
12.         .height(this.heightSize)
13.         .margin(30)
14.         .onClick(() => {
15.           if (this.flag) {
16.             animateTo({}, () => {
17.               this.widthSize = 150
18.               this.heightSize = 60
19.             })
20.           } else {
21.             animateTo({}, () => {
22.               this.widthSize = 250
23.               this.heightSize = 100
24.             })
25.           }
26.           this.flag = !this.flag
27.         })
28.     }
29.       .width('100%')
30.       .margin({ top: 5 })
31.   }
32. }

复制代码

---

属性动画 & 显式动画 - animation枚举阐明：

名称参数类型必填描述durationnumber否 设置动画时长，单元为毫秒；默认值：1000。
temponumber 动画播放速度。数值越大，动画播放速度越快。值为0时，表示不存在动画。默认值：1。
curvestring | Curve 设置动画曲线。默认曲线为线性。默认值：Curve.Linear。
delaynumber 设置动画耽误执行的时长，单元为毫秒。默认值：0。
iterationsnumber 设置播放次数。默认值：1。
playModePlayMode 设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal。
onFinish() => void状态回调，动画播放完成时触发的方法。 animation - Curve枚举阐明：

• Linear：表示动画重新到尾的速度都是类似的。
  
• Ease：表示动画以低速开始，然后加速，在结束前变慢。
  
• EaseIn：表示动画以低速开始。
  
• EaseOut：表示动画以低速结束。
  
• EaseInOut：表示动画以低速开始和结束。
  

animation - PlayMode枚举阐明：

• Normal：动画按正常播放。
  
• Reverse：动画反向播放。
  
• Alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
  
• AlternateReverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
  

---

组件转场动画： 

组件内转场重要通过transition属性设置转场参数，在组件插入和删除时显示过渡动效。
代码示例：

1. @Entry
2. @Component
3. struct Index {
4.   @State flag: boolean = true
6.   build() {
7.     Column() {
8.       Button(this.flag ? '隐藏组件' : '展示组件')
9.         .margin(30)
10.         .onClick(() => {
11.           animateTo({ duration: 1000 }, () => {
12.             this.flag = !this.flag
13.           })
14.         })
15.       if (this.flag) {
16.         Image($r('app.media.icon'))
17.           .width(300)
18.           .height(300)
19.           .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
20.           .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
21.       }
22.     }
23.       .width('100%')
24.   }
25. }

复制代码

TransitionOptions枚举阐明：

参数名称参数类型必填参数描述typeTransitionType否 默认包罗组件新增和删除。默认值：TransitionType.All。
opacitynumber 设置组件转场时的透明度效果，为插入时出发点和删除时尽头的值。默认值：1。
translate {
        x? : number | string,
        y? : number | string,
        z? : number | string,
}
  设置组件转场时的平移效果，为插入时出发点和删除时尽头的值。
-x：横向的平移距离。
-y：纵向的平移距离。
-z：竖向的平移距离。
scale {
        x? : number,
        y? : number,
        z? : number,
        centerX? : number | string,
        centerY? : number | string,
}
  设置组件转场时的缩放效果，为插入时出发点和删除时尽头的值。
-x：横向放大倍数（或缩小比例）。
-y：纵向放大倍数（或缩小比例）。
-z：竖向放大倍数（或缩小比例）。
- centerX、centerY指缩放中央点，centerX和centerY默认值是"50%"。
- 中央点为0时，默认的是组件的左上角。
rotate {
        x?: number,
        y?: number,
        z?: number,
        angle?: number | string,
        centerX?: number | string,
        centerY?: number | string,
}
  设置组件转场时的旋转效果，为插入时出发点和删除时尽头的值。
-x：横向的旋转向量。
-y：纵向的旋转向量。
-z：竖向的旋转向量。
- centerX,centerY指旋转中央点，centerX和centerY默认值是"50%"。
- 中央点为（0，0）时，默认的是组件的左上角。
  TransitionType枚举阐明：

•  All：指定当前的Transition动效生效在组件的全部变化场景。
  
• Insert：指定当前的Transition动效生效在组件的插入显示场景。
  
• Delete：指定当前的Transition动效生效在组件的删除隐藏场景。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。