从微信小程序到鸿蒙JS开发-CSS3动画&JS动画&定时器

想了解更多内容，从微程序请访问：

和华为官方合作共建的到鸿动画动画定鸿蒙技术社区

https://harmonyos.51cto.com

在进入APP时，通常都会有一个欢迎界面，从微程序用于展示APP的到鸿动画动画定名称、logo，从微程序并预先加载部分数据。到鸿动画动画定既然是从微程序欢迎页面，自然少不了一些动画元素。到鸿动画动画定简单运用了CSS3和JS的从微程序动画效果，progress组件以及倒计时撸了一个欢迎页面。到鸿动画动画定直接上效果：

1、从微程序基于CSS3的到鸿动画动画定动画效果

1.1 给动画元素设置animation属性。

animation-name：动画名 animation-duration：动画持续时间 animation-delay：动画开始前延迟时间 animation-iteration-count：动画重复次数 animation-timing-function：动画执行速度 animation-fill-mode：动画模式

.logo {      width: 300px;     height: 300px;     border-radius: 150px;     animation-name: an1;     animation-duration: 5s;     animation-iteration-count: 1;     animation-timing-function: linear;     animation-fill-mode: none; } 

1.2 用"@keyframes 动画名"匹配设置动画规则。从微程序

@keyframes an1 {          from {              transform: rotate(180deg);             opacity: 0.3;         }         to {              transform: rotate(360deg);             opacity: 1.0;         } } 

除from，到鸿动画动画定to外，从微程序还可以使用百分比（如20%{ ...})方式设置动画途中的效果。

以上两步，就实现了gif图中HUAWEI的logo旋转和逐渐清晰的动画效果。

2、基于JS的动画效果

2.1 动画元素给定id/ref等可以用于元素匹配的属性。

<image src="/common/liteMall.png" class="textImg" id="textImg"></image> 

2.2 在onShow()方法中获取元素实例，并用animate()方法给定动画规则和基本属性。注意这一步在onInit()和onReady()中执行是没有效果的服务器租用。

animate()接受两个参数，第一个为数组，指定动画的关键帧效果。第二个为对象，指定动画的基本属性。

2.3 调用play()方法开始动画执行。

onShow() {       // 设置动画      let textImg = this.$element("textImg").animate([          {               transform: { translateY: 200px}, opacity: 0.1          },          {               transform: { translateY: 0px}, opacity: 1          }      ], {           duration: 5000,          easing: "linear-out-slow-in",          fill: "forwards",          iterations: 1      });      textImg.play();      ......  } 

这个方法在开发者文档中未找到说明，但证实可用，且IDE也是有提示的。

transform其中的key输入却是没有提示了。

这里写完后会有红线说缺少属性，但运行是没问题的，可以忽略。如果看着难受可以把数组单独声明为一个变量，再作为animate()方法入参。

以上三步，就实现了gif图中"litemall"字样从下方上移并逐渐清晰的动画效果。

对比CSS3的动画技术，使用JS实现动画会更有灵活性。可以在onShow()中定义动画，在用户进行一定操作后再执行。CSS3的网站模板只能在页面显示后一定时间执行，但可以用百分比的形式定义更丰富的动画渐变效果。

3、JS定时器

setTimeout()和setInterval()两个定时函数在鸿蒙中可以无缝对接使用。

gif图中的倒计时使用setInterval()实现每1秒倒数一个数并改变省略号的个数，在倒数到0时清除定时器。为防止僵尸线程影响性能，切记调用clearTimeout()和clearInterval()清除掉定时器。

倒计时部分，hml视图层：

<div class="loading">     <progress type="circular"></progress>     <text>         { {  loading }}     </text> </div> <text class="count">     { {  seconds }} </text> 

css渲染层：

.loading {      width: 100%;     height: 150px;     display: flex;     justify-content: center;     align-items: center; } progress {      width: 120px;     height: 120px; } .loading>text {      font-size: 40px;     color: #666666; } .count {      position: fixed;     bottom: 385px;     left: 225px;     font-size: 60px;     color: #666666; } 

js逻辑层：

onShow() {    ......       // 设置倒计时       let iv = setInterval(() => {            let suffix;           switch (this.seconds % 3) {                case 2:               suffix = "...";               break;               case 1:               suffix = "..";               break;               default:               suffix = ".";               break;           }           this.loading = "数据加载中" + suffix;           this.seconds--;           if (this.seconds == 0) {                clearInterval(iv);           }       }, 1000);   } 

页面会在动画播放完成后跳转到商城首页，使用setTimeout()设置定时跳转即可。这里在播放动画时预加载了首页需要的数据，作为页面参数跳转，可以加快商城页的展示速度，提升用户体验。

onInit() {       // 首页数据预加载      // 获取广告图片      fetch.fetch({           ......      });      // 获取推荐商品      fetch.fetch({           ......      });      // 获取一级分类      fetch.fetch({           ......      });  },  onShow() {       // 设置定时跳转      let to = setTimeout(() => {           router.replace({               uri: "pages/index/index",              params: {                   ad: this.ad,                  newGoods: this.newGoods,                  hotGoods: this.hotGoods,                  types: this.types              }          });          clearTimeout(to);      }, 6000);  ......  } 

4、微信小程序的动画效果

最后写一写微信小程序的动画实现，在wxss中同样支持CSS3的动画属性：

.happy {    font-size: 50rpx;   color: #e20a0b;   animation-name: an1;   animation-duration: 5s;   animation-delay: 500ms;   animation-iteration-count: infinite;   animation-direction: normal;   animation-fill-mode: forwards;   animation-timing-function: linear; } @keyframes an1 {    from {      transform: translateX(0px);     opacity: 0.5;   }   to {      transform: translateX(300px);     opacity: 1;   } } 

微信小程序的动画JS实现方式和鸿蒙有很大不同，是通过微信提供的API定义并实现动画。接口提供了丰富的方法，服务器托管可在开发者文档查阅。

Page({    /**    * 页面的初始数据    */   data: {      an2: null   },   onShow: function () {      let an2 = wx.createAnimation({        delay: 500,       duration: 5000,       timingFunction: ease-in-out     });     an2.translate(100, 300).step();     an2.rotate(90).opacity(0.1).step();     this.setData({        an2: an2.export()     })   }, } 

动画基本属性作为createAnimation()方法的入参，动画关键帧由一连串的方法流式操作给出，以step()结束。这里一个动画的执行的时间是duration给定的时间。动画对象需使用export()导出到data中，并和页面元素的animation属性绑定。

<view class="happy" animation="{ {  an2 }}">   新年快乐 </view> 

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

很赞哦!（21）