appae动效(ae ui动效)

　　动效对H5的作用体现在两个方面：

功能性。引导用户点击和翻页，吸引用户做长时间的视觉停留。

趣味性。加强用户体验的舒适度，提高愉悦感。

　　它的制作手法有很多，比如《H5动效的常见制作手法》曾经归纳如下：

　　根据上表，不同动画需要运用多种制作手法，可能需要掌握一定的编程技术。但在iH5上基于预设的动效组件，可以轻松实现常见的H5动效，支持GIF、Video等上传设置交互动效，效果还甚至优于Flash。

　　动效是元素的位移、大小、角度和透明度等随时间的变化。

　　一、基础动效

　　1.翻页动效

　　使用方法：在舞台设置好滑动页面方式后，点击页面，选择向前/后翻页的效果。

　　淡入淡出、平移、平移渐变、覆盖视差、放大缩小、翻转、自上翻入、掉落、旋转出现（离开）、翻书、方块旋转、弧线、交替翻页、碰撞翻页。

　　2.元素动效

　　在每个素材下添加动效，通过调整动效的属性设置各种各样的出场动效。

　　效果示例：

　　具体的动效参数在iH5的动效组件上都有预设，大致如下——

　　可以有机组合多种动效，做出类似的刷墙效果：

　　一般为了画面的和谐，一个H5页面中最多使用3种动效，不同素材搭配不同动效。

整体背景素材：一般用最简单的动效展示素材，不然会给用户迟钝的感觉。

　　如：进入离开、淡入淡出、展开、左右摇摆等；

背景里部分素材：增加背景的趣味性，可以是一朵旋转的小花，或者是漂浮的云朵。

　　如：旋转、闪烁、弹跳、心跳、钟摆等；

重点强调素材：运用夸张的动效来达到吸引眼球的效果。

　　如：缩放、掉落、晃动、弹弹球、翻转、滚动、出现消失等；

　　二、时间轴动效

　　▲效果图摘取自UI中国_Vision

　　时间轴动效的原理和原生的动效组件类似，都是通过改变元素的位置、大小、透明度等促成动效效果。

　　因为时间轴存在单位时间，因此可把玩法大致分为两种：单位时间内控制单一属性、控制多个属性。不完全举例如下——

　　1.单位时间内控制单一属性：

　　素材位移一定距离的轨迹，时间间隔越短，运动速度越快。把时间节点控制得尽量短，元素进出的动效效果会越明显。

▲戳动图查看GIF效果

　　不同素材间存在上下层关系，如果属性一致，上层素材会默认遮盖下层素材。所以我们只要通过时间轴控制上层素材的坐标、大小、角度，直至覆盖下层素材，即可完成素材间的遮罩效果。

▲戳动图查看GIF效果（上图白色遮罩为中间镂空的PNG）

　　可实现的遮罩效果还有很多，比如：

渐进闭合遮罩

渐变式遮罩

弹窗显示

　　可以根据实际需要实现。

　　另外，iH5.cn还支持素材的X/Y轴旋转，借此机制也可以做出伪3D的循环以及折叠效果。

　　以X轴旋转举例，只需在时间轴下设置两个时间节点，控制素材绕X轴做0°至90°旋转，就能做出素材“翻倒”、“双向折叠”的伪3D效果。

▲戳动图查看GIF效果（左右折叠的两张图需相切，保证X坐标一致）

　　2.单位时间内控制多个属性：

▲戳动图查看GIF效果

　　这种类型对时间轴的掌握要求很高，因为在某一时间节点上，可能你需要同时控制大小、坐标、透明度、旋转角度等多个属性。而且这不局限在单一素材上，可能是几个素材的结合。

　　比如橡皮糖式滑动效果，需要同时在时间节点上设置素材的高度&Y坐标变化。

　　操作上不难，诀窍在于需要在滑动时间轴属性栏下设置【自动跳转控制点】功能。

▲戳动图查看GIF效果

　　当用户进行滑动动作时，时间轴会自动播放到下一时间节点，常用于制作响应式的动效。

　　实际制作中对时间轴的应用可能会更加错综复杂，推荐观摩在iH5.cn上发布的《你知道另一个世界，还有一个你吗？》，这是设计师小牙制作的时间轴动画H5，里面涉及的动效全都用时间轴制作。

