更新时间:2022-01-13 09:07:13浏览次数:546+次
以下带来鸿蒙应用开发之ArkUI(eTS)三个小球动画加载的效果的文章,将附上可用的代码。
前言
主要是给3个按钮设置animation()动画,设置不同的动画duration时间和不同的延时delay时间,并设置无限循环播放和PlayMode.AlternateReverse正反方向的播放模式。
可用的代码
@Entry
@Component
struct Index {
@State size: number = 20
private aboutToAppear(): void {
setTimeout(() => {
this.size =10
}, 1000)
}
build() {
Column() {
Row({space:2}) {
Button()
.width(this.size)
.height(this.size)
.backgroundColor(0xff0000)
.margin({left:(20-this.size)/2,right:(20-this.size)/2})
.animation({
duration: 400, // 动画时长
curve: Curve.EaseOut, // 动画曲线
delay: 0, // 动画延迟
iterations: -1, // 播放次数
playMode: PlayMode.AlternateReverse // 动画模式
})
Button()
.width(this.size)
.height(this.size)
.backgroundColor(0xff00ff)
.margin({left:(20-this.size)/2,right:(20-this.size)/2})
.animation({
duration: 400, // 动画时长
curve: Curve.EaseOut, // 动画曲线
delay: 200, // 动画延迟
iterations: -1, // 播放次数
playMode: PlayMode.AlternateReverse // 动画模式
})
Button()
.width(this.size)
.height(this.size)
.backgroundColor(0x00ffff)
.margin({left:(20-this.size)/2,right:(20-this.size)/2})
.animation({
duration: 400, // 动画时长
curve: Curve.EaseOut, // 动画曲线
delay: 400, // 动画延迟
iterations: -1, // 播放次数
playMode: PlayMode.AlternateReverse // 动画模式
})
}.height(20).width(64).margin({top:50})
}.width('100%')
}
}
相关资讯