动画可以分为两种类型：
? 交互动画：可以对绝大部分交互元素／组件设置的动画效果 ? 播放动画：针对幻灯片、序列帧、Layer幻灯使用，可控制轮播
交互动画类型 1.飞入／飞出 2.渐现／渐隐 3.放大出现／放大消失 4.缩小出现／缩小消失 5.放大缩小 播放类型 播放 暂停播放 结束播放 交互动画类型 6.透明 播放类型 7.旋转(逆时针就是在角度 填写负数的值，也可以超出360°的限制) 8.直线运动／曲线运动 9.SVG动画 1.飞入／飞出动画：
这两个动画在这里的飞入／飞出方向不难理解，需要注意的是，动画设置面板的路径长度选项。 通过设置不同的路径选项，元素可以从不同位置飞入／飞出画布，并且自带渐现效果，可以实际操作看下。 2.渐现／渐隐动画
给元素添加渐现动画，元素逐渐显示；渐隐动画原理在这里需要注明一下，一个元素添加了渐隐动画，其实是将这个元素的透明度降低变为0直到看不到的过程，而不是这个元素真的消失了。 所以，当这个元素的渐隐动画执行完，我们用其他元素来触发这个元素显示的时候，是看不到的，但实际上元素是显示了，只不过我们看到的也是透明的元素。 3.放大出现／放大消失
两个动画的效果可以实际操作预览。 给元素添加放大消失的动画，该动画执行后，如果想要让其他元素再来触发这个元素的显示，显示的是动画结束前的最后一个状态，呈现透明状。并不是元素初始状态。 4.缩小出现／缩小消失
两个动画的效果可以实际操作预览。 给元素添加缩小消失的动画，元素由大到小缩小消失，原理类似放大消失。像素由初始状态变为0的过程；当这个动画执行完，用其他触发器来触发这个元素显示的时候，元素是看不到的。 5.放大缩小
该动画的原理：给一个元素添加该动画，元素由大到小缩放，实际是像素由初始状态变为0的过程；当这个动画执行完，用其他触发器来触发这个元素显示的时候，元素是看不到的。因为元素即使显示，也是像素为0的状态。 6.透明
该动画是给元素设置由100%显示状态到某个透明度状态的过程。在这里，不透明度的范围是0～1，默认是0，即元素是100%可见的。如下图中我们将不透明度设置为0.5，元素就会呈现右图中的动画效果。 7.旋转
旋转动画如果精通使用，可以实现很不错旋转角度：一个元素要旋转多少的的动画效果。现在主要是理解动画属性设角度。默认的旋转是Z轴、以元素置面板的几个主要设置：旋转角度、轴向、中心为基准点旋转360度，是顺时旋转基准点。 针的旋转效果；360前面加一个负的符号“-”，元素就可以逆时针旋转。通过点击后面的@还可以设置由参数变量决定的旋转度数，根据参数变量的变化 轴向：轴向由有三个X轴、Y轴、Z轴；通过选择不同的轴，决定了元素依靠哪个方位的轴旋转。配合旋转基准点可以实现更多旋转效果。 旋转基准点：以元素的哪个部位为基准点旋转。 通过设置不同的轴向、旋转基准点等可以设置丰富的旋转动画。 线运动/直线运动
9. SVG描绘动画 上一篇：添加动画 下一篇：动画时序设置
意派Epub360-专业H5设计工具
意派Coolsite360-专业响应式网站/微信小程序设计工具
直线运动跟曲线运动相对常用，有单独的教程介绍，可以直接戳链接进行查看曲
相关推荐：
loading