回复
鸿蒙应用开发之动画特效十二星座之星空环绕
仿佛云烟
发布于 2025-6-28 17:02
浏览
0收藏
一、工具
DevEco Studio
二、项目介绍
先来看看简单的特效
知识点：
1、动画示例1：
点击放大缩小
很简单在onClick()设置如下代码即可：
.onClick(() => {
if (this.flag) {
animateTo({
duration: 2000,
curve: Curve.EaseOut,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.info('play end')
}
}, () => {
this.widthSize = 60
this.heightSize = 60
})
} else {
animateTo({}, () => {
this.widthSize = 100
this.heightSize = 100
})
}
this.flag = !this.flag
})
2、动画示例2：
单击旋转
代码：
.animation({//自身转动特效
duration: this.speed,
curve: Curve.Linear,
delay: 0,
iterations: -1, // 设置-1表示动画无限循环
playMode: PlayMode.Normal
})
需要注意，rotateAngle = 360 speed -=1000发生变化才会触发动画。
所以改进后是这样的可以动态控制
.onClick(()=>{
if (this.isCenter) {
animateTo({//自身转动特效
duration: 0,
curve: Curve.Linear,
delay: 0,
iterations: 0, // 设置-1表示动画无限循环
playMode: PlayMode.Normal
}, () => {
this.rotateAngle = 0
})
promptAction.showToast({
message: '暂停',
duration: 500
})
} else {
animateTo({//自身转动特效
duration: 5000,
curve: Curve.Linear,
delay: 0,
iterations: -1, // 设置-1表示动画无限循环
playMode: PlayMode.Normal
}, () => {
this.rotateAngle = 0
})
promptAction.showToast({
message: '开始',
duration: 500
})
}
this.isCenter = !this.isCenter
//clearInterval(this.intervalID);
})
进一步优化（动画衔接问题，看起来更顺畅）：
setInterval(()=> {//每0.1秒执行0.5°的转动，动画更平滑
for (let index = 0; index < 12; index++) {
let doubleAngle = (this.averageAngle - 30 * index + 0) * Math.PI / 180
let sin = Math.sin(doubleAngle);
let cos = Math.cos(doubleAngle);
this.widAr[index] =this.radius1+this.radius1cos
this.heiAr[index] =this.radius2+this.radius2sin * Math.cos(Math.PI * 5 / 18)
}
if (this.isRotate) {
if (this.averageAngle<360) {//0~360°循环
this.averageAngle+=0.5
}else {
this.averageAngle = 0;
}
this.rotateAngle = 360
}
}, 100)
3、动画示例3：
蚂蚁行走路径动画
代码设置：
Column() {
Image(r('app.media.constellation1'))
.width(this.img)
.height(this.img)
Text('天蝎座')
.fontColor(r('app.media.constellation2'))
.width(this.img)
.height(this.img)
Text('处女座')
.fontColor(r('app.media.constellation3'))
.width(this.img)
.height(this.img)
Text('双子座')
.fontColor(r('app.media.constellation4'))
.width(this.img)
.height(this.img)
Text('双鱼座')
.fontColor(r('app.media.constellation5'))
.width(this.img)
.height(this.img)
Text('金牛座')
.fontColor(r('app.media.constellation6'))
.width(this.img)
.height(this.img)
Text('射手座')
.fontColor(r('app.media.constellation7'))
.width(this.img)
.height(this.img)
Text('狮子座')
.fontColor(r('app.media.constellation8'))
.width(this.img)
.height(this.img)
Text('摩羯座')
.fontColor(r('app.media.constellation9'))
.width(this.img)
.height(this.img)
Text('巨蟹座')
.fontColor(r('app.media.constellation10'))
.width(this.img)
.height(this.img)
Text('水瓶座')
.fontColor(r('app.media.constellation11'))
.width(this.img)
.height(this.img)
Text('天秤座')
.fontColor(r('app.media.constellation12'))
.width(this.img)
.height(this.img)
Text('白羊座')
.fontColor($r('app.color.white'))
} .position({x:this.widAr[11],y:this.heiAr[11]})
.id('star12')
.onClick(()=>{
promptAction.showToast({
message: '点击白羊座',
duration: 500
})
})
}.width('100%')
.height('100%')
.onAreaChange((oldValue: Area, newValue: Area) => {
this.radius1 = new Number(newValue.width).valueOf()/2-25
this.radius2 = new Number(newValue.height).valueOf()/2-25
})
先把图片贴上去，然后计算旋转位置。
需用到一些计算公式
椭圆的标准方程是(x/a)^2 + (y/b)^2 =1
偏心率e=√(1 - (b/a)^2)
然后根据公式代码实现旋转后的坐标：
setInterval(()=> {//每0.1秒执行0.5°的转动，动画更平滑
for (let index = 0; index < 12; index++) {
let doubleAngle = (this.averageAngle - 30 * index + 0) * Math.PI / 180
let sin = Math.sin(doubleAngle);
let cos = Math.cos(doubleAngle);
this.widAr[index] =this.radius1+this.radius1cos
this.heiAr[index] =this.radius2+this.radius2sin * Math.cos(Math.PI * 5 / 18)
}
if (this.isRotate) {
if (this.averageAngle<360) {//0~360°循环
this.averageAngle+=0.5
}else {
this.averageAngle = 0;
}
this.rotateAngle = 360
}
}, 100)
定义两个状态变量去更新UI：
@State widAr:Array = [this.radius1,this.radius1,this.radius1,this.radius1,this.radius1,this.radius1,this.radius1,this.radius1,this.radius1,this.radius1,this.radius1,this.radius1]
@State heiAr:Array = [this.radius2,this.radius2,this.radius2,this.radius2,this.radius2,this.radius2,this.radius2,this.radius2,this.radius2,this.radius2,this.radius2,this.radius2]
最后我们来监听点击事件：
.onTouch((event?: TouchEvent) => {//页面监听滑动控
if(event){
if (event.type === TouchType.Down) {
this.eventType = 'Down'
this.x1 =event.touches[0].x
this.isRotate = false
}
if (event.type === TouchType.Up) {
this.eventType = 'Up'
this.isRotate = true
}
if (event.type === TouchType.Move) {
this.eventType = 'Move'
this.x2 =event.touches[0].x -this.x1
//左右滑动控制转动
if (event.touches[0].y<this.radius2){
if (this.x2>0) {
this.averageAngle +=5
}else {
this.averageAngle -=5
}
}else {
if (this.x2>0) {
this.averageAngle -=5
}else {
this.averageAngle +=5
}
}
}
}
})
实现左右滑动加速效果，背景给一个星空背景，这样一来就实现了旋转的十二星辰。
源码Demo：MyAnimation: 鸿蒙动画特效旋转的十二星辰
标签
赞
收藏
回复
相关推荐
