微信小程序——簡(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ì)本站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選