微信小程序点赞动画特效实现

这里提供两种实现点赞动画特效的方法：

方法一：使用 CSS 动画

1. wxml 文件:

   

2. wxss 文件:

   .like-container {
   position: relative;
   }

   .like-icon {
   width: 30px;
   height: 30px;
   }

   .liked {
   animation: likeAnimation 0.5s ease-out;
   }

   @keyframes likeAnimation {
   0% {
   transform: scale(1);
   opacity: 0;
   }
   50% {
   transform: scale(1.5);
   opacity: 1;
   }
   100% {
   transform: scale(1);
   opacity: 0;
   }
   }

3. js 文件:

   Page({
   data: {
   isLiked: false,
   likedImg: '/path/to/liked-icon.png',
   unlikedImg: '/path/to/unliked-icon.png',
   },
   toggleLike() {
   this.setData({
   isLiked: !this.data.isLiked
   })
   }
   })

解释:

• 在 wxml 中，使用 image 组件展示点赞图标，并绑定 toggleLike 函数到点击事件。
• 在 wxss 中，使用 @keyframes 定义动画 likeAnimation，实现缩放和渐隐效果。
• 在 js 中，通过 isLiked 变量控制点赞状态，并动态切换图片和添加动画效果。

方法二：使用 canvas 绘制动画

1. wxml 文件:

   

2. wxss 文件:

   .like-container {
   position: relative;
   }

   .like-canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 30px;
   height: 30px;
   }

   .like-icon {
   width: 30px;
   height: 30px;
   }

3. js 文件:

   Page({
   data: {
   isLiked: false,
   likedImg: '/path/to/liked-icon.png',
   unlikedImg: '/path/to/unliked-icon.png',
   },
   toggleLike() {
   this.setData({
   isLiked: !this.data.isLiked
   })
   this.drawLikeAnimation()
   },
   drawLikeAnimation() {
   const ctx = wx.createCanvasContext('likeCanvas', this)
   // ... 使用 canvas API 绘制点赞动画，例如：绘制心形、气泡等
   }
   })

解释:

• 在 wxml 中，使用 canvas 组件作为动画容器，并使用 image 组件展示点赞图标。
• 在 wxss 中，将 canvas 组件绝对定位在 image 组件上方。
• 在 js 中，使用 canvas API 绘制点赞动画，例如绘制心形、气泡等。

两种方法的比较:

• CSS 动画简单易用，但效果较为单一。
• Canvas 动画更加灵活，可以实现更复杂的动画效果，但需要编写更多代码。

总结:

以上两种方法都可以实现点赞动画效果，您可以根据实际需求选择合适的方案。