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

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

创新互联建站为客户提供专业的成都网站设计、网站制作、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、成都做手机网站等网站方面业务。

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

https://harmonyos.

在进入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：动画模式
 
 
 
 
    
  
  
  
  
    2. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  1. .logo {
    2. 
  
  
  
  
  2.     width: 300px;
    3. 
  
  
  
  
  3.     height: 300px;
    4. 
  
  
  
  
  4.     border-radius: 150px;
    5. 
  
  
  
  
  5.     animation-name: an1;
    6. 
  
  
  
  
  6.     animation-duration: 5s;
    7. 
  
  
  
  
  7.     animation-iteration-count: 1;
    8. 
  
  
  
  
  8.     animation-timing-function: linear;
    9. 
  
  
  
  
  9.     animation-fill-mode: none;
    10. 
  
  
  
  
  10. }
    11.

1.2 用"@keyframes 动画名"匹配设置动画规则。

 
 
 
 
    
  
  
  
  
  1. @keyframes an1 {
    2. 
  
  
  
  
  2.         from {
    3. 
  
  
  
  
  3.             transform: rotate(180deg);
    4. 
  
  
  
  
  4.             opacity: 0.3;
    5. 
  
  
  
  
  5.         }
    6. 
  
  
  
  
  6.         to {
    7. 
  
  
  
  
  7.             transform: rotate(360deg);
    8. 
  
  
  
  
  8.             opacity: 1.0;
    9. 
  
  
  
  
  9.         }
    10. 
  
  
  
  
  10. }
    11.

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

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

2、基于JS的动画效果

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

 
 
 
 
    
  
  
  
  
    2.

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

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

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

 
 
 
 
    
  
  
  
  
  1. onShow() {
    2. 
  
  
  
  
  2.      // 设置动画
    3. 
  
  
  
  
  3.      let textImg = this.$element("textImg").animate([
    4. 
  
  
  
  
  4.          {
    5. 
  
  
  
  
  5.              transform: {translateY: '200px'}, opacity: 0.1
    6. 
  
  
  
  
  6.          },
    7. 
  
  
  
  
  7.          {
    8. 
  
  
  
  
  8.              transform: {translateY: '0px'}, opacity: 1
    9. 
  
  
  
  
  9.          }
    10. 
  
  
  
  
  10.      ], {
    11. 
  
  
  
  
  11.          duration: 5000,
    12. 
  
  
  
  
  12.          easing: "linear-out-slow-in",
    13. 
  
  
  
  
  13.          fill: "forwards",
    14. 
  
  
  
  
  14.          iterations: 1
    15. 
  
  
  
  
  15.      });
    16. 
  
  
  
  
  16.      textImg.play();
    17. 
  
  
  
  
  17.      ......
    18. 
  
  
  
  
  18.  }
    19.

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

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

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

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

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

3、JS定时器

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

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

