微信小程序——簡(jiǎn)易動(dòng)畫案例

wxml：

<view class="container"><view animation="{{animation}}" class="view">我在做動(dòng)畫</view></view><button type="primary" bindtap="translate">旋轉(zhuǎn)</button> 

js：

//jsPage({ data: { }, onReady: function () {  // 頁面渲染完成  //實(shí)例化一個(gè)動(dòng)畫  this.animation = wx.createAnimation({   // 動(dòng)畫持續(xù)時(shí)間，單位ms，默認(rèn)值 400   duration: 400,   /**   * http://cubic-bezier.com/#0,0,.58,1    * linear 動(dòng)畫一直較為均勻   * ease 從勻速到加速在到勻速   * ease-in 緩慢到勻速   * ease-in-out 從緩慢到勻速再到緩慢   *    * http://www.tuicool.com/articles/neqMVr   * step-start 動(dòng)畫一開始就跳到 100% 直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過   * step-end 保持 0% 的樣式直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過   */   timingFunction: 'ease',   // 延遲多長(zhǎng)時(shí)間開始   delay: 100,   /**   * 以什么為基點(diǎn)做動(dòng)畫 效果自己演示   * left,center right是水平方向取值，對(duì)應(yīng)的百分值為left=0%;center=50%;right=100%   * top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%   */   transformOrigin: 'left top 0',   success: function (res) {    console.log(res)   }  }) }, /** *位移 */ translate: function () {  //x軸位移100px  this.animation.translate(100, 0).step()  this.setData({   //輸出動(dòng)畫   animation: this.animation.export()  }) }})

如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！