小程序animate动画实现直播间点赞

下面是关于小程序animate动画实现直播间点赞的完整攻略：

1. 准备工作

在开始实现动画之前，需要先将点赞的代码逻辑实现，即点击点赞按钮后，更新点赞数量并发送点赞请求。

2. 使用CSS动画实现点赞效果

1. 使用wx.createAnimation创建一个动画对象，并设置一个或多个CSS属性。

```js
const animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear'
});

animation.scale(2).opacity(0).step();
```

在上面的代码中，我们创建了一个时长为1秒的动画对象，并设置了一个线性的时间函数，然后设置了一个scale属性，表示将元素进行缩放，设置为2倍原大小，和一个opacity属性，表示将元素的透明度设置为0，即完全透明。最后通过animation.step()将设置好的动画步骤进行打包。

1. 将上面创建好的动画通过animation.export()导出，并存储到当前页面的数据中。

js
this.setData({
animationData: animation.export(),
});

在这里，我们将创建好的动画通过export方法导出，并存储到当前页面的数据中。

1. 将动画与点赞效果绑定。

html
<button bindtap="startAnimation">点赞</button>
<image class="animate-liked"
src="../../../images/icon_like (liked).png"
animation="{{animationData}}"
/>

在这段代码中，我们通过bindtap事件绑定startAnimation方法，表示当点击点赞按钮时进行动画效果；同时将animationData数据绑定到图片元素的animation属性中，表示使用该动画效果进行图像的显示和隐藏。

3. 示例说明

1. 将头像变大示例

   ```js
   const animation = wx.createAnimation({
   duration: 1000,
   timingFunction: 'linear'
   });

   // 将头像放大2倍
   animation.scale(2).step();

   this.setData({
   animationData: animation.export(),
   avatarSrc: "../../images/avatar (liked).png"
   });
   ```

   在该示例中，我们在进行点赞的同时将头像图片进行放大的动画效果，即先通过createAnimation创建一个时长为1秒的动画对象，并设置一个线性的时间函数，然后设置一个scale属性，表示将元素进行缩放，设置为2倍原大小，最后通过animation.step()将设置好的动画步骤进行打包。

   然后通过setData方法将创建好的动画通过export方法导出，并存储到当前页面的数据中，并将头像图片的src属性绑定到点赞的图片上。

2. 点赞后显示一秒钟示例

   ```js
   const animation = wx.createAnimation({
   duration: 1000,
   timingFunction: 'linear'
   });

   // 显示点赞图案
   animation.opacity(1).step();

   this.setData({
   animationData: animation.export(),
   });

   setTimeout(() => {
   // 隐藏点赞图案
   animation.opacity(0).step();
   this.setData({
   animationData: animation.export(),
   });
   }, 1000);
   ```

   在该示例中，我们在进行点赞的同时将点赞图片在显示1秒后进行隐藏的动画效果，即先通过createAnimation创建一个时长为1秒的动画对象，并设置一个线性的时间函数，然后设置一个opacity属性，表示将元素的透明度设置为1，即完全不透明。最后通过animation.step()将设置好的动画步骤进行打包，并通过setData方法将创建好的动画通过export方法导出，并存储到当前页面的数据中。

   然后使用setTimeout方法，在一秒后将点赞图片的透明度设置为0，即进行隐藏的动画效果，并将动画重新导出并存储到当前页面的数据中。