龙喵专栏 /前端 /内容

TweenMax.js 专业动画插件

版权声明:龙喵网
网站网址:http://ailongmiao.com/

TweenMax.js 简介

TweenMax.js

TweenMax.js是动画插件库GSAP(GreenSock Animation Platform)的核心文件,加载后即可使用四个主要核心类TweenLite、TweenMax、TimelineLite、TimelineMax和一些其他辅助动画插件。可对一个或多个物件进行动画,或添加至时间轴中设计复杂的影片。

GSAP最初在flash时代(2004-2006)是作为flash软件的插件用来增添动画效果,当时的名字是「GreenSock Tweening Platform」(GreenSock补间平台)。后来Flash逐渐没落,在网页上的应用,除了游戏和视频播放之外不断减少。

出于自身发展考虑,GreenSock在v12(第十二版)中,加入了JavaScript的Class,也就是说我们可以在HTML网页中使用TweenLite或TweenMax…等来制作动画,也借此版本把发展计划的名称更名为「GreenSock Animation Platform」(GreenSock动画平台,GSAP),主要是把「Tweening」换成「Animation 」,因为前者主要为Flash在使用的名词,而后者就属于比较广义的「动画」,后来逐步发展为全平台均可应用的动画库。

最新的v2.x版本则全面支持HTML5和CSS3动画,并适应于主流的浏览器。

在网页上GreenSock目前提供使用的有「TweenLite」、「TweenMax」、「TimelineLite」、「TimelineMax」这四个项目,虽比Flash来的少,不过也是最常用的几项,相信可以帮助设计师们在不使用Flash的情形之下,制作许多不同凡响的动画效果,另外关于这四项的差别也跟Flash版本一样

TweenMax.js的优势在于性能强劲和功能强大。

TweenMax 官网

中文:TweenMax

英文:GreenSock

TweenMax 使用方法

1:载入TweenMax.js插件

首先下载TweenMax文件包(greensock-js),找到TweenMax.min.js压缩文件。
文件位置: greensock-js/src/minified/TweenMax.min.js 
或者使用TweenMax 的CDN。

下载TweenMax 
TweenMax CDN

在页面中载入TweenMax.min.js文件

<script src="js/TweenMax.min.js"> </script>

由于TweenMax.min.js集合了所有功能,所以引入TweenMax.js这一个文件即可使用TweenMax的所有功能。
如果要争取更小的库文件大小,可以使用TweenLite.js(8K)并自由组合其他插件

<!-- 只能用TweenLite -->
<script src="js/TweenLite.min.js"> </script>
<script src="js/plugins/CSSPlugin.min.js"> </script>
<script src="js/easing/EasePack.min.js"> </script>

2:准备好要执行TweenMax动画的元素

先创建需要进行TweenMax动画的元素

<div id="obj">box1</div>

TweenMax不仅仅可以对html元素进行动画,还可以补间任何Javascript物件的任何数字属性

3:给该元素设置TweenMax动画

<script> 
  TweenMax.to("#obj", 0.5, {left:200});
</script>

TweenMax的第一个参数是你想进行动画的目标,第二是动画持续时间(默认是秒),最后是要被动画的一个或多个属性。

TweenMax动画

上面例子的作用是,为一个id为"obj"的元素设置动画,在0.5秒的过程中使其移动到left:200px位置处。
由于这是一个to()方法,所以不论开始时是多少,left属性都会变为200。

left和top属性动画需要position:reletive的支持且为固定值,因此有时候使用x或y代替(使用的是CSS3的translate属性动画)更为简便

TweenMax.to("#obj", 0.5, {x:200});//在原有位置向右移动200px

如果你想同时增加其宽度属性"width"为200时,可以这样做:

TweenMax.to("#obj", 0.5, {x:200, width:200});

更多API文章参考:

英文:https://greensock.com/tweenmax
中文:https://www.tweenmax.com.cn/api/tweenmax/

版权声明:龙喵网
网站网址:http://ailongmiao.com/

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/439.html

[ web前端导航 ]:http://ailongmiao.com/web/

相关阅读

    评论

    继续阅读

    无障碍 Web 开发

    无障碍 Web 开发

    Web前端 2019-06-04 5

    良好的 Web 可访问性,就是把你的网站建设成让尽可能多的人都觉得好用,可以让每一个人受益。语义化 HTML 也是确保 Web 良好访问性的

    禁止用户打开HTML页面调试

    Web前端 2019-05-18 5

    有时为了防止别人调试我们的HTML页面,盗取代码等行为,介绍一些能够阻止用户在浏览器中打开调试窗口的方法,这些方法只能一定程度的提

    细数CSS伪元素及其用法

    Web前端 2019-03-29 12

    CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

      选择打赏方式

    打赏

    打赏