微信小程序animation动画2种方法

这里介绍 2 种方法
一种是常规的小程序方法操作，另一种是引入动画库

1. 常规动画操作设置

wxml:

<view>
   <view bindtap="clickMe">点我有动画</view>
   <view animation="{{donghua}}" class='test'>点我有动画---测试</view>
</view>

js:(3步骤)

data:{
    donghua:""
},
//----------------------------------1、创建动画实例  , ani 是 onLoad 的一个属性
onLoad: function (options) {
    //动画可以挂载到这里 ！！ 
    this.ani = wx.createAnimation({
        duration:1000,
        timingFunction:"liner"
    })
 },
 //-----------------------------------2、实现动画效果 ,  step() 表示一组动画完成。
  clickMe(){
    this.ani.left(50).top(50).step() //可改变的相关值可以自行查找 API
    //---------------------------------3、导出动画 。
    this.setData({
      donghua:this.ani.export()
    })
  },

wxss:

.test{
    position: absolute;
    left:150px;
    top:150px;
/* 这里设置了left 和 top 的初始值 ， 动画效果更明显 */
}

2. 引入动画库

1. 在 app.wxss 中全局引入动画库 ， 文件可点击 http://nodejs999.com/animate.wxss 下载，放在 utils 文件中。

@import "./utils/animate.wxss";

　　2.例子：
　　　　注意：引入动画库记得要加上animated ！！！
wxml:

<view>
    <view bindtap="showPickV">点我动画</view>
    <view class='pickV animated {{bounceInUp}} {{goBottom}}'>123</view>
</view>

wxss:

page{
   height:100%;
   overflow: hidden;
   /* 防止pickV定位有滚动条 */
}
.pickV{
   position: absolute;
   bottom:-100%;
}
.goBottom{
   bottom:0;
}

js:

data:{
    bounceInup:"",
    goBottom:"",
    isShow:false,
},
showPickV(){
    if(this.data.isShow == false){
      this.setData({
          bounceInUp:"bounceInUp",
          goBottom:"goBottom"
      })
    }else{
      this.setData({
          bounceInUp: "bounceOut",
          goBottom:""
      })
    }
    this.setData({
        isShow:!this.data.isShow
    })
}

转载地址:https://www.jianshu.com/p/bac2e985de49