GSAP动画效果一

GSAP是第三方动画引擎类库，用GSAP来制作一些动画。
先插入一个飞机照片：

<img src="shuttle.png" id="shuttle">

对其与页面先进行设置：飞机图片定位到下边中间。

	html, body{
	    height: 100%;
	}
	body{
	    background: #363434b6;
	    margin: 0%;
	    padding: 0%;
	    position: relative;
	}
	img{
	    position: absolute;
	    left: 50%;
	    bottom: 10px;
	    margin-left: -50px;
	    margin-top: -77px;
	}

---

然后，引入TweenMax类库，为飞机设置动画：
飞机首先延迟 1 秒（delay：1），在接下来的1秒时间内，以Back.easeOut这一弹性速率曲线（ease:Back.easeOut）移动到距离屏幕左侧250像素（left:250px），垂直居中（top:‘50%’）的位置，并且旋转90度（rotation:90）。动画结束时，将调用completeHandler函数（onComplete:completeHandler），该函数在接下来的2秒内，使飞机移动到屏幕最右侧（left:‘100%’），并且大小缩小为20%（scale: 0.2），透明度变为完全透明（opacity:0），速度曲线为先回弹再向右运动（ease:Back.easeIn）.。

     <script src="js/TweenMax.min.js"></script>
      <script type="text/javascript">
          TweenMax.to(shuttle, 1, {top:'50%', left:250, rotation:90,
          delay:1, ease:Back.easeOut, onComplete:completeHandler});
          function completeHandler(e){
              TweenMax.to(shuttle, 2, {left:'100%', scale: 0.2, opacity:0, ease:Back.easeIn});
          }
      </script>

• TweenMax.to（）：执行一条动画语句。TweenMax的第一个参数是你想进行动画的目标，第二是动画持续时间(默认是秒)，最后是要被动画的一个或多个属性。
  https://www.tweenmax.com.cn/api/tweenmax/TweenMax.to()
• onComplete：在动画结束时触发此回调函数。
  https://www.tweenmax.com.cn/api/tweenmax/onComplete
• ease：过度效果的速率曲线。
  https://www.tweenmax.com.cn/api/tweenmax/ease

效果如下：