到底什么是GSAP?
 
GreenSock动画平台是一套脚本动画工具。它包括:
TweenLite :处理几乎任何物件的任何属性的动画引擎核心。相对轻量级,但功能齐全,可以选择要使用的插件扩展(像是在浏览器中用于使DOM元素样式成为动画的CSSPlugin,或是滚动到页面上特定位置或div的ScrollToPlugin等)
TweenMax :TweenLite强大的大哥;可以完成Twe​​enLite做的每一件事,并附加非必要的功能,如repeat(重复),yoyo(溜溜球),repeatDelay(重复延迟)等。它也包括许多常见的插件,如CSSPlugin,这样您就不需自行载入多个文件。侧重于全功能的,而不是轻量级的。
TimelineLite :一个强大的,轻量级的序列工具,它就如一个存放补间动画的容器,可以很容易的整体控制补间动画,且精确管理补间动画彼此之间的时间关系。您甚至可以无层数限置的在其他timelines里面嵌套timelines。这使您可以很简单的模组化动画工作流。
TimelineMax :扩展TimelineLite,提供完全相同的功能再加上有用的(但非必需)功能,如repeat、repeatDelay、yoyo、currentLabel()等。同样就如TweenMax和TweenLite的关系,TimelineMax的目标是成为最终的全功能工具,而不是轻量级的。
其他像是缓动工具、插件、工具包如Draggable(可拖动)等。
 
CSS缺少独立的 scale/rotation/position 控制
 
对元素的尺寸,旋转以及位置设置动画是非常常见的。在 CSS 里,这些设置都被塞进了transform属性当中,这样就不能够真正地独立控制它们。例如,你该如何用不同的时间和缓动函数去分别控制元素的rotate和scale属性?可能这个元素会不停的震荡,并且你想去旋转它。这只有用 JavaScript 才能实现。
 
以下是小例子:
  1. <!doctype html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Document</title> 
  6. </head> 
  7. <style> 
  8. body { 
  9.   background-color:black; 
  10.   margin: 0; 
  11.   padding: 0; 
  12.   font-family: Signika Negative, sans-serif; 
  13.   font-weight: 300; 
  14. html, body { 
  15.   height: 100%; 
  16. #demo { 
  17.   display:table; 
  18.   width:100%; 
  19.   height:100%; 
  20. #bg { 
  21.   position:relative; 
  22.   display:table-cell; 
  23.   height: 100%; 
  24.   overflow:hidden; 
  25.   text-align: center; 
  26.   vertical-align: middle; 
  27. #bg p{ 
  28.   position: absolute; 
  29.   color: #777; 
  30.   top: 0px; 
  31.   padding: 0px 20px; 
  32.   text-align: left; 
  33.   z-index: -1000; 
  34. #box { 
  35.   color: black; 
  36.   font-size:24px; 
  37.   padding: 10px 16px; 
  38.   border: 2px solid black; 
  39.   background: #9af600; 
  40.   background:  -webkit-linear-gradient(top, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); 
  41.   display:inline-block; 
  42.   border-radius: 10px; 
  43.  
  44. #controls { 
  45.   position:absolute; 
  46.   color: #999; 
  47.   width: 100%; 
  48.   bottom: 20px; 
  49.   text-align: center; 
  50. button { 
  51.   margin: 2px; 
  52.   padding: 4px 6px; 
  53. </style> 
  54. <body> 
  55. <div id="demo"> 
  56.   <div id="bg"> 
  57.     <p>tweenlite,是webgame开发人员比较常用的一个缓动库。 
  58. 先简单介绍它的优点吧。 
  59. 1.高效,性能不会差。 
  60. 2.体积小,用到项目中,你的文件大小增加了3-4k。 
  61. 3.容易使用,常用的函数就那么几个</p> 
  62.     <div id="box">TweenMax.js 应用</div> 
  63.      
  64.     <div id="controls"> 
  65.       <button id="rotationX">X轴旋转</button> 
  66.       <button id="rotationY">Y轴旋转</button> 
  67.       <button id="rotation">转圈</button> 
  68.       <button id="wander">漫游</button> 
  69.     </div> 
  70.   </div> 
  71. </div> 
  72. </body> 
  73. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
  74. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script> 
  75. <script> 
  76.     var $box = $("#box"), 
  77.     $container = $("#bg"), 
  78.     rotation = 0
  79.     rotationX = 0,  
  80.     rotationY = 0
  81.     wanderTween, ignoreRollovers; 
  82.  
  83. //设置3D容器视角 
  84. TweenLite.set($container, {perspective: 500}); 
  85. //取消Z轴,使旋转更加有趣。 
  86. TweenLite.set($box, {transformOrigin:"center center -150px"}); 
  87. //使用scaleX和scaleY微微颤动起来 
  88. TweenMax.to($box, 1.2, {scaleX:0.8, scaleY:0.8, force3D:true, yoyo:true, repeat:-1, ease:Power1.easeInOut}); 
  89.  
  90. //翻转、旋转盒子但要避免过度旋转,我们会降低滚动在第一秒的动画。 
  91. $box.hover(function() { 
  92.   if (!ignoreRollovers) { 
  93.     rotation += 360; 
  94.     ignoreRollovers = true
  95.     TweenLite.to($box, 2, {rotation:rotation, ease:Elastic.easeOut}); 
  96.     TweenLite.delayedCall(1, function() { 
  97.       ignoreRollovers = false
  98.     }); 
  99.   } 
  100. }, function() {}); 
  101.  
  102. $("#rotation").click(function() { 
  103.   rotation += 360; 
  104.   TweenLite.to($box, 2, {rotation:rotation, ease:Elastic.easeOut}); 
  105. }); 
  106.  
  107. $("#rotationX").click(function() { 
  108.   rotationX += 360; 
  109.   TweenLite.to($box, 2, {rotationX:rotationX, ease:Power2.easeOut}); 
  110. }); 
  111.  
  112. $("#rotationY").click(function() { 
  113.   rotationY += 360; 
  114.   TweenLite.to($box, 2, {rotationY:rotationY, ease:Power1.easeInOut}); 
  115. }); 
  116.  
  117. $("#wander").click(function() { 
  118.   if (wanderTween) { 
  119.     wanderTween.kill(); 
  120.     wanderTween = null
  121.     TweenLite.to($box, 0.5, {x:0, y:0}); 
  122.   } else { 
  123.     wander(); 
  124.   } 
  125. }); 
  126.  
  127. //随机选择一个在屏幕上和动画,然后做一遍,又一遍。 
  128. function wander() { 
  129.   var x = (($container.width() - $box.width()) / 2) * (Math.random() * 1.8 - 0.9), 
  130.       y = (($container.height() - $box.height()) / 2) * (Math.random() * 1.4 - 0.7); 
  131.   wanderTween = TweenLite.to($box, 2.5, {x:x, y:y, ease:Power1.easeInOut, onComplete:wander}); 
  132. </script> 
  133. </html> 

这里是相关网站,大家可以学习一下:http://greensock.com/tweenlite
明天给大家介绍下他的用法。


返回顶部