深入浅出 GreenSock 动画：SVG Logo 动画

Bowman_han 发布于2019-08-20 14:36 / 1203人阅读

摘要：在上面的代码中设置为，表示以倍的速度来运行这个动画效果。当然在动画效果中，运动曲线是必不可少的，提供了丰富的运动曲线来设置动画的运动效果。整个动画效果就完成了，通过这个简简单单的效果，可以发现使用来编写动画效果是多么的方便简单。

在我网站svgtrick开一个新系列，主要是使用GreenSock来编写和实现动画效果，通过实际的效果来熟悉GreenSock的各个方法和技巧。

关于GreenSock的基础知识，可以看看我整理的GreenSock简明教程。

这个效果也是在codepen上看到的，拿来分析下实现思路，顺便熟悉下GreenSock的一些API的使用方法。

先来看看要实现的效果：

这个效果中这个图形是使用SVG来实现的，代码有点多，详细代码就不贴了，贴个大概的的结构：

加上一点点样式：

body{
  background-color:#fff;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container, svg{
  width:100%;
  height:100%;
}

svg{
  visibility:hidden;
}

在样式中，先把SVG的visibility的属性设置为hidden，这样就可以等GreenSock初始化设置完后，才显示SVG，在体验上会更好一点。

先来分析下效果：

1、首先是顺时针旋转

2、然后是缩小

3、最后放大

不停的循环这个动画效果。

先来初始化一些设置，从效果可以看出，logo是垂直水平居中。这里使用GreenSock来实现这个定位的：

var container = document.querySelector(".container");
var triangle = document.querySelector(".undefined");

TweenMax.set(container, {
  position:"absolute",
  top:"50%",
  left:"50%",
  xPercent:-50,
  yPercent:-50
})
TweenMax.set(triangle, {
  scale:0.25
})
TweenMax.set("svg", {
  visibility:"visible"
})

首先是把SVG和DIV节点存储在定义好的变量中。然后使用TweenMax的set方法来把logo定好位置，在SVG初始的状态中，它本身进行了一个缩放，缩放到原来的0.25倍。初始化完后，把SVG的visibility设置为visible，显示SVG。

接下来就是来编写动画效果：

var tl = new TimelineMax({repeat:-1, repeatDelay:1});
tl.timeScale(6);
tl.to(triangle, 8, {
  rotation:"+=360",
  ease:Power2.easeIn
})
.to(triangle, 3, {scale: 0.2, ease:Power2.easeOut})
.to(triangle, 3, {scale: 0.25, ease:Power2.easeIn})

首先声明一个TimelineMax的实例，从效果可以看出，这个动画效果是无限循环的，所以设置它的repeat属性的值为-1，并且循环的延迟时间为1秒即repeatDelay:1。

先来设置动画运行的速度，通过timeScale方法来设置。

timeScale方法是用来设置或读取时间轴的回放速率,比如0.5为一半速率，1为正常速度，2为2倍速度。在上面的代码中设置为6，表示以6倍的速度来运行这个动画效果。

设置好动画播放速度后，先来实现图形的旋转效果，通过TimelineMax.to方法来实现。

在GreenSock中可以通过rotation方法来实现旋转效果，动画效果是旋转360度，即可以通过rotation:"+=360"来实现这个效果。当然在动画效果中，运动曲线是必不可少的，GreenSock提供了丰富的运动曲线来设置动画的运动效果。在代码中简单的使用了最基础的运动曲线easeIn，效果跟CSS3中的easeIn差不多。更丰富的曲线可以去这个地址看看。

旋转之后，是在初始大小的状态下进行缩小，通过scale这个属性来实现。这里缩小的值是o.2，缩小之后，恢复的初始状态即scale:0.25。

整个动画效果就完成了，通过这个简简单单的效果，可以发现使用GreenSock来编写动画效果是多么的方便简单。

demo地址

总结下，这个效果的使用到几个重点的方法：

1、repeat : int：循环次数。设置为-1为无限循环。

2、repeatDelay : Number：循环延迟的时间。

3、timeScale:Number[读写] 用来设置或读取时间轴的回放速率,比如0.5为一半速率，1为正常速度，2为2倍速度。

服务器托管 GPU服务器 svg动画动画疯前端动画切换动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81775.html

SVG

摘要：目前只提供了一些基础功能。中与的区别开发者第一次接触手写那种，虽然很多情况都有设计师使用来完成这项工作，但还是不排除需要利用到的每个元素。轻量级，具备灵活的来自团队，全球非常出名的可视化团队。于是笔者尝试着把移植到中。使用SVG + CSS实现动态霓虹灯文字效果早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：刚开始以为是gif动画之类的，审查元素发现居然是用SVG + ...

104828720 2019-08-29 14:00 评论0 收藏0
2018年值得期待11个Javascript动画库

摘要：超过的，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。在，是一个快速的动画引擎，具有与的相同的。在，这个功能和反应动画库只重。由和其他人使用，这个库既流行又令人惊讶地有用。在浏览网页寻找一个整洁的Javascript动画库时，我发现很多recommended的动画库一段时间都没有维护。经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维...

call_me_R 2019-08-22 18:47 评论0 收藏0
2018年值得期待11个Javascript动画库

摘要：超过的，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。在，是一个快速的动画引擎，具有与的相同的。在，这个功能和反应动画库只重。由和其他人使用，这个库既流行又令人惊讶地有用。在浏览网页寻找一个整洁的Javascript动画库时，我发现很多recommended的动画库一段时间都没有维护。经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维...

teren 2019-08-02 10:56 评论0 收藏0
2018年值得期待11个Javascript动画库

摘要：超过的，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。在，是一个快速的动画引擎，具有与的相同的。在，这个功能和反应动画库只重。由和其他人使用，这个库既流行又令人惊讶地有用。在浏览网页寻找一个整洁的Javascript动画库时，我发现很多recommended的动画库一段时间都没有维护。经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维...

skinner 2019-08-30 15:54 评论0 收藏0