倒计时部分，hml视图层：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.         {{ loading }}
    5. 
  
  
  
  
  5.     
    6.
  •     {{ seconds }}

  • css渲染层：

     
 
 
 
      
  
  
  
  
    1. .loading {
      2. 
  
  
  
  
    2.     width: 100%;
      3. 
  
  
  
  
    3.     height: 150px;
      4. 
  
  
  
  
    4.     display: flex;
      5. 
  
  
  
  
    5.     justify-content: center;
      6. 
  
  
  
  
    6.     align-items: center;
      7. 
  
  
  
  
    7. }
      8. 
  
  
  
  
    8. progress {
      9. 
  
  
  
  
    9.     width: 120px;
      10. 
  
  
  
  
    10.     height: 120px;
      11. 
  
  
  
  
    11. }
      12. 
  
  
  
  
    12. .loading>text {
      13. 
  
  
  
  
    13.     font-size: 40px;
      14. 
  
  
  
  
    14.     color: #666666;
      15. 
  
  
  
  
    15. }
      16. 
  
  
  
  
    16. .count {
      17. 
  
  
  
  
    17.     position: fixed;
      18. 
  
  
  
  
    18.     bottom: 385px;
      19. 
  
  
  
  
    19.     left: 225px;
      20. 
  
  
  
  
    20.     font-size: 60px;
      21. 
  
  
  
  
    21.     color: #666666;
      22. 
  
  
  
  
    22. }
      23.

    js逻辑层：

     
 
 
 
      
  
  
  
  
    1. onShow() {
      2. 
  
  
  
  
    2.   ......
      3. 
  
  
  
  
    3.       // 设置倒计时
      4. 
  
  
  
  
    4.       let iv = setInterval(() => {
      5. 
  
  
  
  
    5.           let suffix;
      6. 
  
  
  
  
    6.           switch (this.seconds % 3) {
      7. 
  
  
  
  
    7.               case 2:
      8. 
  
  
  
  
    8.               suffix = "...";
      9. 
  
  
  
  
    9.               break;
      10. 
  
  
  
  
    10.               case 1:
      11. 
  
  
  
  
    11.               suffix = "..";
      12. 
  
  
  
  
    12.               break;
      13. 
  
  
  
  
    13.               default:
      14. 
  
  
  
  
    14.               suffix = ".";
      15. 
  
  
  
  
    15.               break;
      16. 
  
  
  
  
    16.           }
      17. 
  
  
  
  
    17.           this.loading = "数据加载中" + suffix;
      18. 
  
  
  
  
    18.           this.seconds--;
      19. 
  
  
  
  
    19.           if (this.seconds == 0) {
      20. 
  
  
  
  
    20.               clearInterval(iv);
      21. 
  
  
  
  
    21.           }
      22. 
  
  
  
  
    22.       }, 1000);
      23. 
  
  
  
  
    23.   }
      24.

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

     
 
 
 
      
  
  
  
  
    1. onInit() {
      2. 
  
  
  
  
    2.      // 首页数据预加载
      3. 
  
  
  
  
    3.      // 获取广告图片
      4. 
  
  
  
  
    4.      fetch.fetch({
      5. 
  
  
  
  
    5.          ......
      6. 
  
  
  
  
    6.      });
      7. 
  
  
  
  
    7.      // 获取推荐商品
      8. 
  
  
  
  
    8.      fetch.fetch({
      9. 
  
  
  
  
    9.          ......
      10. 
  
  
  
  
    10.      });
      11. 
  
  
  
  
    11.      // 获取一级分类
      12. 
  
  
  
  
    12.      fetch.fetch({
      13. 
  
  
  
  
    13.          ......
      14. 
  
  
  
  
    14.      });
      15. 
  
  
  
  
    15.  },
      16. 
  
  
  
  
    16.  onShow() {
      17. 
  
  
  
  
    17.      // 设置定时跳转
      18. 
  
  
  
  
    18.      let to = setTimeout(() => {
      19. 
  
  
  
  
    19.          router.replace({
      20. 
  
  
  
  
    20.              uri: "pages/index/index",
      21. 
  
  
  
  
    21.              params: {
      22. 
  
  
  
  
    22.                  ad: this.ad,
      23. 
  
  
  
  
    23.                  newGoods: this.newGoods,
      24. 
  
  
  
  
    24.                  hotGoods: this.hotGoods,
      25. 
  
  
  
  
    25.                  types: this.types
      26. 
  
  
  
  
    26.              }
      27. 
  
  
  
  
    27.          });
      28. 
  
  
  
  
    28.          clearTimeout(to);
      29. 
  
  
  
  
    29.      }, 6000);
      30. 
  
  
  
  
    30.  ......
      31. 
  
  
  
  
    31.  }
      32.

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

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

     
 
 
 
      
  
  
  
  
    1. .happy {
      2. 
  
  
  
  
    2.   font-size: 50rpx;
      3. 
  
  
  
  
    3.   color: #e20a0b;
      4. 
  
  
  
  
    4.   animation-name: an1;
      5. 
  
  
  
  
    5.   animation-duration: 5s;
      6. 
  
  
  
  
    6.   animation-delay: 500ms;
      7. 
  
  
  
  
    7.   animation-iteration-count: infinite;
      8. 
  
  
  
  
    8.   animation-direction: normal;
      9. 
  
  
  
  
    9.   animation-fill-mode: forwards;
      10. 
  
  
  
  
    10.   animation-timing-function: linear;
      11. 
  
  
  
  
    11. }
      12. 
  
  
  
  
    12. @keyframes an1 {
      13. 
  
  
  
  
    13.   from {
      14. 
  
  
  
  
    14.     transform: translateX(0px);
      15. 
  
  
  
  
    15.     opacity: 0.5;
      16. 
  
  
  
  
    16.   }
      17. 
  
  
  
  
    17.   to {
      18. 
  
  
  
  
    18.     transform: translateX(300px);
      19. 
  
  
  
  
    19.     opacity: 1;
      20. 
  
  
  
  
    20.   }
      21. 
  
  
  
  
    21. }
      22.

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

     
 
 
 
      
  
  
  
  
    1. Page({
      2. 
  
  
  
  
    2. 
  
  
  
  
    3.   /**
      4. 
  
  
  
  
    4.    * 页面的初始数据
      5. 
  
  
  
  
    5.    */
      6. 
  
  
  
  
    6.   data: {
      7. 
  
  
  
  
    7.     an2: null
      8. 
  
  
  
  
    8.   },
      9. 
  
  
  
  
    9. 
  
  
  
  
    10.   onShow: function () {
      11. 
  
  
  
  
    11.     let an2 = wx.createAnimation({
      12. 
  
  
  
  
    12.       delay: 500,
      13. 
  
  
  
  
    13.       duration: 5000,
      14. 
  
  
  
  
    14.       timingFunction: 'ease-in-out'
      15. 
  
  
  
  
    15.     });
      16. 
  
  
  
  
    16.     an2.translate(100, 300).step();
      17. 
  
  
  
  
    17.     an2.rotate(90).opacity(0.1).step();
      18. 
  
  
  
  
    18.     this.setData({
      19. 
  
  
  
  
    19.       an2: an2.export()
      20. 
  
  
  
  
    20.     })
      21. 
  
  
  
  
    21.   },
      22. 
  
  
  
  
    22. }
      23.

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   新年快乐
      3. 
  
  
  
  
    3.

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

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

    https://harmonyos.

    文章标题：从微信小程序到鸿蒙JS开发-CSS3动画&JS动画&定时器
    网页路径：http://www.csdahua.cn/qtweb/news33/227033.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    用户体验知识

    分类信息网

    成都商城开发　　 　堡垒主机　　 　宜宾做网站　　 　联通机房服务器托管　　 　网络整合营销　　 　重庆移动网站建设　　 　内江广告　　 　德阳电信机房　　 　香港空间腾讯云　　 　顺泽窗帘　　 　成都响应式网站建设公司　　 　平昌保洁　　 　轻质隔墙板　　 　发光字制作　　 　圣月冷冻库　　 　成都西信服务器托管　　 　班戈纳美网站　　 　西部信息服务器托管　　 　简阳电信服务器托管　　 　重庆网站设计