需求是用户点赞的时候,小心心跳动一下(变大然后恢复),大概是这个样子 ↓
(图片放大1.5倍)
找了很久都没有类似的demo,各种尝试之后终于成功了,代码(仅动画):
wxml:
<!-- 点赞 -->
(已点赞?红心图片:灰心图片)
<view bindtap='onLike'>
<image src="{{like?icon_like:icon_unlike}}" class="pickimg" animation="{{animation}}"></image>
<text>{{count}}</text>
</view>
js :
data: {
icon_like: '../../icon/icon_like.png',
icon_unlike: '../../icon/icon_unlike.png',
like:false, //是否已点赞
count:0 //点赞数量
},
//点赞
onLike(e) {
wx.vibrateShort() //手机振动API
this.animation = wx.createAnimation({
duration: 300, // 动画持续时间,单位 ms
timingFunction: 'linear', // 动画的效果
delay: 10, // 动画延迟时间,单位 ms
transformOrigin: '50% 50%' // 动画的中心点
})
let like = this.properties.like
let count = this.properties.count
count = like ? count - 1 : count + 1
if (!like) {
setTimeout(function () {
this.animation.scale(1.5).step();
this.animation.scale(1.0).step();
this.setData({
animation: this.animation.export()
});
}.bind(this), 50);
}
this.setData({
count,
like: !like
})
},