GSAP

发表于 分类于 阅读次数：

GSAP（GreenSock Animation Platform）是一个从flash时代一直发展到今天的专业动画库。

GSAP提供4个库文件供用户使用：

  • TweenLite

  • TimelineLite

  • TimelineMax

  • TweenMax

TweenMax 是 GSAP 平台中功能最全的动画工具，可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。

它是纯 js 动画。

安装
1
npm install gsap
使用

0 - 100 的过渡动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p>{{ num.number.toFixed(0) }}</p>

<script>
import gsap from "gsap"; // gsap 使用的是 TweenMax 的 api

export default {
    setup() {
        const num = reactive({
            number: 0
        });

        // 这里的 number 是 num 的属性
        gsap.to(num, {duration: 1.5, number: Number(100) || 0});
    }
}
</script>

更多内容见 TweenMax() | TweenMax中文文档/TweenLite中文文档。