溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
微信小程序——簡易動畫案例
wxml：
<view class="container">
<view animation="{{animation}}" class="view">我在做動畫</view>
</view>
<button type="primary" bindtap="translate">旋轉</button>
js：
//js
Page({
data: {
},
onReady: function () {
// 頁面渲染完成
//實例化一個動畫
this.animation = wx.createAnimation({
// 動畫持續時間，單位ms，默認值 400
duration: 400,
/**
* http://cubic-bezier.com/#0,0,.58,1
* linear 動畫一直較為均勻
* ease 從勻速到加速在到勻速
* ease-in 緩慢到勻速
* ease-in-out 從緩慢到勻速再到緩慢
*
* http://www.tuicool.com/articles/neqMVr
* step-start 動畫一開始就跳到 100% 直到動畫持續時間結束 一閃而過
* step-end 保持 0% 的樣式直到動畫持續時間結束 一閃而過
*/
timingFunction: 'ease',
// 延遲多長時間開始
delay: 100,
/**
* 以什么為基點做動畫 效果自己演示
* left,center right是水平方向取值，對應的百分值為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({
//輸出動畫
animation: this.animation.export()
})
}
})
如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
