SVG动画

Transform（scale、rotate、translate 、skew）
路径动画（path）
描边动画（stroke）
形状变化（Morphing)
蒙版动画（Mask）
颜色控制（color / background-color / opacity)

使用GSAP制作动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg width="960px" height="900px" viewBox="0 0 960 900"><g id="shape-page"><circle r="80" cx="120" cy="120" fill="#60CCFD" id="circle"/></g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script>function moveTo(){var gsap1=gsap.to('#circle', {x: 320,y: 0,duration: 2})}moveTo()
</script>
</body>
</html>

缓动动画

GSAP内置缓动动画，默认ease的值为power1.out,让 circle 像球一样弹起运动。只需设定属性 ease: 'bounce'

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg width="960px" height="900px" viewBox="0 0 960 900"><g id="shape-page"><circle r="80" cx="120" cy="120" fill="#60CCFD" id="circle"/></g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script>function moveTo(){var gsap1=gsap.to('#circle', {x: 320,y: 0,duration: 2,ease: 'bounce'})}moveTo()
</script>
</body>
</html>

时间轴线

gsap.timeline()
拥有操纵时间轴线的能力，会让动画有序进行

<svg width="960px" height="900px" viewBox="0 0 960 900">
<!--    组合小球动画--><g id="shape2-page"><circle id="circle1" r="40" cx="40" cy="100" fill="#60CCFD" /><circle id="circle2" r="40" cx="150" cy="100" fill="pink" /><circle id="circle3" r="40" cx="260" cy="100" fill="greenyellow" /><circle id="circle4" r="40" cx="370" cy="100" fill="red" /></g>
</svg>
<script>
function move2(){var gsap1=gsap.timeline({repeat: -1,repeatDelay: 0.3,defaults:{duration: 0.66,}})gsap1.to("#circle1",{x:500}).to("#circle2",{x:500}).to("#circle3",{x:500}).to("#circle4",{x:500})}move2()
</script>

下面例子时间轴动画时长为 duration: 0.66 ，下面让第 2、3、4 个 circle 使用相对时间，减去动画时长，那么制造了多个 circle 一同运动的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500"><g id="shape2-page"><circle id="circle1" r="40" cx="40" cy="100" fill="#60CCFD" /><circle id="circle2" r="40" cx="150" cy="100" fill="pink" /><circle id="circle3" r="40" cx="260" cy="100" fill="greenyellow" /><circle id="circle4" r="40" cx="370" cy="100" fill="red" /></g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script>function moveTo(){var tl=gsap.timeline({repeat: -1,repeatDelay: 1,defaults:{duration: 0.66}})tl.to("#circle1",{x:500},"-=0.66")   //减去相对时间.to("#circle2",{x:500},"-=0.66").to("#circle3",{x:500},"-=0.66").to("#circle4",{x:500},"-=0.66")}moveTo()
</script>
</body>
</html>

升级版：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg width="1500px" height="900px" viewBox="0 0 1500 900" ><g id="shape-page" width="1000px"><circle id="circle1" cx="50" cy="200" r="40" style="fill: orange" /><circle id="circle2" cx="150" cy="200" r="40" style="fill: orangered" /><circle id="circle3" cx="250" cy="200" r="40" style="fill: orange" /><circle id="circle4" cx="350" cy="200" r="40" style="fill: orangered" /><circle id="circle5" cx="450" cy="200" r="40" style="fill: orange" /><circle id="circle6" cx="550" cy="200" r="40" style="fill: orangered" /><circle id="circle7" cx="650" cy="200" r="40" style="fill: orange" /><circle id="circle8" cx="750" cy="200" r="40" style="fill: orangered" /><circle id="circle9" cx="850" cy="200" r="40" style="fill: orange" /><circle id="circle10" cx="950" cy="200" r="40" style="fill: orangered" /></g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script>function moveTo(){var tl=gsap.timeline({repeat: -1,repeatDelay: 0.05,defaults:{duration: 0.2,}})tl.to("#circle1",{y:-100,}).to("#circle2",{y:-100}).to("#circle3",{y:-100}).to("#circle4",{y:-100}).to("#circle5",{y:-100}).to("#circle6",{y:-100}).to("#circle7",{y:-100}).to("#circle8",{y:-100}).to("#circle9",{y:-100}).to("#circle10",{y:100}).to("#circle9",{y:100}).to("#circle8",{y:100}).to("#circle7",{y:100}).to("#circle6",{y:100}).to("#circle5",{y:100}).to("#circle4",{y:100}).to("#circle3",{y:100}).to("#circle2",{y:100}).to("#circle1",{y:100}).to("#circle1",{y:100},"-=0.2").to("#circle2",{y:100},"-=0.2").to("#circle3",{y:100},"-=0.2").to("#circle4",{y:100},"-=0.2").to("#circle5",{y:100},"-=0.2").to("#circle6",{y:100},"-=0.2").to("#circle7",{y:100},"-=0.2").to("#circle8",{y:100},"-=0.2").to("#circle9",{y:100},"-=0.2").to("#circle10",{y:100},"-=0.05").to("#circle1",{y:-100}).to("#circle3",{y:-100}).to("#circle5",{y:-100}).to("#circle7",{y:-100}).to("#circle9",{y:-100})}moveTo()
</script>
</body>
</html>

