在 TypeScript 中使用 ScrollMagic 和 TimelineMax 结合使用创建动画

本文链接：https://blog.csdn.net/m0_47626239/article/details/131153208

安装 ScrollMagic 和 gsap 库
```
npm install scrollmagic gsap --save
```

在需要使用的文件中引入库文件

import * as ScrollMagic from 'scrollmagic';
import { TimelineMax } from 'gsap';

创建 ScrollMagic 控制器

const controller = new ScrollMagic.Controller();

创建 TimelineMax 时间轴
```
const timeline = new TimelineMax();
```

添加动画序列到 TimelineMax 时间轴

//timeline.to(目标对象,动画持续时间,目标对象的属性)
timeline.to('#box', 1, { x: 200, opacity: 0.5 })
        .to('#box', 1, { y: 200, opacity: 0.2 })
        .to('#box', 1, { x: 0, opacity: 1 })
        .to('#box', 1, { y: 0, opacity: 0.5 });

//还可以使用回调函数来指定属性值，这样就可以动态计算属性值。例如：
timeline.to('#box', 1, {
  y: (index, element) => {
    return element.clientHeight / 2; // 动态计算Y轴位置
  }
});

创建 ScrollMagic 场景并添加到控制器中

const scene = new ScrollMagic.Scene({
  triggerElement: '#trigger', // 触发元素
  duration: 500, // 滚动高度
  offset: 0, //动画插值计算的开始位置或结束位置的偏移量
  triggerHook: 'onCenter', //动画触发的位置
  reverse: false //动画是否反向播放
})
  .setTween(timeline) // 将时间轴添加到场景中
  .addTo(controller); // 添加到控制器中
  //on 方法可以接受多个事件类型，例如 enter、leave、start、end 等。可以通过事件回调函数来实现自定义动画效果
  .on('progress', (ev: { progress: number }) => {
      //ev.progress:动画执行的进度，0开始，1结束
  })


new Scene() 方法可接受以下常用参数
1.duration：指定动画所需要的滚动高度。这个值可以是一个数字，表示动画所需要的滚动高度，也可以是一个函数，用于计算动画所需要的滚动高度。默认为 0，表示动画仅在触发元素进入视口时触发。
const scene = new ScrollMagic.Scene({ duration: 500 });

2.offset：指定动画插值计算的开始位置或结束位置的偏移量。偏移量可以是一个数字或函数，用于计算偏移量。默认为 0。
const scene = new ScrollMagic.Scene({ offset: -50 });

3.triggerElement：指定触发动画的元素节点。这个值可以是一个选择器字符串，也可以是一个原生 DOM 元素。如果不指定，默认为文档的根元素。
const scene = new ScrollMagic.Scene({ triggerElement: '#trigger' });

4.triggerHook：指定动画触发的位置。可以是一个数字或字符串。数字 0 表示元素顶部；数字 1 表示元素底部；字符串 “onCenter” 表示元素中心。默认为 0。
const scene = new ScrollMagic.Scene({ triggerHook: 'onCenter' });

5.reverse：指定动画是否反向播放。反向播放时，动画会在离开视口时播放。默认为 true。
const scene = new ScrollMagic.Scene({ reverse: false });

6.loglevel：指定日志记录的级别，用于调试。取值可以是 0（关闭日志）、1（记录警告和错误）、2（记录警告、错误和调试信息）。默认为 2。
const scene = new ScrollMagic.Scene({ loglevel: 1 });

7.enabled：指定动画是否启用。默认为 true，即启用动画。
const scene = new ScrollMagic.Scene({ enabled: false });