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

2019年8月31日 209次阅读 来源: janily

在我网站svgtrick开一个新系列，主如果运用GreenSock来编写和完成动画结果，经由过程现实的结果来熟习GreenSock的各个要领和技能。

关于GreenSock的基本知识，能够看看我整顿的GreenSock简明教程。

这个结果也是在codepen上看到的，拿来剖析下完成思绪，趁便熟习下GreenSock的一些API的运用要领。

先来看看要完成的结果：

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

这个结果中这个图形是运用SVG来完成的，代码有点多，细致代码就不贴了，贴个也许的的构造：

<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" class="undefined">
    ......
    </svg>
</div>

加上一点点款式：

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倍速度。

    原文作者：janily
    原文地址: https://segmentfault.com/a/1190000008496247
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