微信小程序完成简单的模仿抖音点赞效果动画wx.createAnimation
微信小程序实现抖音点赞效果动画
在微信小程序中,实现抖音点赞效果动画可以使用 `wx.createAnimation` API。下面我们一步步地来实现这个功能。
1. 引入必要的API和样式首先,我们需要引入 `wx.createAnimation` API,以及一些基本的样式。
```html
```
```javascript// jsPage({
data: {
swiperappear: false,
lastTime:0,
swipers: [], // swiper数据 current:0, // 当前swiper索引 },
dbclick() {
this.setData({ swiperappear: true });
},
});
```
```css/* wxss */
.hoverClass {
background-color: ccc;
}
```
2. 创建动画实例在 `dbclick` 方法中,我们需要创建一个动画实例。
```javascript// jsdbclick() {
const animation = wx.createAnimation({
duration:500,
timingFunction: 'ease-in-out',
});
this.animation = animation;
this.setData({ swiperappear: true });
}
```
3. 设置动画效果在 `dbclick` 方法中,我们需要设置动画效果。
```javascript// jsdbclick() {
const animation = wx.createAnimation({
duration:500,
timingFunction: 'ease-in-out',
});
this.animation = animation;
// 放大缩小效果 animation.scale(1.2,1.2).step();
animation.scale(1,1).step();
// 动画结束回调 animation.export()({
complete: () => {
this.setData({ swiperappear: false });
},
});
this.setData({ swiperappear: true });
}
```
4. 绑定动画效果在 `wxml` 中,我们需要绑定动画效果。
```html
```
```css/* wxss */
.animation-content {
transform: scale(1);
}
```
5. 完成动画效果最后,我们需要完成动画效果。
```javascript// jsdbclick() {
const animation = wx.createAnimation({
duration:500,
timingFunction: 'ease-in-out',
});
this.animation = animation;
// 放大缩小效果 animation.scale(1.2,1.2).step();
animation.scale(1,1).step();
// 动画结束回调 animation.export()({
complete: () => {
this.setData({ swiperappear: false });
},
});
this.setData({ swiperappear: true });
}
```
结果经过上述步骤,我们可以实现抖音点赞效果动画。效果如下:
* 当用户点击时,会出现放大缩小的效果。
* 动画结束后,会恢复到原始状态。
以上就是微信小程序实现抖音点赞效果动画的详细步骤。
小程序点赞微信小程序wx.createAnimation模仿抖音点赞效果