微信小程序动画记录

1.实现闹钟，礼物摇晃的动画。

微信小程序里面使用动画和一般的不一样，比较复杂冗余一些，首先要先在wxml中设置animation，
<image animation="{{animation}}" src="{{imgs.remind}}" bindtap="toRemind"></image>
然后在js的data数据里面定义：
animation: {},
动画的方法：
remind() {
// 1: 创建动画实例animation:
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
this.animation = animation
var next = true;
//连续动画关键步骤
setInterval(function() {
//2: 调用动画实例方法来描述动画
if (next) {
animation.translateX(4).step();
animation.rotate(19).step()
next = !next;
} else {
animation.translateX(-4).step();
animation.rotate(-19).step()
next = !next;
}
//3: 将动画export导出，把动画数据传递组件animation的属性
this.setData({
animation: animation.export()
})
}.bind(this), 300)
},
最后在页面显示的生命周期中调用此方法即可：
this.remind()

2.实现点击悬浮按钮展开菜单，点击收回动画

把动画弄成一个组件

wxml:
<view bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view>
<view>
<image src="{{imgs.icon1}}" class="buttom buttom1" animation="{{anim1}}" bindtap="icon2"></image>
<image src="{{imgs.icon2}}" class="buttom buttom1" animation="{{anim2}}" bindtap="icon1"></image>
<image src="{{imgs.icon3}}" class="buttom buttom3" animation="{{animMain}}" bindtap="showOrHide"></image>
</view>
css:
/* //悬浮按钮 */
.buttom{
display: flex;
flex-direction: row;
position: fixed;
bottom:50%;
right: 60rpx;
z-index: 1001;
}
.buttom1{
width: 154rpx;
height: 130rpx;
}
.buttom2{
width: 154rpx;
height: 130rpx;
}
.buttom3{
width: 70rpx;
height: 70rpx;
}
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
.drawer_box {
overflow: hidden;
position: fixed;
z-index: 1001;
}
js:
// components/menu/menu.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {

},

/**
* 组件的初始数据
*/
data: {
isShow: false, //是否已经弹出
animMain: {}, //旋转动画
anim1: {},
anim2: {},
imgs: {
icon1: app.globalData.imgUrl + 'menu1.png',
icon2: app.globalData.imgUrl + 'menu2.png',
icon3: app.globalData.imgUrl + 'menu.png'
}, //图片
},
// 在组件实例进入页面节点树时执行
attached: function() {
//在进入页面的弹出动画
this.popp();
this.setData({
isShow: true
})
},
/**
* 组件的方法列表
*/
methods: {
//点击弹出或者收起
showOrHide: function() {
if (this.data.isShow) {
//缩回动画
this.takeback();
this.setData({
isShow: false
})
} else {
//弹出动画
this.popp();
this.setData({
isShow: true
})
}
},

icon1: function() {
this.triggerEvent("icon1Event")
this.showOrHide()
},
icon2: function() {
this.triggerEvent("icon2Event")
this.showOrHide()
},

//弹出动画
popp: function() {
//main按钮顺时针旋转
var animationMain = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationDelLots = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationAdd = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
// 位置
animationMain.rotateZ(180).step();
animationDelLots.translate(-30, -20).rotate(-0).opacity(1).step(); //item位移, 透明度
animationAdd.translate(-30, 50).rotate(0).opacity(1).step();//item位移, 透明度
this.setData({
animMain: animationMain.export(),
anim1: animationDelLots.export(),
anim2: animationAdd.export(),
})
},
//收回动画
takeback: function() {
//main按钮逆时针旋转
var animationMain = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationDelLots = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationAdd = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
animationMain.rotateZ(45).step();
animationDelLots.translate(0, 0).rotateZ(0).opacity(0).step();
animationAdd.translate(0, 0).rotateZ(0).opacity(0).step();
this.setData({
animMain: animationMain.export(),
anim1: animationDelLots.export(),
anim2: animationAdd.export(),
})
}
},
//解决滚动穿透问题
myCatchTouch: function() {
return
}
})

在页面中使用：
1.引入组件：
{
“usingComponents”: {
“menu”: “…/…/components/smart_menu/menu”
}
}
2.页面中使用：

_icon1Event和_icon2Event分别代表点击弹出的两张图片的各自的点击事件，要执行的操作分别在此事件下面执行。