这里提供两种实现点赞动画特效的方法:
方法一:使用 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 动画更加灵活,可以实现更复杂的动画效果,但需要编写更多代码。
总结:
以上两种方法都可以实现点赞动画效果,您可以根据实际需求选择合适的方案。