摘要:在上面的代码中设置为,表示以倍的速度来运行这个动画效果。当然在动画效果中,运动曲线是必不可少的,提供了丰富的运动曲线来设置动画的运动效果。整个动画效果就完成了,通过这个简简单单的效果,可以发现使用来编写动画效果是多么的方便简单。
在我网站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倍速度。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81775.html
摘要:超过的,是一个动画库,可以处理属性,单个转换,或任何属性以及对象。在,是一个快速的动画引擎,具有与的相同的。在,这个功能和反应动画库只重。由和其他人使用,这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时,我发现很多recommended的动画库一段时间都没有维护。 经过一些研究,我收集了11个最好的库,在你的应用程序中使用。我还添加了一些,主要是非维...
摘要:超过的,是一个动画库,可以处理属性,单个转换,或任何属性以及对象。在,是一个快速的动画引擎,具有与的相同的。在,这个功能和反应动画库只重。由和其他人使用,这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时,我发现很多recommended的动画库一段时间都没有维护。 经过一些研究,我收集了11个最好的库,在你的应用程序中使用。我还添加了一些,主要是非维...
摘要:超过的,是一个动画库,可以处理属性,单个转换,或任何属性以及对象。在,是一个快速的动画引擎,具有与的相同的。在,这个功能和反应动画库只重。由和其他人使用,这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时,我发现很多recommended的动画库一段时间都没有维护。 经过一些研究,我收集了11个最好的库,在你的应用程序中使用。我还添加了一些,主要是非维...
阅读 1120·2021-11-24 10:43
阅读 3038·2021-11-22 09:34
阅读 3520·2021-10-08 10:04
阅读 3843·2021-09-23 11:58
阅读 3087·2019-08-30 15:44
阅读 440·2019-08-30 13:01
阅读 1131·2019-08-28 18:07
阅读 1402·2019-08-26 13:42