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" ...
随机推荐
- 2021-08-29：N * M的棋盘（N和M是输入参数），每种颜色的格子数必须相同的，上下左右的格子算相邻，相邻格子染的颜色必须不同，所有格子必须染色，返回至少多少种颜色可以完成任务。 福大大 答
2021-08-29:N * M的棋盘(N和M是输入参数),每种颜色的格子数必须相同的,上下左右的格子算相邻,相邻格子染的颜色必须不同,所有格子必须染色,返回至少多少种颜色可以完成任务. 福大大 答案 ...
- 【深入浅出 Yarn 架构与实现】6-4 Container 生命周期源码分析
本文将深入探讨 AM 向 RM 申请并获得 Container 资源后,在 NM 节点上如何启动和清理 Container.将详细分析整个过程的源码实现. 一.Container 生命周期介绍 Con ...
- c#构建具有用户认证与管理的socks5代理服务端
Socks 协议是一种代理 (Proxy) 协议, 例如我们所熟知的 Shdowsocks 便是 Socks 协议的一个典型应用程序, Socks 协议有多个版本, 目前最新的版本为 5, 其协议标准 ...
- Linux 创建 Python 虚拟环境
Linux 创建 Python 虚拟环境 0. 前言 网上教程太杂太乱,要么排版不好看,要么讲半天讲不到重点,故做此篇,精简干练. 1. 安装virtualenv 先用pip安装virtualenv第 ...
- ubuntu配置vscode全过程（下载安装配置优化插件）
一.安装vscode 下载vscode 当然啦,我们安装vscode,当然要先下载啦,但是但是但是!不要在ubuntu的软件中心(Ubuntu Software)下载!贼坑!下载完不能用! 推荐下载方 ...
- 献给转java的c#和java程序员的数据库orm框架
献给转java的c#和java程序员的数据库orm框架 一个好的程序员不应被语言所束缚,正如我现在开源java的orm框架一样,如果您是一位转java的c#程序员,那么这个框架可以带给你起码没有那么差 ...
- odoo开发教程十六：定时任务
一:定义定时器数据模型 模型中定义需要用到的字段.定时方法 from odoo import models, fields, api, exceptions import logging from d ...
- Python生成随机验证
Python生成随机验证码 Python生成随机验证码,需要使用PIL模块. 安装: 1 pip3 install pillow 基本使用 1. 创建图片 1 2 3 4 5 6 7 8 9 fr ...
- 单例bean与类加载过程
构造单例bean的方式有很多种,我们来看一下其中一种,饿汉式 public class Singleton1 implements Serializable { //1.构造函数私有 private ...
- iOS中容易用错的常用知识点
坐标系转换 ios中的坐标系有三种 视图坐标系:原点(0,0)视图的左上角 窗口坐标系:原点(0,0)窗口的左上角 世界坐标系:原点(0,0)游戏中世界的原点 平时开发中经常会遇到转UIWindow坐 ...