GreenSock (TweenMax) 动画案例(一)

先看效果

动画分解

1.循环飞动的海鸥
2.摇曳的小船
3.摆动的旗帜

涉及知识点

1.AI(可尽情骚扰UI欧巴)
2.SVG(了解基本的知识点)
3.TweenMax(GreenSock)

---

之前一直没有接触过SVG动画，首先拿到的是一个AI 文件和一个Word文档

1.    水流有浮动效果，船体随着水流轻微有起伏摇晃，旗帜有轻微飘动效果。
2.    海鸟挥动翅膀，有轻微的位移循环。

接下来就要正式开始一点一点完成一个动画作品，一开始想到的是将动画部分单独保存为png图片，不需要动画的部分作为背景，利用css和js来完成动画。
后面经过查阅资料，浏览了https://codepen.io上的很多案例，看完了这个视频，视频链接（翻墙观看）初步确定思路，如何完成动画。走了很多错路，但是基本效果完成。分享出来给没有接触过SVG动画的同学一点思路。

操作AI文件

AI文件操作，主要是将需要做动画的部分编组，设置名称，保存成svg文件后名称将以id形式存在，这里AI涉及的到东西同学们可以请教专业的UI同学。这里主要强调几点:

1.AI基本工作完成后如何正确保存SVG文件，我参考了Illustrator保存svg,选项有略微不同，保存好的可以直接复制svg代码。有一点不好的地方是，AI再次打开svg会报错，所以每次编辑的是AI文件，然后另存为svg文件，不直接编辑svg文件(很重要，直接编辑svg导致重头再来很多次)！

2.旗帜和波浪部分需要另外新建一个AI文件，这里涉及到了svg的嵌套。后面再详细讲解

3.涉及到图片的自适应，AI画板的大小，为下图的褐色边框，将主题部分包含住，不需要整个背景

另存为.svg文件配置

编辑SVG文件

编辑器打开svg文件，可以看到命名好的组，将<svg></svg>部分复制到html文件中。

接下来就要开始真正要让他动起来了
js文件涉及到
jquery.js
TweenMax.min.js
TimelineMax.min.js
TweenMax可以从官网上看视频学习，官网也可以提问题，涉及到的知识点我会按照自己的理解说明下
将id为seagulls 下的格式类似于id="seagull_2_"统一改成class="seagull"，便于jquery选择出来，海鸥的左右翅膀也做相同的操作
海鸥主要是有位移的变化和翅膀抖动的变化，具体代码如下

<script>
        //分别选择出海鸥，以及海鸥的左边翅膀，和右边翅膀
    var seagulls = $("#seagulls .seagull"),
        seagulls_left = $("#seagulls .seagull .left"),
        seagulls_right = $("#seagulls .seagull .right");  
        //设置场景一
    function sceneOne() {
        var tl = new TimelineMax();
        //在时间轴上添加了一个名为begin的标准
        //那么我每次后面如果有begin，那么就都是从begin这个相对的点开始而不是依次执行
        //tl.to(selector, 1, { }, "begin");tl.to(selector1, 1, { }, "begin");两个同时进行一共花一秒
        //tl.to(selector, 1, { });tl.to(selector1, 1, { });依次执行一共花两秒
        tl.add("begin");
        tl.staggerFromTo(seagulls, 3, {
            y: 0,
        }, {
            x: 30,
            y: 30,
            repeat: -1,//循环播放
            yoyo: true,//位移到x:30,y:30后,反向运动, 不设置的话会立马消失，从x:0,y:0重新开始运动
        }, .3,//m每只海鸥运动时间间隔0.3s
         "begin");
        tl.to(seagulls_left, 1, {
            rotation: 10,
            x: -2,
            transformOrigin: "right bottom",//以右下角为中心做旋转运动，翅膀摆动的效果
            repeat: -1,
            yoyo: true
        }, "begin");
        tl.to(seagulls_right, 1, {
            rotation: -10,
            x: 2,
            transformOrigin: "left bottom",
            repeat: -1,
            yoyo: true,
        }, "begin");

        return tl;
    }

    var repeat = new TimelineMax();
    repeat.add(sceneOne(), "scene2");

</script>

staggerFromTo()使用这个方法可以让相同动画的数组元素，在一定时间里，按照规定时间间隔依次执行
to()方法就是想指定效果做动画。

接下来是波浪动画，波浪是一个svg的嵌套，用过平移实现波浪动画的效果，需要新建一个AI文件将波浪单独保存svg文件，代码粘贴到相应位置，设置宽高，x，y位置，将原来的<g id="wave">...</g>替换。波浪的总长度是大于显示的长度的。这样就可以进行平移了。

tl.to(wave, 6, {
    x: -337,//向左平移337个单位，这个平移的长度可以测试一下，重复的时候衔接起来，没有断掉的感觉
    repeat: -1,
    ease: Linear.easeNone
}, "begin");

旗帜的效果也是嵌套svg进行平移的，平移的过程可能会有位移，所以这里再平移的时候y轴也有一个位移y：30和角度变化，

    tl.to(bg, 15, {
            x: -137, //旗帜横向平移
            repeat: -1,
            rotation: -7,
            y: 30,
            ease: Linear.easeNone
        }, "begin");

大体的代码就这些，有任何问题可以提出，交流讨论，完整代码看这里完整代码

总结

很多地方实现效果，却不知道是否是最优的方法，希望能学习到更多的东西。
第一次认真写东西，如果对你有用可以点个赞我将继续努力。