1 回复
实现类似京东直播点赞效果，在uni-app中可以通过使用nvue页面来高效处理动画和频繁的用户交互。以下是一个简单的代码示例，展示如何在nvue页面中实现点赞动画效果。
1. 创建nvue页面
首先，在你的uni-app项目中创建一个nvue页面，比如live-like.nvue。
2. 页面布局
在live-like.nvue中，定义一个容器来放置点赞按钮和点赞动画。
<template>
<div class="container">
<button @click="addLike" class="like-button">👍</button>
<div class="like-animation-container">
<div v-for="(like, index) in likes" :key="index" class="like-animation" :style="likeStyle(like)"></div>
</div>
</div>
</template>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.like-button {
margin-bottom: 20px;
font-size: 24px;
padding: 10px 20px;
}
.like-animation-container {
position: relative;
width: 100%;
height: 100px;
}
.like-animation {
position: absolute;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
opacity: 0;
}
</style>
3. 逻辑实现
在<script>标签中实现点赞动画的逻辑。
<script>
export default {
data() {
return {
likes: [],
};
},
methods: {
addLike() {
const like = {
x: Math.random() * window.innerWidth,
y: Math.random() * (window.innerHeight - 100), // 100 is the container height
startTime: Date.now(),
};
this.likes.push(like);
setTimeout(() => {
const index = this.likes.indexOf(like);
if (index !== -1) {
this.likes.splice(index, 1);
}
}, 2000); // Animation duration
},
likeStyle(like) {
const elapsed = Date.now() - like.startTime;
const opacity = Math.max(0, 1 - elapsed / 2000);
return {
left: `${like.x}px`,
top: `${like.y}px`,
opacity,
};
},
},
};
</script>
说明
- 布局：使用Flexbox布局将点赞按钮和动画容器居中。
- 动画：通过
v-for循环渲染点赞动画，每个动画元素的位置随机生成，并随时间逐渐消失。 - 逻辑：
addLike方法用于添加新的点赞动画，并设置2秒后移除该动画。likeStyle方法根据动画的持续时间计算当前透明度。
这样，你就实现了一个简单的类似京东直播点赞效果。根据需求，你可以进一步优化动画效果，比如添加更多的动画属性（缩放、旋转等）或者调整动画曲线。
