greensock GSAP强劲的动画引擎

约定不等于承诺〃 2022-08-27 14:46 116阅读 0赞

官方：http://www.greensock.com/gsap-js/  
以前做AS开发时就用greensock.的动画插件包，相当顺手，语法结构也好理解。  
如：  
TweenLite.to(target:Object, duration:Number, vars:Object);  
target为要操作的dom对象；  
duroation为整个动画的持续时间;  
vars为一个自属性集合对象，可以是一个属性如：\{left:"500px"\},或多个属性如：\{left:"500px",top:"200px",width:"200px"\}

target对象可以用jQuery的选择器选择出来的对象（例如：$("\#element"),$(".abd"),$("\#element p")等等）来代表，从而简化代码

使用：

导入包的比较常用组合有两种，CSSPlugin.min.js+EasePack.min.js+TweenLite.min.js 和TweenMax.min.js 这两种组合;

TweenMax是TweenLite的子类，它承 了TweenLite所有属性和方法，同时还包含了一些常用的插件（比如CSSPlugin）,所以当你导入TweenMax时就不需要导入 CSSPlugin啦。

注意：  
TweenMax包含TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin,和 DirectionalRotationPlugin所以可以单独使用  
   
TweenLite没有包含CSSPlugin插件（网页通过css来控制元素变化），所以不能单独使用，至少要和CSSPlugin一起用

你可以用：

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

或

example:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>index</title>
    	<style type="text/css">
    		body{margin: 0;padding: 0;}
    	</style>
    	
    </head>
    <body>
    	<div id="tw" style="width:100px;height:100px;background-color:#ce0000;display:block;"></div>
    </body>	
    	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script></span>
    	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
    	<script type="text/javascript">		
    		TweenLite.to("#tw", 2, {width:"200px", height:"150px",scale:2,delay:1});
    	</script>
    </html>