版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013338742/article/details/80077270
1,缩小变大消失特效:
//js
data: {
animationData: null
},
ani_smallbigOut: function(){
let that = this
console.log("animate")
var animation = wx.createAnimation({
duration: 750,
timingFunction: 'ease',
})
this.animation = animation
animation.scale(0.4, 0.4).step()
animation.scale(4, 4).step()
that.setData({
animationData: animation.export(),
})
setTimeout(function(){
that.setData({
flag: false
})
},1500)
},
2, 渐隐消失
//js
fadeOut: function(){
var animation = wx.createAnimation({
duration: 800,
timingFunction: 'linear'
})
this.animation = animation
animation.opacity(0).step()
this.setData({
animationData: animation.export(),
})
},
3, 渐显:
fadeIn: function () {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'linear'
})
// this.animation = animation
animation.opacity(1).step()
this.setData({
animationData: animation.export(),
})
},
5, 3d旋转( 翻转)
rotate3d: function(){
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
//rotate3d: 参数 x,y,z轴, 翻转度数
//其中x,y,z轴为0-1范围,y轴设置为1,代表以y轴为旋转轴
animation.rotate3d(0,1,0,180).step()
this.setData({
rotate3dA: animation.export()
})
},
6,倾斜:
skewXY: function(){
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
//参数: ax,[ay] 参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度
animation.skew(0, 10).step()
this.setData({
skeyA: animation.export()
})
},
7, 左侧滑入:
//wxml
<image src='../../imgs/animate.jpg' animation="{{animationLsi}}" style="position: relative; left: -500px;"></image>
<button bindtap='leftSlideIn'>leftSlideIn</button>
//js
leftSlideIn: function(){
let animation = wx.createAnimation({
duration: 1000,
timingFunction:'ease'
})
animation.translateX(500).step()
this.setData({
animationLsi: animation.export()
})
},