案例-设备【GSAP】

image.png

步骤

  1. 设置初始值
  2. 动画
  3. 循环
  1. TweenMax.set("#mac", {
  2.   transformOrigin: 'bottom 0%',
  3.   scale: 0 });
  5. TweenMax.set("#ipad", {
  6.   transformOrigin: 'bottom 0%',
  7.   autoAlpha: 0,
  8.   scale: 0 });
  10. ......
  12. 使用TweenMax.set 设置初始值包括动画起始位置  基点位置
  13. 缩放至0 ---> 这样可以控制出现位置。

  • 逐渐出现

    1. const visible = item => {
    2. let tl = new TimelineMax();
    3. tl.to(item, .5, {
    4.   scale: 1,
    5.   autoAlpha: 1,
    6.   ease: Elastic.easeOut.config(1, 0.75) });
    7. return tl;
    8. };

  • Bar跳跃

    1. const bars = item => {
    2. let tl = new TimelineMax();
    3. tl.staggerTo(item, 1, {
    4.   scaleY: 0,
    5.   transformOrigin: 'bottom 0%',
    6.   yoyo: true,
    7.   repeat: -1,
    8.   ease: Power0.easeNone,
    9.   stagger: {
    10.     amount: 1.5 } });
    11. return tl;
    12. };

…

声明时间线

  1. const master = new TimelineMax({ delay: .5 });
  2. master.timeScale(1.5); // 获取/设定动画速度 - 1.5倍速
  3. master.add('s'); // 辅助工具 - 方便后面时间管理
  5. master.
  6. add(visible('#mac'), 's+=1.1'). 
  7. add(visible('#phone'), 's+1.2').
  8. add(visible('#ipad'), 's+1.3').
  9. add(visible('#stuff-on-mac'), 's+1.4').
  10. add(visible('#stuff-on-iphone'), 's+1.5').
  11. add(visible('#stuff-on-ipad'), 's+1.6'). // 出现
  12. add(bars('.bar'), 's+1.6'). // 动画
  13. add(bars('.shade'), 's+1.6').
  14. add(lines('.line'), 's+1.6').// 线条动画
  15. add(lines('.line2'), 's+1.6').
  16. add(device('.device'), 's+1.6').
  17. add(device('.device2'), 's+1.6');

运动路径

在SVG动画工具包中，沿运动路径设置动画的功能非常有用。让我们探索实现这一目标的几种方法，包括即将推出的CSS运动路径模块和新发布的GSAP3

大多数自然动作倾向于遵循弓形的轨迹，动画应遵循此原理，通过遵循暗示的“弧”来实现更大的真实感。

  1. <script>
  2. // 1. 选择运动的路径
  3. const path = MorphSVGPlugin.pathDataToBezier("#linePath", { 
  4.    align: ".plane"
  5. });
  7. console.log(path);
  10. // 2. 选择要运动的物体
  11. let tl = new TimelineMax();
  12. tl.staggerTo(".box", 8, {
  13.   bezier: {
  14.     values: path,
  15.     type: "cubic",
  16.     autoRotate: true
  17.   },
  18.   ease: SlowMo.ease.config(0.3, 0.1, false),// 运动曲线
  19.   repeat: -1,
  20. }, 0.5)
  21. </script>

SVG变形

  1.   <script>
  3.   ani = TweenMax.from("#linePath",3,{
  4.     drawSVG: "10%",
  5.   },{
  6.     drawSVG:"true"
  7.   })
  9. ani.yoyo(true).repeat(-1);
  12. </script>