特性

  1. 较小的文件大小
  2. 新语法简化API

Part1 - 简化的API

使用新版本的GreenSock，我们不再需要决定是否要使用TweenMax，TweenLite，TimelineMax或TimelineLite。现在，所有内容都在一个简化的API中

  1. <script>
  2. /*
  3.     不再区分TweenLite、TimelineLite、TweenMax、TimelineMax
  4.     全部合成gsap.
  5.     以前的持续时间也将整合为duration
  6. */
  7.     gsap.from(".box-200", {
  8.         duration: 3,
  9.         y: 500,
  10.         background: 'red'
  11.     })
  12. </script>

以前，动画的持续时间在目标元素之后直接定义为其自己的参数。

  1. # 2.x版本
  2. TweenMax.to('.box', 1, {})

在新版本中，持续时间与您要设置动画的其余属性在同一vars对象中定义，因此更加明确。

  1. gsap.to(".box",{
  2.   duration: 2,
  3. });

Part2 - 时间轴用法

创建时间表也很容易。现在，无需使用新的TimelineMax（）或新的TimelineLite（）来创建时间线，而只需使用gsap.timeline（）

  1. <script>
  2.     const time = gsap.timeline();
  3.     time.to(".box-200", {
  4.             duration: 2,
  5.             x: 300,
  6.         })
  7.         .to(".box-100", {
  8.             duration: 1,
  9.             y: 100
  10.         })
  11. </script>

可以发现相同的事情写了多遍，那么有什么简便的方法吗？

通过传入default属性

  1. <script>
  2.     const time = gsap.timeline({
  3.         defaults: { // Main
  4.             duration: 3
  5.         }
  6.     });
  7.     time.to(".box-200", {
  8.             x: 300,
  9.         })
  10.         .to(".box-100", {
  11.             y: 100
  12.         })
  13. </script>

在时间轴中使用前缀代替标签

通常，在创建时间轴时，我会创建标签，然后使用它们添加延迟或设置补间的位置。

  1. gsap.timeline()
  2.   .add("s")
  3.   .to(“.box1", { ... }, "s")
  4.   .to(“.box2", { ... }, "s")
  5.   .to(“.box3", { ... }, "s+=0.8")
  6.   .to(“.box4", { ... }, "s+=0.8”);

Part3

传统的stagger 、staggerTo、staggerForm

  1. <script>
  2.     gsap.to(".box-200", {
  3.         duration: 2,
  4.         x: 500,
  5.         ease: Power0.easeIn,
  6.         stagger: 0.5 // 延迟秒数
  7.     })
  8. </script>

Part4 - 函数功能

random(start,end) 使用字符串包起来

  1. <script>
  2.     gsap.to(".box-200", {
  3.         duration: 'random(0.3,1.2)',
  4.         x: 'random(100,500)',
  5.         ease: Power0.easeIn,
  6.         stagger: 0.5 // 延迟秒数
  7.     })
  8. </script>

Part5 - 关键帧keyframes

引入了一个关键帧的数组属性

  1. <script>
  2.     gsap.to(".box-200", {
  3.         keyframes: [{ # Main
  4.             duration: 1,
  5.             x: 200
  6.         }, {
  7.             duration: 1.5,
  8.             y: 200
  9.         }, {
  10.             duration: 1,
  11.             x: 0,
  12.             rotation: '360deg'
  13.         }, {
  14.             duration: 1,
  15.             y: 0,
  16.             background: 'red'
  17.         }]
  18.     })
  19. </script>

3.gif

Part6 - repeatRefresh

默认使用repeat选择重复运行时，它会回到开始位置。重新开始

那么使用repeatRefresh：true时，会选择动画最后位置，再开始运动

  1. <script>
  2.     gsap.to(".box-200", {
  3.         duration: 0.3,
  4.         x: "+=100",
  5.         repeat: 5,
  6.         repeatRefresh: false
  7.     })
  8. </script>

3.gif

Part7 - 动画控制

  1. <script>
  2.     /*
  3.         全局的自动控制 & 设定
  4.         gsap.globalTimeline.timeScale(0.1) // 控制动画转化速率 0~1
  5.         gsap.globalTimeline.pause(); // 停止动画
  6.         gsap.globalTimeline.play(); // 开始动画
  7.         gsap.globalTimeline.paused(); // 目前状态
  8.         */
  9.     gsap.timeline()
  10.         .to(".box-200", {
  11.             duration: 5,
  12.             x: 500
  13.         })
  15.     console.log(gsap.globalTimeline.paused());
  17.     var start = document.querySelector(".start")
  18.     start.onclick = function() {
  19.         gsap.globalTimeline.play();
  20.     }
  22.     var stop = document.querySelector(".stop");
  23.     stop.onclick = function() {
  24.         gsap.globalTimeline.pause();
  25.     }
  26. </script>

4.gif

参考资料

https://tympanus.net/codrops/2019/11/14/the-new-features-of-gsap-3/