先看效果动画分解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的形式存在。在这里，同学们可以向UI专业的同学咨询AI相关的东西。这里主要强调一下：1.AI基础工作完成后如何正确保存SVG文件，我参考Illustrator保存svg，选项略有不同，保存后直接复制svg代码即可。不好的是AI再次打开svg会报错，所以每次编辑AI文件，然后另存为svg文件，不要直接编辑svg文件（很重要，编辑svg直接会导致你重新开始很多次）！2、flag和wave部分需要另外创建一个AI文件，涉及到svg的嵌套。后面会详细说明3.说到图片的自适应，AI画板的大小就是下图中的棕色边框，包含了主题部分，不需要将整个背景保存为.svg文件。配置和编辑SVG文件编辑器以打开svg文件。可以看到命名组，将部分复制到html文件中。js文件涉及jquery.jsTweenMax.min.jsTimelineMax.min.jsTweenMax可以看官网视频学习，也可以在官网提问。根据我自己的理解，我将seagulls的id类似id="seagull_2_"的格式改成class="seagull"，方便jquery选择。海鸥的左右翅膀也做同样的操作。海鸥主要有位移的变化和翅膀抖动的变化，具体代码如下staggerFromTo()使用该方法可以在一定时间内按照指定的时间间隔依次执行同一动画的数组元素。to()方法是指定动画的效果。接下来是波浪动画。wave是一个svgembeddingSet，使用translation来实现wave动画的效果，需要新建一个AI文件将wave另存为一个单独的svg文件，把代码贴到对应的位置，设置width，height，x,y位置，复制原来的
