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

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

方法一:使用 CSS 动画

  1. wxml 文件:
<view class="like-container">
  <image src="{
   
   {isLiked ? likedImg : unlikedImg}}" class="like-icon {
   
   {isLiked ? 'liked' : ''}}" bindtap="toggleLike"></image>
</view>
  1. 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;
  }
}
  1. 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 文件:
<view class="like-container">
  <canvas canvas-id="likeCanvas" class="like-canvas"></canvas>
  <image src="{
   
   {isLiked ? likedImg : unlikedImg}}" class="like-icon" bindtap="toggleLike"></image>
</view>
  1. wxss 文件:
.like-container {
  position: relative;
}

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

.like-icon {
  width: 30px;
  height: 30px;
}
  1. 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 动画更加灵活,可以实现更复杂的动画效果,但需要编写更多代码。

总结:

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

猜你喜欢

转载自blog.csdn.net/waiter456/article/details/142191032