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

1,393 阅读3分钟
原文链接: svgtrick.com

开一个新系列,主要是使用GreenSock来编写和实现动画效果。

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

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

先来看看要实现的效果:

这个效果中这个图形是使用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倍速度。


本文对你有帮助?欢迎扫码加入前端学习小组微信群: