2.开始之前

首先我们需要搞定环境,之后一切都在该环境下实践。

首先是把引擎配置好,你可以在引用cdn也可以自己下载到本地。

建议直接去下载。

这是github地址

这是cdn地址

<!--CDN link for the latest TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack-->
<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>

基本用法,只是最粗略的

var photo = document.getElementById("photo"); //or use jQuery's $("#photo")
TweenLite.to(photo, 1.5, {width:100});
TweenLite.to(photo, 1.5, {width:100, height:200});

配合jquery

//tween the element with ID of "myID"
TweenLite.to("#myID", 2, {backgroundColor:"#ff0000", width:"50%", top:"100px", ease:Power2.easeInOut});

//or if jQuery is loaded, you can do more advanced selecting like all the elements with the class "myClass" like this:
TweenLite.to(".myClass", 2, {boxShadow:"0px 0px 20px red", color:"#FC0"});

其余的我们会在后面一一讲到。