　　里面每一个页面动效都是匠心级的，涵括的时间轴动效拆分如下：

控制旋转角度——Loading页和主页的翻转

控制透明度&坐标——小人捡垃圾动效

控制剪切——过渡页后的文字渐进

　　（1）控制旋转角度

▲戳动图查看GIF效果

　　在时间轴上设置的两个关键帧，分别对应旋转角度为0°和360°，即能实现围绕中心点的中心旋转效果，但这跟上述提到的围绕X/Y轴旋转有所不同，需要区分。

　　（2）控制透明度&坐标

　　这个部分涉及到人物的部分肢体动作，各动作分解如下：

走路动作

　　把人物素材拆分出来会发现，其实是一个受时间轴控制的脚部循环运动。

▲戳动图查看GIF效果

走路停下效果

　　需要在时间轴下设置事件，当时间轴播放达到拟定的数值时，时间轴暂停。

伸手捡垃圾&丢垃圾

　　控制手部素材的坐标和宽度，就能做出人物伸手动作。同理，丢垃圾的动作为控制垃圾的坐标和透明度。

　　（3）控制剪切

　　剪切是什么？

　　素材1开启剪切功能，素材2超出素材1的部分就会被隐藏，因此我们只要控制开启剪切功能的素材1坐标，素材2就会呈现渐进效果。

　　利用这个原理，还可以做出iPhone7发布会的快闪效果：

▲戳动图查看GIF效果

　　三、对象的线性迁移

　　元素位移变化除了时间轴，还能用缓动和运动这两个组件来实现，如果不需要太精准的运动变化，使用这两种动效会比时间轴流畅得多。

　　在iH5里，运动可以做匀速运动或匀加速运动（加速度不变），但缓动可以控制两点间的运动，改变物体的加速度，进行加减速变换。

　　对比一下匀速直线运动的曲线与缓动加速运动的曲线，可以看出缓动的加速度是在变化的。

　　使用方法：直接在元素下添加运动或缓动组件，通过调整属性设置不同的效果。

　　1.运动动效——简单的物理运动

　　下雨下雪、流星掉落、子弹射出、扔飞镖，或者是小游戏里面的接金币等等

▲戳动图查看GIF效果

　　2. 缓动动效

　　缓动组件的门道就多了，涉及各种复杂的缓动函数，不同曲线的区别主要是运动上加速度的变化（忘了中学数学的同学，快去百度补补课！）：

　　（1）easeIn缓进（先慢后快）——在场景切换上用得比较少，主要用在元素的运动上，比如重物的掉落（可使用二次进，控制加速度不变）、磁铁的吸引（可使用三、四、五次进，加速度会逐渐变大）上。

▲戳动图查看GIF效果

　　（2）easeOut缓出（先快后缓）——在场景切换上用得比较多，比如界面的展开、收起、出现、移动等，触发它的对象与它作用的对象往往是同一个。设计时，减速和加速动效往往是成对出现的，比如元素飞入时减速，飞出时加速。

▲戳动图查看GIF效果

　　（3）easeInOut缓进缓出（头尾缓、中间快）——通常在轮转切换的动画中使用，触发它的对象与作用的对象往往不是同一元素。比如iOS天气App的城市切换，点击天气导航，就会触发相关天气的场景。

▲戳动图查看GIF效果

　　（4）反弹进/反弹出——用于表现物体或者环境的物理质地，制造弹力效果，比如iOS的锁屏界面展开时稍微反弹，能让虚拟的锁屏变得真实、活泼。

▲戳动图查看GIF效果

　　在设计H5时，除了翻页效果，还能够加入上述所讲的各种各样的动效，不仅提高用户体验，也大大增加了趣味性。

　　然而，如果为了追求动效的酷炫，一味叠加太多动效也是不可取的。因为太多的动效会导致耗时太长，进入太慢，减缓了用户体验流程。

　　适度的、和谐的动效才能让你的H5大放异彩！

<END>

　　谷歌微软等科技巨头面试107道真题：你能答出多少？

　　90丨百度新闻源关闭后内容分发重回混沌时代，有一些状态将改变，有一些机会将出现！

　　86丨内容营销战略2.0时代，你的企业自媒体还在石器时代么？

　　84丨如何让原创内容更有商业价值？