微信小程序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