实战技巧篇——用起喵动

        喵动的基础功能介绍及优势特征已经在【第一课】中介绍，还不了解的商家——→请点击前往学习。

       同样，以【第一课】中的案例做讲解，此页面中，所有动效都是由喵动制作的。

        也许您会有疑问，这些动效gif同样可以完成，为什么为要用喵动来做呢？下面为您来解答。

        很多商家都知道淘积木为商家开放了可上传jpg、gif、png的功能，我们可以随意的让页面中想动的地方动起来。

        但是，越是复杂的动效越会影响页面的加载速度，而加载速度过慢直接导致的就是跳失率的飙红。

        因此很多商家为了降低跳失率抹杀了创意，或是又为了创意牺牲了用户跳失。

        而喵动正是为了解决这个问题而诞生的。因为喵动最终会生成alive文件置入淘积木。下面钻展小二将化身某度百科为您介绍，alive文件并不是图形文件，而是一串代码文件，读取速度非常快！

       这样在表现创意的同时，丝毫不会影响页面加载的速度。即给创意无限的空间，又不会影响用户跳失。

       首先，对照手机中扫出的 ↑ 上方页面，我们需要先了解这个页面中喵动组件的位置。

       接下来，主要为大家讲解 kv动画和小火车动画的制作。

        这两个动画基本包括了喵动所有操作中的操作重点，掌握这些就等于保证您“上午学喵动，下午就上岗”。

 【喵动】——kv动画制作

     首先设计师要拟定动效图层，并依次拆分，单独存储为png图片，在喵动中逐层导入。

      操作步骤：

      第一步：选中要编辑的图层。例如“灯笼”

      第二步：在效果添加中进行设置，选择“旋转”并设置旋转角度。

      第三步：在时间轴区块可以看到自己设置命令时间长度。

      我们可以看到灯笼在整个kv中是唯一一个始终保持摆动的图形。其它都是一次性动画。接下来我们讲一下具体的命令设置。

【喵动】——命令设置

       旋转命令相对来说比较特殊， 是一个以轴心为中心的摆动命令。

       因此对png原图存储上要注意，需要摆动的物体，一定要让轴心居中在画面中心

      操作步骤

      第一步：选中要编辑的图层——“灯笼”

      第二步：在效果添加中进行设置，选择“旋转”并设置旋转角度。（旋转效果自动定义为 xo-0o区间 ）

      因此，灯笼想要达到小幅度摆动，命令设置为-5度到5度之间的动作，就要分别设置两段旋转动画。

      第一段：旋转_1     5度至0度区间

      第二段：旋转_2     0度至-5度区间   （如下图）

     在时间轴区块可以看到自己设置命令及时间长度。

【喵动】——移动

    本页中，主标题和两片云都试用了移动命令，但是出现的顺序不同，两片云先出，主标题后出。

      是因为，主标题动作添加了“延时”。延时功能可以讲画面的节奏拉开，强调重点。

      操作步骤：

      第一步：选中编辑图层

      第二步：先将运动图形拖动到初始位置（本图中直接拖至画面以外）

      第三步：点击移动命令（移动框会出现在该图层）

      第四步：将图层拖动至最终停止的位置。

      第五步：为标题设置延时命令确定移动顺序

      第六步：仅一次动作设置

     如果需要来回来去的移动，也可像旋转一样再添加第二次移动命令

【喵动】——透明

       副标题选用了透明效果

       操作步骤：

       第一步：选择图层

       第二步：选择透明效果

       第三步：设置透明度（透明度_1 为50%   透明度_2 为100% ）

       副标题的动效比较微弱，为的是与主标题直接来开区别。

      设计师在使用喵动时一定要记得在“动”也是要有主有次的，切不要让动效太均衡，到处都是重点，等于没有重点，一定要让消费者看到最主要的地方。

小窍门

       有商家反馈，觉得喵动逐个存PNG图形太麻烦。

       这里告诉您ps中有个快捷键，可以一键从文件中单独存储为PNG文件，由于这个功能并不是很常用，所以很多同学不知道，不过在使用喵动时，这个功能就发挥作用啦！

       操作步骤：

       第一步：选择自己要保存的图层

       第二步：选择图层→ 快速导出为PNG

       第三步：保存图片

        这样在一个多图层画面中，您就可以保存自己想要的那一层，不用逐个保存，可以大大的提高工作效率。