基于JSAPI的HarmonyOS逐帧动画
时间：2023-03-20 00:52:43
科技观察
更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com前言动画是必不可少的一部分前端。动画的实现方式有很多种，本文将带来一个CSS逐帧动画。本DEMO基于HarmonyOSJSAPI开发，从API版本6开始支持该动画效果的动画属性效果显示动画属性实现原理通过快速切换背景图片的位置（背景图片必须是长一帧一帧的画面），实现了如同正在播放视频的动画效果。分步分割逐帧准备图片。将逐帧图片合成为我们需要的长帧背景图片。利用CSS动画的step属性实现动画效果。1、逐帧图片要求所有帧宽高相同，按播放顺序命名（一般软件导出自动按播放顺序命名）。如果是像本文这样的无限循环动画，那么第一帧和最后一帧的画面必须保持一致，否则最后的动画会不流畅。2.合成长帧逐帧动画精灵生成器：https://pspgbhu.github.io/fsm/。使用本大佬的网站合成一张长图（后面用“长图”一词来表示长图），点击“上传图片”按钮上传得到的图片第一步是批量生成，然后网站会自动检测图片的宽高，然后可以选择生成横排或者竖排的长图。下图显示了如何选择水平或垂直。最后点击“生成图片”按钮，中间的空白处会出现一张合成的长图。右键单击图片并选择另存为以获取长图。合成长帧逐帧显示3.利用CSS动画属性实现动画hml文件
cssfile.container{flex-方向：列；证明内容：居中；对齐项目：居中；宽度：100%；高度：100%；}.role{宽度：153px；高度：208px；背景图像：url（/common/images/stepImg.png）；/*4992px为长图的高度*/background-size:153px4992px;背景重复：不重复；/*steps(23)括号里的数字写的是png帧数减一*/animation:stepAnim2ssteps(23)infinite;}@keyframesstepAnim{/*注意：后面这句话一定要加在大括号里,并且要改变的属性必须被赋予一个初始值。*/from{background-position:0px0px;}/*-4784px为png框图片的总高度减去一帧的高度*/to{background-position:0px-4784px;}}源码源地址：https://gitee.com/CJcrazycool/harmony-os-css-step总结了steps函数，可以传入两个参数，第一个是大于0的整数，这个参数是把区间动画分成指定的个数小区间动画，然后根据第二个参数决定显示效果。当第二个参数为start时，变化过程中，间隔动画填充下一帧的显示效果；当第二个参数为end时，与上面相反，间隔动画填充上一帧的显示效果。本文的动画方案适用于体积比较小的局部动画，帧数不宜过多，最好在100帧以内。更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com
