消失的发际线ArkUI（eTS）三个小球动画加载的效果
主要是给3个按钮设置animation()动画，设置不同的动画duration时间和不同的延时delay时间，并设置无限循环播放和PlayMode.AlternateReverse正反方向的播放模式。代码如下：
@Entry@Componentstruct 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%') }}
2
2
4
浏览864 发布于2022-01-06 01:14未知归属地
全部评论
最多点赞
最新发布
最早发布
钵钵鸡请问大佬，下面代码的1000是什么意思
setTimeout(() => {
this.size =10
}, 1000)2楼回复于2022-01-25 09:53 未知归属地
- 消失的发际线2022-01-25 09:54 未知归属地
- 钵钵鸡2022-01-25 09:55 未知归属地
木土土6666
1楼回复于2022-01-06 07:40 未知归属地
写回答
新增插入模板功能
一键使用模板，快速填写内容，轻松发帖～
知道了
- 为了保障您的信息安全，请勿上传您的敏感个人信息（如您的密码等信息）和您的敏感资产信息（如关键源代码、签名私钥、调试安装包、业务日志等信息），且您需自行承担由此产生的信息泄露等安全风险。
- 如您发布的内容为转载内容，请注明内容来源。
我要发帖子
了解社区公约，与您携手共创和谐专业的开发者社区。
苏公安网备 32011402010933号