微信小程序——簡易動畫案例

創新互聯公司-專業網站定制、快速模板網站建設、高性價比潼南網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式潼南網站制作公司更省心,省錢,快速模板網站建設找我們,業務覆蓋潼南地區。費用合理售后完善,十多年實體公司更值得信賴。
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()
})
}
})
如有疑問請留言或者到本站社區交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
網站欄目:微信小程序動畫的簡單實例
網頁鏈接:http://www.js-pz168.com/article9/pgijih.html
成都網站建設公司_創新互聯,為您提供網站維護、微信公眾號、面包屑導航、品牌網站制作、建站公司、外貿網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