Anime+Vue<简单的雨滴打窗效果>
2020-03-04 本文已影响0人
誰在花里胡哨
效果图：
raindrop.gif
🎈大佬永远是大佬，总是无法超越，此篇文章是参考以下地址效果，进行实现(这里基本是用的css+html较多，大佬的肯定牵扯到 canvas js等复杂内容 )
image.png
🎈参考地址：https://www.jq22.com/jquery-info4697
注意：下载下来是无法使用的
🎈因为源码下载下来有问题，而且还被加密了，所以无法深入学习，只能顺藤摸瓜，先试着百度，百度上有如何教你怎么实现简单的雨滴效果，简单的来说就是：
1. 背景一张图片；
2. 雨滴一样的标签；
3. 雨滴标签里装一张倒过来的图片；
4. 创建很多标签，然后进行动画效果。
image.png
🎈单纯想看实现原理的，可以 点击参考这篇文章 或者看下面简单的 css+html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#bck_img {
width: 100%;
height: 100%;
position: absolute;
transform: scale(1.1);
filter: blur(10px);
z-index: -1;
}
.raindrop{
filter: blur(1px);
opacity: 0.7;
background: transparent;
position: absolute;
top: 0%;
left: 50%;
width: 30px;
height: 40px;
border-radius: 100%;
transform: rotate(180deg) scale(0.8) translateY(200px);
background-image: url('./img/wallhaven-wyrqg7.png');
background-size: 100% 100%;
box-shadow:0 0 2px rgba(83, 83, 83, 0.596);
animation: raindropMove 10s ease infinite;
}
@keyframes raindropMove {
100%{
transform: rotate(180deg) translateY(-1000px) scale(0.8);
}
}
</style>
</head>
<body>
<img id="bck_img" src="./img/wallhaven-wyrqg7.png" alt="">
<div class="raindrop"></div>
</body>
</html>
🎈使用anime.js+vue主要是为了方便创造更多的雨点和实现动画，此代码并没有做过多解释，因为感觉距离自己的理想效果还差很远，我也会在日后对canvas的学习中，去努力实现更好的效果，所以有简单需要的可以直接使用
代码如下：
<template>
<div class="body">
<img id="bck_img" src="@/assets/img/bck3.jpg" alt />
<div class="raindrop_box">
<div
class="raindrop"
v-for="(i,index) in 200"
:key="index"
:style="`top:${random(0,window_h)}px;left:${random(0,window_w)}px;;`"
>
<img src="@/assets/img/bck3.jpg" alt />
</div>
</div>
<svg style="width: 0; height: 0;">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo"
/>
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix
in="shadow"
mode="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2"
result="shadow"
/>
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feBlend in2="shadow" in="goo" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
</div>
</template>
<script>
import anime from "animejs/lib/anime.es.js";
export default {
data() {
return {
window_w: window.innerWidth,
window_h: window.innerHeight
};
},
methods: {
random(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
},
mounted() {
let _this = this;
console.log(_this.window_h);
let raindrops = document.querySelectorAll(".raindrop");
anime({
targets: ".raindrop",
scale: function(el, i, l) {
return anime.random(1, 5) * 0.1;
},
duration: 0,
complete: function(params) {
for (let i = 0; i < raindrops.length; i++) {
anime({
targets: raindrops[i],
delay: i * -100,
easing: "easeInOutExpo",
translateY: _this.window_h,
duration: 7000,
loop: true
});
}
}
});
}
};
</script>
<style lang="scss" scoped>
.body {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
#bck_img {
position: absolute;
left: 0;
width: 100%;
height: 100%;
filter: blur(10px);
transform: scale(1.1);
z-index: -1;
}
.raindrop_box {
filter: url("#shadowed-goo");
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
.raindrop {
position: absolute;
width: 30px;
height: 40px;
border-radius: 100%;
overflow: hidden;
filter: blur(1px);
img {
width: 100%;
height: 100%;
transform: scaleY(-1);
}
}
}
}
</style>
