微信小程序完成简单的模仿抖音点赞效果动画wx.createAnimation

10

微信小程序完成简单的模仿抖音点赞效果动画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

{{animationContent}}

```

```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模仿抖音点赞效果

版权声明:除非特别标注,否则均为网络文章,侵权请联系站长删除。

上一篇 关于微信精选留言点赞刷赞之公众号评论点赞及文章评论点赞软件使用方法

下一篇 【RPA自动化|提升办公效率|懒人必备】微信自动点赞