小程序的动画animation

记录一下小程序动画的实现
先看布局文件wxml

代码也贴出来

<view class='container'>
  <!-- animation="{{animationRo}}" bindtap='animate' -->
   <view class='logo_layout1' animation="{{animationRo}}" bindtap='animate'>
    <image class='logo' src='../../images/wenzi.gif' mode='aspectFill'></image>
    <text class='logo_name' mode="aspectFit" >拍蚊子</text>
  </view>
  <!-- <commonDialog dialogTitle="开始游戏" dialogText='确定开始吗' sureText='确定' cancleText='取消'></commonDialog> -->
</view>

js 代码如下：

  onShow: function () {
    var that = this;
    setTimeout(function(){
      var animate = wx.createAnimation({
        duration:1000,
        timingFunction:'linear',
        delay:0,
        transformOrigin:'50% 50% 0'
      });
      animate.rotate(90).step();
      that.setData({
        animationRo:animate.export(),
      });
    },500);
  },

思路很简单
先在布局里给view设置animation属性，然后在js文件里wx.createAnimation创建animation，最后把创建的animation用this.setData的方法设置给view的animation属性即可。

公众号：程序员的日记，持续分享程序员界的日常生活，职业历程，行业资讯，欢迎关注