鸿蒙 HarmonyOs 动画效果 快速入门

一、理论

1.1 animation属性

名称	参数类型	必填	形貌
duration	number	否	设置动画时长，默认值：1000，单元：毫秒
tempo	number	否	动画播放速度。数值越大，速度越快，默认为1
curve	string | Curve	否	设置动画曲线。 默认值：Curve.EaseInOut,平滑开始和结束
delay	number	否	设置动画延迟实行的时长。默认值为0，毫秒
iterations	number	否	设置播放次数。 默认值：1，取值范围：[-1, +∞] 设置为 -1 表现无穷次播放。
playMode	PlayMode	否	设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal
onFinish	()=>void	否	状态回调，动画播放完成时触发

1.2 组件转场效果

参数名	参数类型	必填	形貌
type	TransitionType	否	类型，默认组件爱你新增和删除，默认为ALL
opacity	number	否	不透明度，为插入时出发点和删除时终点的值。默认值为1，取值范围为[0,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 }	否	旋转效果： angle是旋转角度

二、实操

2.1 示例：旋转图片

示例代码：

1. @Entry
2. @Component
3. struct Index {
5.   @State angle:number = 0
6.   build(){
7.     Column(){
8.       //显示图片
9.       Image($r('app.media.one'))
10.         .width(120)
11.         .rotate({
12.           angle:this.angle,
13.           centerX:'50%',
14.           centerY:'50%'
15.         })
16.         .animation({
17.           duration:1000,
18.           onFinish:()=>{
20.             console.log('结束时：'+this.angle)
22.           }
23.         })
25.       Button('动画开始')
26.         .onClick(()=>{
27.           this.angle += 360
28.         })
29.     }
30.     .width('100%')
31.     .height('100%')
32.   }
33. }

复制代码

2.2 示例：平移、旋转、缩放

其中scale的值为缩放比例，以是1为初始值，2则表现原有的1倍
其中rotate的值为1则表现以该轴旋转，0则不以该轴旋转
示例效果：

示例代码：

1. @Entry
2. @Component
3. struct Index {
5.   @State angle:number = 0
6.   @State rotateX:number = 0
7.   @State rotateY:number = 0
8.   @State rotateZ:number = 0
10.   @State translateX:number = 0
11.   @State translateY:number = 0
12.   @State scaleX:number =  1
13.   @State scaleY:number =  1
14.   build(){
15.     Column(){
16.       //显示图片
17.       Image($r('app.media.one'))
18.         .width(120)
19.         .rotate({
20.           angle:this.angle,
21.           x:this.rotateX,
22.           y:this.rotateY,
23.           z:this.rotateZ,
24.           centerX:'50%',
25.           centerY: '50%',
26.         })
27.         .animation({
28.           duration:1000,
29.           onFinish:()=>{
31.             console.log('结束时：'+this.angle)
32.           }
33.         })
34.         .translate({
35.           x:this.translateX,
36.           y:this.translateY
37.         })
38.         .scale({
39.           x:this.scaleX,
40.           y:this.scaleY,
41.           centerX:'50%',
42.           centerY: '50%',
43.         })
45.       Blank()
46.       Row(){
47.         Column(){
49.           Image($r('app.media.ic_public_arrow_up_0'))
50.             .width(40)
51.             .backgroundColor(Color.White)
52.             .borderRadius(20)
53.             .onClick(()=>{
54.               this.translateY -= 50
55.             })
57.           Row(){
58.             Image($r('app.media.ic_public_arrow_left'))
59.               .width(40)
60.               .backgroundColor(Color.White)
61.               .borderRadius(20)
62.               .onClick(()=>{
63.                 this.translateX -= 50
64.               })
66.             Image($r('app.media.ic_public_arrow_right'))
67.               .width(40)
68.               .backgroundColor(Color.White)
69.               .borderRadius(20)
70.               .onClick(()=>{
71.                 this.translateX += 50
72.               })
74.           }.width(130)
75.           .justifyContent(FlexAlign.SpaceBetween)
78.           Image($r('app.media.ic_public_arrow_down_0'))
79.             .width(40)
80.             .backgroundColor(Color.White)
81.             .borderRadius(20)
82.             .onClick(()=>{
83.               this.translateY += 50
84.             })
86.         }.width(200)
88.         Column({space:20}){
91.           Button('旋转一圈动画开始')
92.             .onClick(()=>{
93.               this.rotateZ = 1
94.               this.angle += 360
95.             })
97.           Button('放大一倍')
98.             .onClick(()=>{
99.               this.scaleX *= 2
100.               this.scaleY *= 2
101.             })
103.           Button('缩小一倍')
104.             .onClick(()=>{
105.               this.scaleX /= 2
106.               this.scaleY /= 2
107.             })
110.         }.padding(10)
115.       }.width('100%')
116.       .backgroundColor(Color.Gray)
121.     }
122.     .width('100%')
123.     .height('100%')
124.   }
125. }

复制代码

2.3 示例：简朴摇骰子效果

示例效果：

示例代码：

1. @Entry
2. @Component
3. struct Index {
5.   @State dice:Resource[] = [
6.     $r('app.media.one'),
7.     $r('app.media.two'),
8.     $r('app.media.three'),
9.     $r('app.media.four'),
10.     $r('app.media.five'),
11.     $r('app.media.six')
12.   ]
14.   @State currentDice:Resource = this.dice[0]
15.   @State angle:number = 0
16.   @State rotateX:number = 0
17.   @State rotateY:number = 1
18.   @State rotateZ:number = 0
19.   @State opacityNumber:number = 1
20.   @State runState:boolean = false
21.   build(){
22.     Column(){
23.       //显示图片
24.       Image(this.currentDice)
25.         .width(120)
26.         .rotate({
27.           angle:this.angle,
28.           x:this.rotateX,
29.           y:this.rotateY,
30.           z:this.rotateZ,
31.           centerX:'50%',
32.           centerY: '50%',
33.         })
34.         .animation({
35.           duration:1000,
36.           curve:Curve.EaseInOut,
37.           onFinish:()=>{
38.             this.opacityNumber = 1
39.             console.log('结束时：'+this.angle)
40.           },
42.         })
43.         .opacity(this.opacityNumber)
47.       Button('摇骰子')
48.         .width(200)
49.         .onClick(()=>{
51.           this.opacityNumber = 0.8
52.           this.angle += 360
54.           setTimeout(()=>{
55.             this.currentDice = this.dice[Math.floor(Math.random() * this.dice.length)];
56.           },1000)
57.          
58.         })
59.       
60.     }
61.     .width('100%')
62.     .height('100%')
63.   }
64. }

复制代码

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