鸿蒙 HarmonyOs 动画效果 快速入门
一、理论1.1 animation属性
名称参数类型必填形貌durationnumber否设置动画时长，默认值：1000，单元：毫秒temponumber否动画播放速度。数值越大，速度越快，默认为1curvestring | Curve否 设置动画曲线。
默认值：Curve.EaseInOut,平滑开始和结束
delaynumber否设置动画延迟实行的时长。默认值为0，毫秒iterationsnumber否 设置播放次数。
默认值：1，取值范围：[-1, +∞]
设置为 -1 表现无穷次播放。
playModePlayMode否设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.NormalonFinish()=>void否状态回调，动画播放完成时触发
1.2 组件转场效果
参数名参数类型必填形貌typeTransitionType否类型，默认组件爱你新增和删除，默认为ALLopacitynumber否不透明度，为插入时出发点和删除时终点的值。默认值为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 示例：旋转图片
示例代码：
@Entry
@Component
struct Index {
@State angle:number = 0
build(){
Column(){
//显示图片
Image($r('app.media.one'))
.width(120)
.rotate({
angle:this.angle,
centerX:'50%',
centerY:'50%'
})
.animation({
duration:1000,
onFinish:()=>{
console.log('结束时：'+this.angle)
}
})
Button('动画开始')
.onClick(()=>{
this.angle += 360
})
}
.width('100%')
.height('100%')
}
} 2.2 示例：平移、旋转、缩放
其中scale的值为缩放比例，以是1为初始值，2则表现原有的1倍
其中rotate的值为1则表现以该轴旋转，0则不以该轴旋转
示例效果：
https://img-blog.csdnimg.cn/direct/1fb41ed965d3482dbaef3b4ad9b4867c.png
示例代码：
@Entry
@Component
struct Index {
@State angle:number = 0
@State rotateX:number = 0
@State rotateY:number = 0
@State rotateZ:number = 0
@State translateX:number = 0
@State translateY:number = 0
@State scaleX:number =1
@State scaleY:number =1
build(){
Column(){
//显示图片
Image($r('app.media.one'))
.width(120)
.rotate({
angle:this.angle,
x:this.rotateX,
y:this.rotateY,
z:this.rotateZ,
centerX:'50%',
centerY: '50%',
})
.animation({
duration:1000,
onFinish:()=>{
console.log('结束时：'+this.angle)
}
})
.translate({
x:this.translateX,
y:this.translateY
})
.scale({
x:this.scaleX,
y:this.scaleY,
centerX:'50%',
centerY: '50%',
})
Blank()
Row(){
Column(){
Image($r('app.media.ic_public_arrow_up_0'))
.width(40)
.backgroundColor(Color.White)
.borderRadius(20)
.onClick(()=>{
this.translateY -= 50
})
Row(){
Image($r('app.media.ic_public_arrow_left'))
.width(40)
.backgroundColor(Color.White)
.borderRadius(20)
.onClick(()=>{
this.translateX -= 50
})
Image($r('app.media.ic_public_arrow_right'))
.width(40)
.backgroundColor(Color.White)
.borderRadius(20)
.onClick(()=>{
this.translateX += 50
})
}.width(130)
.justifyContent(FlexAlign.SpaceBetween)
Image($r('app.media.ic_public_arrow_down_0'))
.width(40)
.backgroundColor(Color.White)
.borderRadius(20)
.onClick(()=>{
this.translateY += 50
})
}.width(200)
Column({space:20}){
Button('旋转一圈动画开始')
.onClick(()=>{
this.rotateZ = 1
this.angle += 360
})
Button('放大一倍')
.onClick(()=>{
this.scaleX *= 2
this.scaleY *= 2
})
Button('缩小一倍')
.onClick(()=>{
this.scaleX /= 2
this.scaleY /= 2
})
}.padding(10)
}.width('100%')
.backgroundColor(Color.Gray)
}
.width('100%')
.height('100%')
}
} 2.3 示例：简朴摇骰子效果
示例效果：
https://img-blog.csdnimg.cn/direct/2d7f6e3c25dd4270b9cd5da94b9244e6.png
示例代码：
@Entry
@Component
struct Index {
@State dice:Resource[] = [
$r('app.media.one'),
$r('app.media.two'),
$r('app.media.three'),
$r('app.media.four'),
$r('app.media.five'),
$r('app.media.six')
]
@State currentDice:Resource = this.dice
@State angle:number = 0
@State rotateX:number = 0
@State rotateY:number = 1
@State rotateZ:number = 0
@State opacityNumber:number = 1
@State runState:boolean = false
build(){
Column(){
//显示图片
Image(this.currentDice)
.width(120)
.rotate({
angle:this.angle,
x:this.rotateX,
y:this.rotateY,
z:this.rotateZ,
centerX:'50%',
centerY: '50%',
})
.animation({
duration:1000,
curve:Curve.EaseInOut,
onFinish:()=>{
this.opacityNumber = 1
console.log('结束时：'+this.angle)
},
})
.opacity(this.opacityNumber)
Button('摇骰子')
.width(200)
.onClick(()=>{
this.opacityNumber = 0.8
this.angle += 360
setTimeout(()=>{
this.currentDice = this.dice;
},1000)
})
}
.width('100%')
.height('100%')
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]