在Harmony上实现AnimateCSS动画
显式动画
参考文档：https://gitee.com/openharmony/docs/blob/5654c2b940ab3e2f4f0baf435e630c4ef3536428/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
来看一个简单的示例：@entry@componentstruct animationpage { // 位移属性 @state _translate: translateoptions = { x: 0, y: 0, z: 0 } build() { flex({ alignitems: itemalign.center, justifycontent: flexalign.center, direction: flexdirection.column }) { button('执行动画').margin({ bottom: 50 }).onclick(() => { //添加一个简单显式动画 animateto({ duration: 1000, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 }, () => { //闭包内更改状态 this._translate = { x: 0, y: 100, z: 0 } }) }) column() { text('animate.css') .fontsize(50) .fontweight(fontweight.bold) .fontcolor('#351c75') .translate(this._translate) // 位移变换 } } .width('100%') .height('100%') }} 如果我们希望向下位移完成后，再向右位移，就需要在第一个动画完成后再进行第二个动画，即在第一个动画的 onfinish 函数中执行第二个动画。
这样组合起来可以构成一个更复杂的连续动画：
// 单步动画执行函数animationstep(value: animateparam, event: () => void) { return () => { return new promise((resolve) => { let onfinish = value.onfinish value.onfinish = () => { if(onfinish) onfinish() resolve(true) } animateto(value, event) }) }} 创建 4 步动画：
abouttoappear() { // 每步动画执行时长 let time = 200 this.step1 = this.animationstep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 onfinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 0, y: 100, z: 0 } }) this.step2 = this.animationstep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 onfinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 100, y: 100, z: 0 } }) this.step3 = this.animationstep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 onfinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 100, y: 0, z: 0 } }) this.step4 = this.animationstep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 onfinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 0, y: 0, z: 0 } })}
顺序执行 4 步动画：
button('执行动画').margin({ bottom: 50 }).onclick(async () => { await this.step1() await this.step2() await this.step3() await this.step4()})
实现 animatecss 动画
animatecss： https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.csshttps://animate.style/ pulse 动画： 看下 pulse 动画样式代码：
.animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}@keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }}
ets 实现：
@state _scale: scaleoptions = { x: 1, y: 1, z: 1}...column() { text('animate.css') .fontsize(50) .fontweight(fontweight.bold) .fontcolor('#351c75') .translate(this._translate) // 位移变换 .scale(this._scale) //比例变化}
动画方法： 传递一个动画总时长 time
第一步动画执行段为 0%-50%，所以动画执行时长为总时长time * 50%
第二步动画执行段为 50%-100%，所以动画执行时长为总时长time * 50% async pulse(time) { // 0% - 50% let step1 = this.animationstep({ duration: time * 0.5, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 }, () => { this._scale = { x: 1.05, y: 1.05, z: 1.05 } }) // 50% - 100% let step2 = this.animationstep({ duration: time * 0.5, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 }, () => { this._scale = { x: 1, y: 1, z: 1 } }) await step1() await step2()}
执行动画：
button('执行pulse动画').margin({ bottom: 50 }).onclick(async () => { this.pulse(500)})
电视机常用中英文对照表
格陆博科技荣获高工智能金球奖两大奖项
Redis在服务器宕机时如何避免数据丢失呢？
FS5257 dc-dc升压恒流电源驱动IC 2000ma SOT23-6
基于FPGA和嵌入式以太网W5500的TCP/IP协议栈实现设计
在Harmony上实现AnimateCSS动画
锂离子电池加装“溢洪道”，可有效避免失控连锁反应
11月5日国际移动机器人峰会即将盛大开启
LM5642开关控制器的原理及应用设计
综合药品稳定性试验箱LHH-150GP的产品特点
内置730V耐压MOSFET的AC-DC转换器IC：BM2P06xMF-Z系列
软银现在要靠抛售阿里股票获利 仅投资印度电商就损失14亿
TD芯片细节决定中国3G成败 用65纳米技术开发
爱立信反超华为,登上全球第一
LCD投影机原理
大联大世平集团推出基于NXP ASC8848/50A的高清网络视频监控解决方案
中兴AXON 20 5G至尊版到明年上半年只此一款，中兴屏下摄像头有独占期
射频前端是什么？射频元器件介绍
USB小风扇哪个牌子好？夏季清凉全靠它！
2268系列大功率直流电源的功能特点及产品应用
参考文档：https://gitee.com/openharmony/docs/blob/5654c2b940ab3e2f4f0baf435e630c4ef3536428/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
来看一个简单的示例：@entry@componentstruct animationpage { // 位移属性 @state _translate: translateoptions = { x: 0, y: 0, z: 0 } build() { flex({ alignitems: itemalign.center, justifycontent: flexalign.center, direction: flexdirection.column }) { button('执行动画').margin({ bottom: 50 }).onclick(() => { //添加一个简单显式动画 animateto({ duration: 1000, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 }, () => { //闭包内更改状态 this._translate = { x: 0, y: 100, z: 0 } }) }) column() { text('animate.css') .fontsize(50) .fontweight(fontweight.bold) .fontcolor('#351c75') .translate(this._translate) // 位移变换 } } .width('100%') .height('100%') }} 如果我们希望向下位移完成后，再向右位移，就需要在第一个动画完成后再进行第二个动画，即在第一个动画的 onfinish 函数中执行第二个动画。
这样组合起来可以构成一个更复杂的连续动画：
// 单步动画执行函数animationstep(value: animateparam, event: () => void) { return () => { return new promise((resolve) => { let onfinish = value.onfinish value.onfinish = () => { if(onfinish) onfinish() resolve(true) } animateto(value, event) }) }} 创建 4 步动画：
abouttoappear() { // 每步动画执行时长 let time = 200 this.step1 = this.animationstep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 onfinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 0, y: 100, z: 0 } }) this.step2 = this.animationstep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 onfinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 100, y: 100, z: 0 } }) this.step3 = this.animationstep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 onfinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 100, y: 0, z: 0 } }) this.step4 = this.animationstep({ duration: time, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 onfinish: () => { // 动画执行完成 console.info('play end') } }, () => { //闭包内更改状态 this._translate = { x: 0, y: 0, z: 0 } })}
顺序执行 4 步动画：
button('执行动画').margin({ bottom: 50 }).onclick(async () => { await this.step1() await this.step2() await this.step3() await this.step4()})
实现 animatecss 动画
animatecss： https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.csshttps://animate.style/ pulse 动画： 看下 pulse 动画样式代码：
.animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}@keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }}
ets 实现：
@state _scale: scaleoptions = { x: 1, y: 1, z: 1}...column() { text('animate.css') .fontsize(50) .fontweight(fontweight.bold) .fontcolor('#351c75') .translate(this._translate) // 位移变换 .scale(this._scale) //比例变化}
动画方法： 传递一个动画总时长 time
第一步动画执行段为 0%-50%，所以动画执行时长为总时长time * 50%
第二步动画执行段为 50%-100%，所以动画执行时长为总时长time * 50% async pulse(time) { // 0% - 50% let step1 = this.animationstep({ duration: time * 0.5, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 }, () => { this._scale = { x: 1.05, y: 1.05, z: 1.05 } }) // 50% - 100% let step2 = this.animationstep({ duration: time * 0.5, // 动画时长 tempo: 0.5, // 播放速率 curve: curve.easeinout, // 动画曲线 delay: 0, // 动画延迟 iterations: 1, // 播放次数 playmode: playmode.normal, // 动画模式 }, () => { this._scale = { x: 1, y: 1, z: 1 } }) await step1() await step2()}
执行动画：
button('执行pulse动画').margin({ bottom: 50 }).onclick(async () => { this.pulse(500)})
电视机常用中英文对照表
格陆博科技荣获高工智能金球奖两大奖项
Redis在服务器宕机时如何避免数据丢失呢？
FS5257 dc-dc升压恒流电源驱动IC 2000ma SOT23-6
基于FPGA和嵌入式以太网W5500的TCP/IP协议栈实现设计
在Harmony上实现AnimateCSS动画
锂离子电池加装“溢洪道”，可有效避免失控连锁反应
11月5日国际移动机器人峰会即将盛大开启
LM5642开关控制器的原理及应用设计
综合药品稳定性试验箱LHH-150GP的产品特点
内置730V耐压MOSFET的AC-DC转换器IC：BM2P06xMF-Z系列
软银现在要靠抛售阿里股票获利 仅投资印度电商就损失14亿
TD芯片细节决定中国3G成败 用65纳米技术开发
爱立信反超华为,登上全球第一
LCD投影机原理
大联大世平集团推出基于NXP ASC8848/50A的高清网络视频监控解决方案
中兴AXON 20 5G至尊版到明年上半年只此一款，中兴屏下摄像头有独占期
射频前端是什么？射频元器件介绍
USB小风扇哪个牌子好？夏季清凉全靠它！
2268系列大功率直流电源的功能特点及产品应用