|
|
|
|
公众号矩阵

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

文章由鸿蒙社区产出,想要了解更多内容请前往:51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

作者:Chris来源:鸿蒙社区|2021-02-24 09:36

想了解更多内容,请访问:

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

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:动画模式
  1. <image src="/common/huaWei.jpeg" class="logo"></image> 

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

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

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

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

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

2、基于JS的动画效果

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

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

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

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

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

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

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

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

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

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

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

3、JS定时器

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

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

倒计时部分,hml视图层:

  1. <div class="loading"
  2.     <progress type="circular"></progress> 
  3.     <text> 
  4.         {{ loading }} 
  5.     </text> 
  6. </div> 
  7. <text class="count"
  8.     {{ seconds }} 
  9. </text> 

css渲染层:

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

js逻辑层:

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

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

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

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

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

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

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

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

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

  1. <view class="happy" animation="{{ an2 }}"
  2.   新年快乐 
  3. </view

想了解更多内容,请访问:

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

https://harmonyos.51cto.com

【编辑推荐】

  1. 为什么你总是学不会Python,入门Python的4大陷阱
  2. 厌倦了默认系统字体?这是在Windows 10上进行更改的方法
  3. 5G手机热销之前,要先解决这些问题
  4. 手把手教你用Python爬取百度搜索结果并保存
  5. 揭秘登上2021春晚舞台的黑科技-XR技术
【责任编辑:jianghua TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

6人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

34人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

221人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微