微信小程序点赞动画特效实现
这里提供两种实现点赞动画特效的方法：
方法一：使用 CSS 动画
- wxml 文件:
<view class="like-container"><image src="{{isLiked ? likedImg : unlikedImg}}" class="like-icon {{isLiked ? 'liked' : ''}}" bindtap="toggleLike"></image>
</view>
- 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;}
}
- 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 绘制动画
- 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>
- wxss 文件:
.like-container {position: relative;
}.like-canvas {position: absolute;top: 0;left: 0;width: 30px;height: 30px;
}.like-icon {width: 30px;height: 30px;
}
- 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 动画更加灵活，可以实现更复杂的动画效果，但需要编写更多代码。
总结:
以上两种方法都可以实现点赞动画效果，您可以根据实际需求选择合适的方案。