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

已于 2022-12-23 15:59:38 修改
阅读量1.4k 收藏 5
点赞数
分类专栏： SVG 文章标签： 动画 css3 svg
于 2022-09-20 10:39:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/126927599
版权

SVG—初识3

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>

请添加图片描述

VillanelleS
关注
专栏目录
SVG之旅：SVG线条动画实现原理
W3cplus
01-14 3640
对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中，我并没有什么要补充的
Android动画总结系列（6）——矢量图形与矢量动画
热门推荐
u013478336的专栏
08-22 1万+
本文总结了矢量图形和矢量动画的使用方法。
利用SVG和CSS3来实现一个炫酷的边框动画
01-19
演示 | 下载 今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。 首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。 请注意，我们将在SVG上使用CSS过渡，可能无法得到所有浏览器的支持。 乍眼一看可能不明白这个效果是怎么完成的。我们先仔细看看上面的边就会发现，白色的边的宽度不断从右边往左边延伸，而一条稍微延时的边紧跟
SVG动画详解：让你的图形动起来
最新发布
阿里渣渣java研发组-群主
08-28 1156
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，允许你通过代码定义图形。与位图不同，SVG可以无限缩放而不会失真，这使得它非常适合用于图标、插图和复杂的图形。SVG动画为Web开发者提供了一种强大且灵活的工具，可以用来制作高质量的动效，提升用户体验。在本文中，我们探讨了SVG动画的基本原理、实现方法以及实际应用场景。通过学习并掌握这些技巧，你可以为你的网页增添视觉亮点，使其在众多网站中脱颖而出。
svg 动画-线条path 动画工具
ringlot的博客
08-21 342
记录下 之前用到的svg path 动画工具，其只能对svg里面的path 元素做动画。
SVG动画
asdfg_asdsa的博客
07-18 302
SVG动画基础
【svg】svg动画
weixin_30477797的博客
07-31 425
如果你之前没有接触过svg，可以看下这个简略图：https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a 最近在看svg，发现svg和css animation结合起来，能够做一些很好玩儿的动画效果。 比如看这个： 其实这个怎么做的呢？我们继续往下看 我们知道stroke为描边，可...
使用CSS3实现SVG路径描边动画效果入门教程
12-14
在CSS3中，SVG（可缩放矢量图形）提供了丰富的样式和动画功能，使得创建动态、美观的图形成为可能。本教程将介绍如何利用CSS3实现SVG路径的描边动画效果，无需依赖JavaScript，完全使用CSS来完成。首先，我们要理解...
svg logo动画
01-31
svg logo动画 animation动画，按照logo路径绘制logo
svg-animation:SVG动画
05-18
svg动画 SVG动画 现场演示： :
svg-timeline：使用SVG创建时间线
02-05
svg-timeline：使用SVG创建时间线
SVG矢量动画
09-06
SVG矢量动画
一个实验性的SVG动画
08-11
一个实验性的SVG动画
CSS3 SVG波浪线条动画特效
07-24
在本主题中，我们将深入探讨“CSS3 SVG波浪线条动画特效”，这是一种利用CSS3和SVG实现的线条波浪滚动和弯曲动画效果。 首先，CSS3（Cascading Style Sheets Level 3）是样式表语言的最新版本，用于描述HTML或XML...
前端，可视化大屏，纯css3+svg动画实现流转动画
06-21
在这个项目中，我们看到开发者利用了纯CSS3和SVG技术来创建流转动画，为用户提供更直观、动态的数据展示效果。以下是关于这些知识点的详细说明： 1. **CSS3**: CSS3是层叠样式表的最新版本，它提供了许多新特性，如...
svg动画之动态描边效果
08-31
总结来说，SVG动态描边动画是一种利用SVG的描边属性和CSS3的过渡效果来创建视觉上吸引人的动画的技术。它在网页设计、用户界面和数据可视化等领域都有广泛应用，可以为用户带来更生动、更丰富的交互体验。通过理解和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值