微信小程序 --- 动画

动画的基本使用:

旋转动画网址:yii666.com

缩放动画

偏移动画网址:yii666.com<

倾斜动画文章来源地址:https://www.yii666.com/article/756301.html

矩阵动画

动画API:wx.createAnimation(object)

示例:创建一个点击的动画文章来源地址https://www.yii666.com/article/756301.html

<view class="animation" animation="{{animationData}}" bindtap="clickBtn">
动画
</view>

page.js文件文章地址https://www.yii666.com/article/756301.html

//获取应用实例
const app = getApp()
Page({
data: {
animationData:[]
},
clickBtn:function(){
//创建动画
var animation = wx.createAnimation({
duration:400,
timingFunction:"linear",
dalay:0,
transformOrign:"50% 50% 0"
});
// 设置动画
animation.rotate(90).step();
// step 代表步
// animation.rotate(90).scale(2).step(); // 旋转放大
// animation.rotate(90).step();
// animation.scale(90).step();
// 将动画数据导出 并进行设置
this.setData({animationData:animation.export()});
}
})

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png