README.dm

商艳涛
1 parent 4302d700
Showing 3 changed files with 46 additions and 6 deletions
GSAP/README.md
GSAP/index.html
GSAP/style.css
+## GSAP\TimelineMax
+
+创建一个新的动画
+
+```
+var tl = new TimelineMax({
+    delay: 1, // 延迟几秒开始
+    repeat: 0, // 重复几次 -1: 无限循环
+    repeatDelay: 1, // 执行完整个时间轴一次之后，延迟几秒执行下一次
+    onUpdate: updateStats, // 当时间轴更新时候
+    onRepeat: updateReps, // 当重复的时候
+    onComplete: restart  // 完成之后
+});
+
+
+tl.form(element, duration, {optity: 0}).to(element, duration, {optity: 1})
+```
+
+### GSAP对应CSS属性
+CSS | GSAP
+----|----
+translateX() | x
+translateY() | Y
+translateZ() | z
+rotate() | rotation
+rotateY() | rotationY
+rotateX() | rotationX
+scaleX() | scaleX
+scaleY() | scaleY
+skewX() | skewX
+skewY() | skewY
+transform-origin() | transformOrigin
+optity |  opacity
+
+
+### 文档
+
+http://www.w3cplus.com/blog/tags/522.html
+
+https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/
 \ No newline at end of file
@@ -65,11 +65,12 @@
  
     tl.from($email, 0.5, {
             scale: 0,
-            autoAlpha: 0
+            opacity: 0
         })
         .to($email, 0.5, {
             scale: 0.5,
-            autoAlpha: 1
+            opacity: 1,
+            skewX: 2
         })
         .to($email, 0.5, {
             scale: 0.5,
@@ -93,7 +94,7 @@
             left: -24,
             top: 95,
             scale: 0,
-            autoAlpha: 0
+            opacity: 0
         }, "+=0.2")
         ;
  
@@ -130,14 +131,14 @@
  
     function restart() {
         TweenLite.to(restart, 0.4, {
-            autoAlpha: 1
+            opacity: 1
         })
     }
  
     restart.onclick = function() {
         reset();
         TweenLite.set(restart, {
-            autoAlpha: 0
+            opacity: 0
         })
         tl.restart();
         tlMan.restart();
@@ -6,7 +6,6 @@ body {
     background-color: #1d1d1d;
     color: white;
     width: 500px;
-    margin: 300px auto;
 }
  
 *{