Commit 3ed880c8183df21f7e44c3f8a07afcb6a60340d4
1 parent
4302d700
README.dm
Showing
3 changed files
with
46 additions
and
6 deletions
GSAP/README.md
0 → 100644
| 1 | +## GSAP\TimelineMax | ||
| 2 | + | ||
| 3 | +创建一个新的动画 | ||
| 4 | + | ||
| 5 | +``` | ||
| 6 | +var tl = new TimelineMax({ | ||
| 7 | + delay: 1, // 延迟几秒开始 | ||
| 8 | + repeat: 0, // 重复几次 -1: 无限循环 | ||
| 9 | + repeatDelay: 1, // 执行完整个时间轴一次之后，延迟几秒执行下一次 | ||
| 10 | + onUpdate: updateStats, // 当时间轴更新时候 | ||
| 11 | + onRepeat: updateReps, // 当重复的时候 | ||
| 12 | + onComplete: restart // 完成之后 | ||
| 13 | +}); | ||
| 14 | + | ||
| 15 | + | ||
| 16 | +tl.form(element, duration, {optity: 0}).to(element, duration, {optity: 1}) | ||
| 17 | +``` | ||
| 18 | + | ||
| 19 | +### GSAP对应CSS属性 | ||
| 20 | +CSS | GSAP | ||
| 21 | +----|---- | ||
| 22 | +translateX() | x | ||
| 23 | +translateY() | Y | ||
| 24 | +translateZ() | z | ||
| 25 | +rotate() | rotation | ||
| 26 | +rotateY() | rotationY | ||
| 27 | +rotateX() | rotationX | ||
| 28 | +scaleX() | scaleX | ||
| 29 | +scaleY() | scaleY | ||
| 30 | +skewX() | skewX | ||
| 31 | +skewY() | skewY | ||
| 32 | +transform-origin() | transformOrigin | ||
| 33 | +optity | opacity | ||
| 34 | + | ||
| 35 | + | ||
| 36 | +### 文档 | ||
| 37 | + | ||
| 38 | +http://www.w3cplus.com/blog/tags/522.html | ||
| 39 | + | ||
| 40 | +https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/ | ||
| 0 | \ No newline at end of file | 41 | \ No newline at end of file |
GSAP/index.html
| @@ -65,11 +65,12 @@ | @@ -65,11 +65,12 @@ | ||
| 65 | 65 | ||
| 66 | tl.from($email, 0.5, { | 66 | tl.from($email, 0.5, { |
| 67 | scale: 0, | 67 | scale: 0, |
| 68 | - autoAlpha: 0 | 68 | + opacity: 0 |
| 69 | }) | 69 | }) |
| 70 | .to($email, 0.5, { | 70 | .to($email, 0.5, { |
| 71 | scale: 0.5, | 71 | scale: 0.5, |
| 72 | - autoAlpha: 1 | 72 | + opacity: 1, |
| 73 | + skewX: 2 | ||
| 73 | }) | 74 | }) |
| 74 | .to($email, 0.5, { | 75 | .to($email, 0.5, { |
| 75 | scale: 0.5, | 76 | scale: 0.5, |
| @@ -93,7 +94,7 @@ | @@ -93,7 +94,7 @@ | ||
| 93 | left: -24, | 94 | left: -24, |
| 94 | top: 95, | 95 | top: 95, |
| 95 | scale: 0, | 96 | scale: 0, |
| 96 | - autoAlpha: 0 | 97 | + opacity: 0 |
| 97 | }, "+=0.2") | 98 | }, "+=0.2") |
| 98 | ; | 99 | ; |
| 99 | 100 | ||
| @@ -130,14 +131,14 @@ | @@ -130,14 +131,14 @@ | ||
| 130 | 131 | ||
| 131 | function restart() { | 132 | function restart() { |
| 132 | TweenLite.to(restart, 0.4, { | 133 | TweenLite.to(restart, 0.4, { |
| 133 | - autoAlpha: 1 | 134 | + opacity: 1 |
| 134 | }) | 135 | }) |
| 135 | } | 136 | } |
| 136 | 137 | ||
| 137 | restart.onclick = function() { | 138 | restart.onclick = function() { |
| 138 | reset(); | 139 | reset(); |
| 139 | TweenLite.set(restart, { | 140 | TweenLite.set(restart, { |
| 140 | - autoAlpha: 0 | 141 | + opacity: 0 |
| 141 | }) | 142 | }) |
| 142 | tl.restart(); | 143 | tl.restart(); |
| 143 | tlMan.restart(); | 144 | tlMan.restart(); |