时间交错

gsap.to 提供了一个用于控制时间交错的属性：stagger ，这个属性同样是对动画时间的控制，比如让多个 circle 同时以 0.2s 的时间错开进行Y轴位移运动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500"><g id="shape2-page"><circle id="circle" r="40" cx="50" cy="200" fill="#60CCFD" /><circle id="circle" r="40" cx="150" cy="200" fill="#FFB966" /><circle id="circle" r="40" cx="250" cy="200" fill="#92CF94" /><circle id="circle" r="40" cx="350" cy="200" fill="#F089AF" /><circle id="circle" r="40" cx="450" cy="200" fill="#92CFCF" /><circle id="circle" r="40" cx="550" cy="200" fill="orange" /><circle id="circle" r="40" cx="650" cy="200" fill="#F089FF" /><circle id="circle" r="40" cx="750" cy="200" fill="#F025AF" /><circle id="circle" r="40" cx="850" cy="200" fill="#0089AF" /></g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script>var tl=gsap.to("circle",{repeat: -1,delay: 0.5,y:function(i,elem,boxes){return i%2==0?-50:50;},stagger: 0.2,duration:1,yoyo: true})
</script>
</body>
</html>

SVG—初识3之SVG动画（缓动动画、时间轴线、时间交错）相关推荐

背水一战 Windows 10 (15) - 动画: 缓动动画
背水一战 Windows 10 (15) - 动画: 缓动动画原文:背水一战 Windows 10 (15) - 动画: 缓动动画 [源码下载] 背水一战 Windows 10 (15) - 动画: ...
匀速动画VS缓动动画（超详细）
文章目录匀速动画匀速动画案例描述匀速动画案例图示 HTML+CSS 匀速动画JS代码匀速动画JS代码改进----函数封装缓动动画缓动动画案例描述缓动动画案例图示 HTML+CSS 缓动动 ...
js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
缓动动画_核心动画概念：缓入缓出
缓动动画 With the arrival of CSS transitions, animation is now completely at home on web pages. In anima ...
用缓动动画实现鼠标跟随
鼠标跟随是为了更好的用户体验而存在,鼠标移动到某个元素的位置,一张代表鼠标的图也移到当前元素的位置,用户能更好的看到自己的鼠标位置,也能用这个做普通特效.当鼠标移动到某个位置,那张图也移动到某个位置, ...
JavaScript 音乐导航(缓动动画、会唱歌的导航)
效果展示鼠标在导航栏上移动,每一项发出一种音符(do re mi fa so la xi),同样键盘上的1-7数字也可以有同样的效果. 资源下载音乐导航(缓动动画.会唱歌的导航) 代码 index ...
11、《每周一点canvas动画》——缓动动画
本系列文章代码文件前面的章节我们介绍了许多基本的动画,在本节我们将使用这些基本的动画来创建一些高级动画.今天我们介绍的第一个高级动画叫做缓动动画(ease),也许在写css动画的时候已经接触过 ea ...
canvas系列教程07 ——捕获、拖拽、抛掷、缓动动画、弹性动画
捕获物体多边形以及不规则图形的捕获非常复杂,采用的方法是分离轴定理(SAT)和最小平移向量(MTV).这里不展开介绍,有兴趣的小伙伴可以自行搜索了解一下.下面来介绍一下矩形和圆的捕获. 矩形的捕获 ...
Egret_Tween缓动动画
通常情况下,游戏中或多或少都会带有一些缓动动画.例如界面弹出,或者道具飞入飞出的特效等等.在制作这些缓动动画的时候我们仅仅希望简单的办法实现这种移动或者变形缩放的效果.Egret中的 Tween 缓 ...

SVG—初识3之SVG动画（缓动动画、时间轴线、时间交错）

SVG—初识3