微信小程序动画效果 Animation 理解部分

最新推荐文章于 2021-12-20 10:37:23 发布

愿你归来如春风

最新推荐文章于 2021-12-20 10:37:23 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42835650/article/details/83863985

这里是官方实例的代码下面备注一些自己的理解

WXML 部分

<view class="animation-element-wrapper">
        <view class="animation-element" animation="{
  
  {animation}}"></view>
</view>

js 部分

Page({
  onReady: function () {
    this.animation = wx.createAnimation({
      duration: 5000, //设置动画时长  
      timingFunction：“linear ” ,//设置动画效果
      transformOrigin :("50 %50 0")//  默认50 %50 0   设置动画的基点
    })
  },
  rotate: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.setData({animation: this.animation.export()})
  },
  scale: function () {
    this.animation.scale(Math.random() * 2).step()
    this.setData({animation: this.animation.export()})
  },
  translate: function () {
    
    this.animation.translateX(100).step()
    this.setData({animation: this.animation.export()})
  },
  skew: function () {
    this.animation.skew(Math.random() * 90, Math