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"});
其余的我们会在后面一一讲到。