深度揭秘上百种H5动效

   <p>以数位在职的资深H5设计师的动效使用情况为参考，整理出以下揭秘资源。</p>    <p>恐怕很多接触过H5制作的童鞋都会纳闷</p>    <p>N种动效摆在自己面前</p>    <p>用起来时却十分别扭</p>    <p>画面被自己搞得鸡飞狗跳似的</p>    <p>那么，H5动效的选取有迹可循吗？</p>    <p>有！</p>    <p>我根据目前广大H5设计师的动效使用情况</p>    <p>总结了一份H5动效使用手册，希望你能从中受益并拟出自己的套路。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6c531320c697a099885132f6edc98af2.gif"></p>    <p>动效对H5的作用体现在两个方面：</p>    <ul>     <li>功能性。引导用户点击和翻页，吸引用户做长时间的视觉停留。</li>     <li>趣味性。加强用户体验的舒适度，提高愉悦感。</li>    </ul>    <p>它的制作手法有很多，比如《H5动效的常见制作手法》曾经归纳如下：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2d584cab13754b6fe708ea314c9d2d83.png"></p>    <p>根据上表，不同动画需要运用多种制作手法，可能需要掌握一定的编程技术。但就目前国内的H5制作平台而言，多数预设有一定的动效，我们可以直接选取使用。如果想做出类比GIF、Video等交互动效，或者类比PPT式的平面动效，可以试用iH5.cn预设的动效组件，效果还甚至优于Flash。</p>    <p>动效是元素的位移、大小、角度和透明度等随时间的变化。</p>    <h3><strong>一、基础动效</strong></h3>    <p><strong>1.翻页动效</strong></p>    <p>使用方法：在舞台设置好滑动页面方式后，点击页面，选择向前/后翻页的效果。</p>    <p>淡入淡出、平移、平移渐变、覆盖视差、放大缩小、翻转、自上翻入、掉落、旋转出现（离开）、翻书、方块旋转、弧线、交替翻页、碰撞翻页。</p>    <p><strong>2.元素动效</strong></p>    <p>在每个素材下添加动效，通过调整动效的属性设置各种各样的出场动效。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/cb6118b77b690fe0a595b13d9cdb2a95.gif"></p>    <p>对基础动效进行有机组合，可以搭配出N种可观的动效展示形式。特此，我翻出了今年毕业季时一名大四女童鞋做的H5：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8244679f36c909a8ed77e9733976f07b.gif"></p>    <p>这种效果类似“刷墙”动效，实质上只是用白色的底图遮盖图片，然后加上iH5预设的“向上/向下飞去”动效。一般为了画面的和谐，一个H5页面中最多使用3种动效，不同素材搭配不同动效。</p>    <ul>     <li>整体背景素材：一般用最简单的动效展示素材，不然会给用户迟钝的感觉。</li>    </ul>    <p>如：进入离开、淡入淡出、展开、左右摇摆等；</p>    <ul>     <li>背景里部分素材：增加背景的趣味性，可以是一朵旋转的小花，或者是漂浮的云朵。</li>    </ul>    <p>如：旋转、闪烁、弹跳、心跳、钟摆等；</p>    <ul>     <li>重点强调素材：运用夸张的动效来达到吸引眼球的效果。</li>    </ul>    <p>如：缩放、掉落、晃动、弹弹球、翻转、滚动、出现消失等；</p>    <h3><strong>二、时间轴动效</strong></h3>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/37ccc9c9bb4d647ce2130fd0109202e9.gif"></p>    <p>▲效果图摘取自UI中国_Vision</p>    <p>时间轴动效的原理和原生的动效组件类似，都是通过改变元素的 <strong>位置、大小、透明度</strong> 等促成动效效果。</p>    <p>因为时间轴存在单位时间，因此可把玩法大致分为两种： <strong>单位时间内控制单一属性、控制多个属性</strong> 。演示工具iH5.cn，不完全举例如下——</p>    <p><strong>1.单位时间内控制单一属性：</strong></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6387fcc83eb2d1c880c7e7ec891b17e8.gif"></p>    <p>素材位移一定距离的轨迹， <strong>时间间隔越短，运动速度越快</strong> 。把时间节点控制得尽量短，元素进出的动效效果会越明显。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2d207cfe7bbff8f871a21e72f3c031b6.gif"></p>    <p>不同素材间存在上下层关系，如果属性（X/Y坐标、宽高）一致， <strong>上层素材会默认遮盖下层素材</strong> 。所以我们只要通过时间轴控制上层素材的坐标、大小、角度，直至覆盖下层素材，即可完成素材间的遮罩效果。</p>    <p>现在设计师还习惯耍一个小心机，先把一个遮罩用的素材中间挖空，做成PNG，然后再覆盖于被遮罩的图片上层。当我们在时间轴的0秒处控制该遮罩素材的宽高变大时，此时画面就不存在遮罩效果（因为遮罩图片为中间镂空的PNG，宽高被放大后，自然中间镂空的部分就变大直至退出画面范围），然后在时间轴1秒处把遮盖的素材收缩回来，形成遮罩。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/af1af444b52dce9a75e1e0a5db9fb686.gif"></p>    <p>可实现的遮罩效果还有很多，比如：</p>    <ul>     <li>渐进闭合遮罩</li>     <li>渐变式遮罩</li>     <li>弹窗显示</li>    </ul>    <p>可以根据实际需要实现。有趣的是，它还支持素材的X/Y轴旋转，借此机制搭配时间轴可以做出伪3D的循环以及折叠效果。</p>    <p>以X轴旋转举例，只需在时间轴下设置两个时间节点，控制素材 <strong>绕X轴做0°至90°旋转</strong> ，就能做出素材 <strong>“翻倒”、“双向折叠”的伪3D效果。</strong></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/3f456fd987b09144a493c14630e85423.gif"></p>    <p>需要注意的是，左右折叠的两张图需相切，保证X坐标一致，这样才不会让观者察觉到猫腻！（毕竟这背后只是两张图的翻转）</p>    <p><strong>2.单位时间内控制多个属性：</strong></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d470679c90109aca4dfba4c47a1320d2.gif"></p>    <p>这种类型对时间轴的掌握要求很高，因为在某一时间节点上，可能你需要 <strong>同时控制大小、坐标、透明度、旋转角度等多个属性</strong> 。而且这不局限在单一素材上，可能是几个素材的结合。</p>    <p>比如 <strong>橡皮糖式滑动效果</strong> ，需要同时在时间节点上设置素材的 <strong>高度&Y坐标变化</strong> 。</p>    <p>操作上不难，诀窍在于需要在 <strong>滑动时间轴</strong> 属性栏下设置 <strong>【自动跳转控制点】</strong> 功能。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f9d97b77cc3dc23d435475349c62bd75.gif"></p>    <p>当用户进行滑动动作时，时间轴会自动播放到 <strong>下一时间节点</strong> ，常用于制作 <strong>响应式的动效。</strong></p>    <p>实际制作中对时间轴的应用可能会更加错综复杂，推荐观摩在iH5.cn上发布的《你知道另一个世界，还有一个你吗？》，这是设计师小牙制作的时间轴动画H5， <strong>里面涉及的动效全都用时间轴制作</strong> 。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2f039d593c0e5e404046c67dc6b70eba.jpg"></p>    <p>里面每一个页面动效都是匠心级的，涵括的时间轴动效拆分如下：</p>    <ul>     <li>控制旋转角度——Loading页和主页的翻转</li>     <li>控制透明度&坐标——小人捡垃圾动效</li>     <li>控制剪切——过渡页后的文字渐进</li>    </ul>    <p>（1）控制旋转角度</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/05b0c962f1ee40bd254b6baf3d347f96.gif"></p>    <p>在时间轴上设置的两个关键帧，分别对应旋转角度为 <strong>0°和360°</strong> ，即能实现围绕中心点的中心旋转效果（从0°转至360°），但这跟上述提到的围绕X/Y轴旋转有所不同，需要区分。</p>    <p>（2）控制透明度&坐标</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/9c1865665a764feba2d3dad1cc7125e9.jpg"></p>    <p>这个部分涉及到人物的部分肢体动作，各动作分解如下：</p>    <ul>     <li>走路动作</li>    </ul>    <p>把人物素材拆分出来会发现，其实是一个受时间轴控制的脚部循环运动。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d8b8f40bdd8f1fb4b321cfea4ab13ffb.gif"></p>    <ul>     <li>走路停下效果</li>    </ul>    <p>需要在时间轴下设置事件，当时间轴播放达到拟定的数值时，时间轴暂停。</p>    <ul>     <li>伸手捡垃圾&丢垃圾</li>    </ul>    <p>控制手部素材的坐标和宽度，就能做出人物伸手动作。同理，丢垃圾的动作为控制垃圾的坐标和透明度。</p>    <p>（3）控制剪切</p>    <p>剪切是什么？</p>    <p>素材1开启剪切功能，素材2超出素材1的部分就会被隐藏。因此我们只要控制开启剪切功能的素材1坐标，素材2就会呈现渐进效果。</p>    <p>利用这个原理，还可以做出iPhone7发布会的快闪效果：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/86525c0c32aa104315613423202ba214.gif"></p>    <h3><strong>三、对象的线性迁移</strong></h3>    <p>元素位移变化除了时间轴，还能用缓动和运动这两个组件来实现，如果不需要太精准的运动变化，使用这两种动效会比时间轴流畅得多。</p>    <p>在iH5里，运动可以做匀速运动或匀加速运动（加速度不变），但缓动可以 控制两点间的运动，改变物体的加速度，进行加减速变换。</p>    <p>对比一下匀速直线运动的曲线与缓动加速运动的曲线，可以看出缓动的加速度是在变化的。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/943a2b44ac70fd8cc25beb8c95ad35be.jpg"></p>    <p>具备物体加速度的线性运动，如果单纯用时间轴做，恐怕你需要时一名物理学霸才行。不过也不是没辙，iH5.cn的运动和缓动组件就是处理线性运动的，直接在运动素材下添加运动或缓动组件，通过调整属性设置不同的效果。</p>    <p><strong>1.运动动效——简单的物理运动</strong></p>    <p>下雨下雪、流星掉落、子弹射出、扔飞镖，或者是小游戏里面的接金币等等</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/cf8851d9171f83f77e3200bca377fa91.gif"></p>    <p><strong>2. 缓动动效</strong></p>    <p>缓动组件的门道就多了，涉及各种复杂的缓动函数，不同曲线的区别主要是 <strong>运动上加速度的变化</strong> （忘了中学数学的童鞋，快去百度补补课！）：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/89068fb19549cdd7ab815842c23e5efa.png"></p>    <p>（1）easeIn缓进（先慢后快）——在场景切换上用得比较少，主要用在元素的运动上，比如重物的掉落（可使用二次进，控制加速度不变）、磁铁的吸引（可使用三、四、五次进，加速度会逐渐变大）上。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/605ad230d6cd636a9c923a3de331c25e.gif"></p>    <p>（2）easeOut缓出（先快后缓）——在场景切换上用得比较多，比如界面的展开、收起、出现、移动等，触发它的对象与它作用的对象往往是同一个。设计时，减速和加速动效往往是成对出现的，比如元素飞入时减速，飞出时加速。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a6712d38cf99b0dff774ec0dd346b81b.gif"></p>    <p>（3）easeInOut缓进缓出（头尾缓、中间快）——通常在轮转切换的动画中使用，触发它的对象与作用的对象往往不是同一元素。比如iOS天气App的城市切换，点击天气导航，就会触发相关天气的场景。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/93e1eeb9aad00bd2c4ca286c216ce3e1.gif"></p>    <p>（4）反弹进/反弹出——用于表现物体或者环境的物理质地，制造弹力效果，比如iOS的锁屏界面展开时稍微反弹，能让虚拟的锁屏变得真实、活泼。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/4ef66f2db139422c6a098300ee0ee367.gif"></p>    <p>在设计H5时，除了翻页效果，还能够加入上述所讲的各种各样的动效，不仅提高用户体验，也大大增加了趣味性。</p>    <p>然而，如果为了追求动效的酷炫，一味叠加太多动效也是不可取的。因为太多的动效会导致耗时太长，进入太慢，减缓了用户体验流程。</p>    <p>适度的、和谐的动效才能让你的H5大放异彩！</p>    <p>以上，即为全方位的H5动效使用解析，希望对你有帮助啦！</p>    <p>如今年尾将近，在这里赵四感谢大家今年来对我的支持！预祝大家鸡年新年快乐！万事如意！！</p>    <p>（现在就拜年是不是有点早啊喂！）</p>    <p>好啦，咱们下期再见~拜</p>    <p><strong>参考资料：</strong></p>    <p>《H5动效的常见制作手法》： <a href="/misc/goto?guid=4959730661492071701" rel="nofollow,noindex">https://isux.tencent.com/h5active.html#comment-form</a></p>    <p>《缓动函数速查表》： <a href="/misc/goto?guid=4959660098781606599" rel="nofollow,noindex">http://easings.net/zh-cn</a></p>    <p>《动效设计基础（一）：运动曲线与缓动》： <a href="/misc/goto?guid=4959730661615544778" rel="nofollow,noindex">http://ued.qq.com/2015/07/28/dynamicefficiencydesign1/</a></p>    <p> </p>    <p>来自：http://www.ui.cn/detail/193639.html</p>    <p> </p>