svg动画 - 波浪动画
波浪
<path d="M 96.1271 806.2501
C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685
C 529.8998 755.7685 529.9529 827.65 673.0447 827.65
C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097
C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858
C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074
C 1676.3448 696.5074 1826.88 745.8917 1826.88 745.8917
L 1826.88 1283.07
L 96.1271 1283.07Z" stroke="blue" stroke-width="3" stroke-opacity="0.3" fill="blue" fill-opacity="0.2"/>
path c 的用法
C x1 y1, x2 y2, x y
c dx1 dy1, dx2 dy2, dx dy
(x,y)表示的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。
曲线数据分析
控制点的y值的大小决定了波峰是由高到低还是由低到高
第一条曲线起点低(806.2501)，结点高(755.7685)，就是一条向上的曲线（svg使用的是坐标系的第四象限，y值越大，越往下）
对应这一部分
第二条曲线起点高(755.7685)，结点低(827.65)，就是一条向下的曲线
对应这一部分
把所有的y值对应前移一个位置，可以得到波峰相反的曲线
见下图绿色曲线
<g xmlns="http://www.w3.org/2000/svg" transform="translate(0 -350)">
<path d="M 96.1271 806.2501 C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685 C 529.8998 755.7685 529.9529 827.65 673.0447 827.65 C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097 C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858 C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074 C 1676.3448 696.5074 1826.88 755.7685 1826.88 755.7685 L 1826.88 1283.07 L 96.1271 1283.07Z" stroke="blue" stroke-width="3" stroke-opacity="0.3" fill="blue" fill-opacity="0.2">
</path>
<path d="M 96.1271 755.7685 C 96.1271 755.7685 241.441 827.65 384.5859 827.65 C 529.8998 827.65 529.9529 738.2097 673.0447 738.2097 C 818.4117 738.2097 817.7127 833.6858 961.5035 833.6858 C 1106.1715 833.6858 1109.3353 696.5074 1249.9624 696.5074 C 1397.7941 696.5074 1387.886 745.8917 1538.4211 745.8917 C 1676.3448 745.8917 1826.88 806.2501 1826.88 806.2501 L 1826.88 1283.07 L 96.1271 1283.07Z" stroke="green" stroke-width="3" stroke-opacity="0.3" fill="green" fill-opacity="0.2">
</path>
</g>
制作无线循环动画
为了让两个波形可以首尾相连，把第一个曲线的最后一个y值，改为第二个曲线的第一个y值
移动第二条曲线到第一条曲线的结尾处
<g xmlns="http://www.w3.org/2000/svg" transform="translate(0 -350)">
<path d="M 96.1271 806.2501 C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685 C 529.8998 755.7685 529.9529 827.65 673.0447 827.65 C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097 C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858 C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074 C 1676.3448 696.5074 1826.88 755.7685 1826.88 755.7685 L 1826.88 1283.07 L 96.1271 1283.07Z" stroke="blue" stroke-width="3" stroke-opacity="0.3" fill="blue" fill-opacity="0.2">
</path>
<path d="M 96.1271 755.7685 C 96.1271 755.7685 241.441 827.65 384.5859 827.65 C 529.8998 827.65 529.9529 738.2097 673.0447 738.2097 C 818.4117 738.2097 817.7127 833.6858 961.5035 833.6858 C 1106.1715 833.6858 1109.3353 696.5074 1249.9624 696.5074 C 1397.7941 696.5074 1387.886 745.8917 1538.4211 745.8917 C 1676.3448 745.8917 1826.88 806.2501 1826.88 806.2501 L 1826.88 1283.07 L 96.1271 1283.07Z" stroke="green" stroke-width="3" stroke-opacity="0.3" fill="green" fill-opacity="0.2" transform="translate(1730.75 0)">
</path>
</g>
利用三条曲线加上动画，可以制作无线循环的动画
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="1903" height="931" style="position:absolute;left:0;top:0;user-select:none">
<g transform="translate(0 -350)">
<path d="M 96.1271 806.2501 C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685 C 529.8998 755.7685 529.9529 827.65 673.0447 827.65 C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097 C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858 C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074 C 1676.3448 696.5074 1826.88 755.7685 1826.88 755.7685 L 1826.88 1283.07 L 96.1271 1283.07Z" stroke="blue" stroke-width="3" stroke-opacity="0.3" fill="blue" fill-opacity="0.2">
<animateTransform attributeName="transform" begin="0s" dur="3s" type="translate" values="0 0; 1730.75 0; 3461.5 0" repeatCount="indefinite"/>
</path>
<path d="M 96.1271 755.7685 C 96.1271 755.7685 241.441 827.65 384.5859 827.65 C 529.8998 827.65 529.9529 738.2097 673.0447 738.2097 C 818.4117 738.2097 817.7127 833.6858 961.5035 833.6858 C 1106.1715 833.6858 1109.3353 696.5074 1249.9624 696.5074 C 1397.7941 696.5074 1387.886 745.8917 1538.4211 745.8917 C 1676.3448 745.8917 1826.88 806.2501 1826.88 806.2501 L 1826.88 1283.07 L 96.1271 1283.07Z" stroke="green" stroke-width="3" stroke-opacity="0.3" fill="green" fill-opacity="0.2">
<animateTransform attributeName="transform" begin="0s" dur="3s" type="translate" values="-1730.75 0; 0 0; 1730.75 0" repeatCount="indefinite"/>
</path>
<path d="M 96.1271 806.2501 C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685 C 529.8998 755.7685 529.9529 827.65 673.0447 827.65 C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097 C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858 C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074 C 1676.3448 696.5074 1826.88 755.7685 1826.88 755.7685 L 1826.88 1283.07 L 96.1271 1283.07Z" stroke="blue" stroke-width="3" stroke-opacity="0.3" fill="blue" fill-opacity="0.2">
<animateTransform attributeName="transform" begin="0s" dur="3s" type="translate" values="-3461.5 0; -1730.75 0; 0 0" repeatCount="indefinite"/>
</path>
</g>
</svg>
波浪动画
用两条曲线的路径值，不断切换，可以制作波浪形变的动画
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="1903" height="931" style="position:absolute;left:0;top:0;user-select:none">
<g clip-path="url(#rectClip)">
<g transform="translate(0 -350)" >
<path fill="url(#zr0-g1)" fill-opacity="0.8">
<animate attributeName="d" dur="3s" repeatCount="indefinite" values="M 96.1271 806.2501
C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685
C 529.8998 755.7685 529.9529 827.65 673.0447 827.65
C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097
C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858
C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074
C 1676.3448 696.5074 1826.88 745.8917 1826.88 745.8917
L 1826.88 1283.07
L 96.1271 1283.07Z; M 96.1271 755.7685
C 96.1271 755.7685 241.441 827.65 384.5859 827.65
C 529.8998 827.65 529.9529 755.7685 673.0447 755.7685
C 818.4117 755.7685 817.7127 827.65 961.5035 827.65
C 1106.1715 827.65 1109.3353 738.2097 1249.9624 738.2097
C 1397.7941 738.2097 1387.886 833.6858 1538.4211 833.6858
C 1676.3448 833.6858 1826.88 696.5074 1826.88 696.5074
L 1826.88 1283.07
L 96.1271 1283.07Z; M 96.1271 806.2501
C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685
C 529.8998 755.7685 529.9529 827.65 673.0447 827.65
C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097
C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858
C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074
C 1676.3448 696.5074 1826.88 745.8917 1826.88 745.8917
L 1826.88 1283.07
L 96.1271 1283.07Z"></animate>
<animateTransform attributeName="transform" begin="0s" dur="3s" type="translate"
values="-100 0; 100 0; -100 0" repeatCount="indefinite" />
</path>
</g>
</g> <circle cx="700" cy="500" r="400" stroke-width="5" stroke="green" fill="transparent" stroke-opacity="0.5" stroke-dasharray="5"/> <defs>
<clipPath id="rectClip">
<circle cx="700" cy="500" r="400" stroke-width="10" stroke="red" fill="transparent"></circle>
</clipPath>
<linearGradient gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1" id="zr0-g1">
<stop offset="0%" stop-color="rgb(0,221,255)"></stop>
<stop offset="100%" stop-color="rgb(77,119,255)"></stop>
</linearGradient>
</defs>
</svg>
svg动画 - 波浪动画的更多相关文章
- SVG波浪动画
今天来试试用svg+css3制作波浪动画 下图是我制作出的效果 还不错吧 在制作波浪前,首先我们要画波浪啊,至于画波浪,如果你想直接通过计算贝塞尔曲线绘制出波浪... 好吧,那我也不拦着你 我就直接用 ...
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- Android 自定义波浪动画 --"让进度浪起来~"
原文链接:http://www.jianshu.com/p/0e25a10cb9f5 一款效果不错的动画,实现也挺简单的,推荐阅读学习~ -- 由 傻小孩b 分享 waveview <Andro ...
- SVG的路径动画效果
使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...
- 超级强大的SVG SMIL animation动画详解
本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...
- iOS CAShapeLayer、CADisplayLink 实现波浪动画效果
iOS CAShapeLayer.CADisplayLink 实现波浪动画效果 效果图 代码已上传 GitHub:https://github.com/Silence-GitHub/CoreAnima ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...
- svg路径蒙版动画
svg路径蒙版动画,是比较实用的一种动画效果,能够绘制如下图所示的动画. 接下来细说这样的动画是如何做成的: 1.准备工作 2.SVG路径动画 3.SVG路径蒙版动画 4.复杂图形的编辑技巧 1.准备 ...
- css3 svg路径蒙版动画
css3 svg路径蒙版动画 具体看https://www.cnblogs.com/oubenruing/p/9568954.html 还有个更好控制的写法<pre><!DOCTYP ...
- svg描边路径动画
svg描边路径动画<pre><!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
随机推荐
- vue-admin-template包下载地址
https://gitee.com/panjiachen/vue-admin-template/ https://github.com/PanJiaChen/vue-admin-template
- LVDS_33 support
在HR bank/HD bank中,支持LVDS的bank使用VCCO 3.3v供电,仅仅需要对端给过来的信号,满足标准的LVDS差模电压/共模电压的标准即可.如下截图: 限制: 仅能作为input ...
- ICML 2017-Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks
Key Gradient Descent+TRPO+policy Gradient 训练模型的初始参数,模型在新任务上只需参数通过一个或多个用新任务的少量数据计算的梯度步骤更新后,就可以最大的性能.而 ...
- 【使用git之旅】
前言 在学习各种语言的时候我总喜欢把例子改成有自己想法并且有趣的程序, 但是时间一长,我发现在本地管理很麻烦,于是乎想到了github和gitee, 然后昨晚一时兴起,就开始了学习,开个博客记录一下我 ...
- AcWing 3956. 截断数组
给定一个长度为 n 的数组 a1,a2,-,an. 现在,要将该数组从中间截断,得到三个非空子数组. 要求,三个子数组内各元素之和都相等. 请问,共有多少种不同的截断方法? 输入格式 第一行包含整数 ...
- Could not resolve com.android.tools.lint:lint-kotlin:26.2.0.
好久没有使用weexplus publish android 打包apk, 今一运行失败了,提示Could not resolve com.android.tools.lint:lint-kotlin ...
- Singleton 单例模式简介与 C# 示例【创建型】【设计模式来了】
〇.简介 1.什么是单例模式? 一句话解释: 单一的类,只能自己来创建唯一的一个对象. 单例模式(Singleton Pattern)是日常开发中最简单的设计模式之一.这种类型的设计模式属于创建型 ...
- .NET Core 程序实现 Windows 系统 Development、Staging、Production 三种环境的无感部署
〇.前言 日常开发中,程序的环境切换是相当频繁的了,如果不同环境中的某些参数不同,那就需要每次编辑之前手动进行修改,比较麻烦,效率低下. 本文将以 .NET Core WebAPI 项目的配置方法为例 ...
- 【Ubuntu22.04】配置静态IP地址和FTP服务
## 一.配置静态IP 1. 使用命令`ip a`查看当前网卡名称,Ubuntu22.04默认网卡为ens33: ![](https://img2023.cnblogs.com/blog/308121 ...
- 【Rust-book】第五章 使用结构体来组织相关联的数据
第五章 使用结构体来组织相关联的数据 结构,或者结构体,是一种自定义数据类型,它允许我们命名多个相关的值并将它们组成一个有机的结合体. 可以把结构体视作对象中的数据属性 1 对比元组和结构体之间的异同 ...