uniapp中实现水波纹动画效果
1. 点击事件绑定
要实现水波纹动画效果，首先需要在模板中绑定点击事件。可以通过 v-on 或 @ 来绑定事件，例如：
<view @click="handleClick">点击我</view>
表示在 view 元素上绑定 handleClick 方法。
2. CSS样式设置
接下来需要设置一个水波纹样式，可以使用 CSS 的伪元素 :after，使用绝对定位将其放在点击元素之上，利用 CSS 动画实现水波纹效果。代码如下：
<style>
.ripple {
position: relative;
}
.ripple:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
opacity: 0;
animation: ripple-effect 1s ease-out;
}
@keyframes ripple-effect {
0% {
opacity: 1;
width: 0;
height: 0;
}
100% {
opacity: 0;
width: 200%;
height: 200%;
}
}
</style>
这里的关键点是，设置 left 和 top 为 50% 并使用 transform: translate(-50%, -50%); 来使其居中，以及设置初始 width 和 height 为 0，动画中的宽度和高度则是两倍的父元素宽度，达到扩散的效果。
3. 处理点击事件
在点击事件绑定的函数中，需要处理以下两个步骤：
3.1 计算水波纹动画位置
由于水波纹必须在点击元素上，因此需要获取点击元素的位置。可以通过事件对象的 offsetX 和 offsetY 属性来获取点击位置相对于点击元素的位置。代码如下：
handleClick(event) {
const x = event.offsetX;
const y = event.offsetY;
// 其他操作
}
接下来可以将获取到的位置保存到数据中，以供后面水波纹样式的动态设置。
3.2 动态设置水波纹样式
在点击事件处理函数中，需要动态添加 ripple 类名，表示当前元素需要添加水波纹效果。同时，需要设置伪元素的位置和样式，让其覆盖整个点击元素并且扩散。
可以通过 setData 来设置数据，触发视图更新。代码如下：
handleClick(event) {
const x = event.offsetX;
const y = event.offsetY;
this.setData({
ripple: {
x,
y,
active: true
}
})
setTimeout(() => {
this.setData({
ripple: {
x,
y,
active: false
}
})
}, 1000)
}
其中，active 表示是否需要添加水波纹样式，setTimeout 用于控制水波纹的持续时间。
4. 完整实现代码
综合以上步骤，可以得到完整的实现代码：
<template>
<view class="ripple" :class="{ 'active': ripple.active }" @click="handleClick">
{{ text }}
</view>
</template>
<script>
export default {
data() {
return {
ripple: {
x: 0,
y: 0,
active: false
},
text: '点击我'
}
},
methods: {
handleClick(event) {
const x = event.offsetX;
const y = event.offsetY;
this.setData({
ripple: {
x,
y,
active: true
}
})
setTimeout(() => {
this.setData({
ripple: {
x,
y,
active: false
}
})
}, 1000)
}
}
}
</script>
<style scoped>
.ripple {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background-color: #007aff;
color: #fff;
border-radius: 50%;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ripple.active::after {
content: '';
position: absolute;
left: {{ ripple.x }}px;
top: {{ ripple.y }}px;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
opacity: 1;
animation: ripple-effect 1s ease-out;
}
@keyframes ripple-effect {
0% {
opacity: 1;
width: 0;
height: 0;
}
100% {
opacity: 0;
width: 200%;
height: 200%;
}
}
</style>
以上代码中，{{ ripple.x }} 和 {{ ripple.y }} 是动态获取的点击位置，用于设置水波纹位置。
总结
通过以上步骤，我们可以在 uniapp 中实现一个简单的水波纹动画效果。需要注意的是，在开启动画时需要将样式动态设置，而关闭动画时需要等待动画结束后再将样式移除。这里的样式移除可以通过 v-if 或动态 class 等方法来实现。