GASP动画和ScrollMagic

最新推荐文章于 2024-05-13 22:07:40 发布

小蚂蚁有力量

最新推荐文章于 2024-05-13 22:07:40 发布

阅读量3.6k

点赞数 2

一、GSAP基础

1.GSAP开篇

1.什么是ScrollMagic?
ScrollMagic是一个滚动视差插件
ScrollMagic本身比较简单，只包含2个类：
crollMagic.Controller 一个控制器类，用于总体的调度；
ScrollMagic.Scene 一个场景类，用于设计具体的变换。

需要注意的是，它本身并没有集成 animation的控制方法，动画的实现，需要引入插件 GSAP 或者是 Velocity；

什么是GSAP?
GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库
GSAP优点
1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。
2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
3、没有依赖。
4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。
GSAP版本
GSAP提供4个库文件供用户使用
1.TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。
2.TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。
3.TimelineMax：扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。
4.TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。

建议在开发中使用 TweenMax 这个全功能的 js文件，它包括了GreenSock动画平台的所有核心的功能。

官网地址：http://www.greensock.com/
github地址（下载文件）：https://github.com/greensock/GreenSock-JS/
中文网: https://www.tweenmax.com.cn/

<head>
    <meta charset="UTF-8">
    <title>01-GSAP开篇</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
// new TweenMax(".box", 3, {x: 500});
    // 2.利用静态方法执行动画，数字3 为持续时间
    // 从当前位置到指定位置
    // TweenMax.to(".box", 3, {x: 500});
    // 从指定位置到当前位置
    // TweenMax.from(".box", 3, {x: 500});
    // 从第一个指定的位置到第二个指定的位置
    TweenMax.fromTo(".box", 3, {x: 500}, {x: 200});
</script>

2.GSAP交叉动画

<head>
    <meta charset="UTF-8">
    <title>02-GSAP交叉动画</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
        .box2{
            background: blue;
        }
        .box3{
            background: green;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<script>
    // TweenMax.staggerTo([".box1", ".box2", ".box3"], 3, {x: 500}, 3);
    // TweenMax.staggerFrom([".box1", ".box2", ".box3"], 3, {x: 500}, 3);
    //最后一个元素为间隔时间，前面一个开始3秒后，执行后一个
    TweenMax.staggerFromTo([".box1", ".box2", ".box3"], 3, {x: 500}, {x: 200}, 3);
</script>
</body>

3.GSAP动画属性

<head>
    <meta charset="UTF-8">
    <title>03-GSAP动画属性</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

最低0.47元/天解锁文章

小蚂蚁有力量

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
GASP动画和ScrollMagic

一、GSAP基础1.GSAP开篇1.什么是ScrollMagic?ScrollMagic是一个滚动视差插件ScrollMagic本身比较简单，只包含2个类：crollMagic.Controller 一个控制器类，用于总体的调度；ScrollMagic.Scene 一个场景类，用于设计具体的变换。需要注意的是，它本身并没有集成 animation的控制方法，动画的实现，需要引入插件...
复制链接

扫一扫