vue + svg 绘制水波纹、波浪动画效果

效果：

实现可配置图像大小、水面高度、波浪高度、波浪速度等

<template><div class="wave-svg" :style="`width:${width}px;height:${height}px;`"><div style="width:100%;height:100%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" :width="width" :height="height" :viewbox="`0 0 ${width} ${height}`"><defs><linearGradient id="line1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#3DCDEA;stop-opacity:1"/><stop offset="100%" style="stop-color:#0070EA; stop-opacity:1"/></linearGradient></defs><defs><linearGradient id="line2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#4AB5FF;stop-opacity:1"/><stop offset="100%" style="stop-color:#3686FF; stop-opacity:1"/></linearGradient></defs><defs><linearGradient id="line3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#49A1FF;stop-opacity:1"/><stop offset="100%" style="stop-color:#3686FF;stop-opacity:1"/></linearGradient></defs><path v-if="topLinePath" :d="topLinePath" stroke="transparent" fill="url(#line3)"><animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedTop}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" /></path><path v-if="centerLinePath" :d="centerLinePath" stroke="transparent" fill="url(#line2)"><animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedCenter}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" /></path><path v-if="bottomLinePath" :d="bottomLinePath" stroke="transparent" fill="url(#line1)"><animateTransform attributeType="XML" attributeName="transform" begin="0s" :dur="`${speedBottom}s`" type="translate" from="0 0" :to="`${bulgeDistance*4} 0`" repeatCount="indefinite" /></path></svg></div></div>
</template>
<script>
export default {props:{width:{type:Number,      //图像宽度default:450},height:{type:Number,      //图像高度default:400},waterHeight:{type:Number,      //水面高度default:360},bulgeHeight:{type:Number,      //波浪起伏高度default:15},bulgeDistance:{type:Number,      //波浪起伏间隔default:30},lineDistance:{type:Number,      //三条线的距离default:20},speedTop:{type:Number,      //第一根线速度default:1},speedCenter:{type:Number,      //第一根线速度default:1},speedBottom:{type:Number,      //第一根线速度default:1},},data(){return{topLinePath:null,centerLinePath:null,bottomLinePath:null,}},mounted(){this.init()},methods:{init(){let num = Math.floor(this.width/this.bulgeDistance)let basicPoint = this.height - this.waterHeightlet basicPointCenter = this.height - this.waterHeight + this.lineDistancelet basicPointBottom = this.height - this.waterHeight + this.lineDistance*2let topLinePath = `M ${-4*this.bulgeDistance} ${basicPoint} Q ${-3*this.bulgeDistance} ${basicPoint - this.bulgeHeight} ${-2*this.bulgeDistance} ${basicPoint} T 0 ${basicPoint}`for(var i=1;i<num;i++){topLinePath += ` T ${this.bulgeDistance*i*2} ${basicPoint} `}topLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`let centerLinePath = `M ${-5*this.bulgeDistance} ${basicPointCenter} Q ${-4*this.bulgeDistance} ${basicPointCenter - this.bulgeHeight} ${-3*this.bulgeDistance} ${basicPointCenter} T ${-this.bulgeDistance} ${basicPointCenter}`for(var i=1;i<num;i++){centerLinePath += ` T ${-this.bulgeDistance + this.bulgeDistance*i*2} ${basicPointCenter} `}centerLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`let bottomLinePath = `M ${-4*this.bulgeDistance} ${basicPointBottom} Q ${-3*this.bulgeDistance} ${basicPointBottom - this.bulgeHeight} ${-2*this.bulgeDistance} ${basicPointBottom} T 0 ${basicPointBottom}`for(var i=1;i<num;i++){bottomLinePath += ` T ${this.bulgeDistance*i*2} ${basicPointBottom} `}bottomLinePath += `v ${this.height} h -${3*num*this.bulgeDistance} z`this.topLinePath = topLinePaththis.centerLinePath = centerLinePaththis.bottomLinePath = bottomLinePath}},watch:{waterHeight(){this.init()}}
}
</script>
<style lang="scss">
// .wave-svg{
//   width: 100%;
//   height: 100%;
// }
</style>

vue + svg 绘制水波纹、波浪动画效果相关推荐

【前端】CSS3、Canvas、SVG等5种方式实现水波纹波浪动画特效
目录一.CSS3动画+图片波浪效果 1. 效果图 2. 代码 3. 原理二.纯CSS3圆盘波浪进度效果三.纯CSS3涟漪效果四.Canvas波浪效果五.SVG+jQuery波浪效果六.源码 ...
css —— 按钮水波纹扩散动画效果实现
一. 效果二. 代码 <div class="feature"><div class="feature-box">&l ...
vue+ svg实现水波纹
 <template><svgversion="1.1"id=" ...
SVG滤镜波浪动画效果
今天给大家分享一个用SVG实现的滤镜波浪动画效果,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&quo ...
SVG网页波浪动画效果背景
给大家分享一个SVG网页波浪动画效果背景 CSS部分 <style> .body { min-height: 100vh; display: -webkit-box; display: f ...
android动画水波纹外扩,Android实现水波纹外扩效果的实例代码
微信曾经推出了一个查找附近好友的功能,大致功能是这样的:屏幕上有一个按钮,长按按钮的时候,会有一圈圈水波纹的动画向外扩散,松手后,动画结束. 现在简单来实现这样的一个动画功能: 思路: 主要用到了下面 ...
android自定义控件几种,Android 自定义View一个控件搞定多种水波纹涟漪扩散效果 - CSDN博客...
效果图实现思路这个效果实现起来并不难,重要的是思路此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化根据上面的样式,可以看出此View需要满足以下变化圆圈从中心可循环向外扩散 ...
android l 效果,[原]Android L中水波纹点击效果的实现
博主参加了2014 CSDN博客之星评选,帮我投一票吧. 前言前段时间android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大家对view的 ...
android曲线水波纹录音动画,Android-贝塞尔曲线实现水波纹动画
Android 系统api提供了quadTo和rQuadTo实现二阶贝塞尔曲线,三阶贝塞尔曲线在这不做阐述,只不过是两个控制点. 效果图首先看张二阶贝赛尔的曲线 Path path = new Pa ...

vue + svg 绘制水波纹、波浪动画效果

vue + svg 绘制水波纹、波浪动画效果相关推荐

最新文章

热门文章