H5长页四款常用动效和制作要领.docxVIP

H5长页四款常用动效及制作要领 [原创] 2016-10-20 小派 意派科技 H5长页是让H5“变轻”的良好方式，但是如果只是静止的长图片形式，可能会让H5显得有些“呆”，那H5长页有哪些简洁优美的常用动效呢？小派试着总结了四款，并邀请了体验案例设计师简要分享其用我们Epub360的制作要领。 注：1）下面部分术语是小派参考网络得出，可能存在不严谨之处，欢迎指正；2）点击蓝字超链接即可感受相关内容，建议复制链接 HYPERLINK /s/ng17mOWU3QmDorvHzeVgzw /s/ng17mOWU3QmDorvHzeVgzw在手机微信里阅读此文；3）学习模板可前往Epub360官网作品版块桌面版免费复制，搜索关键词即可找到。 视差滚动 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来出色的视觉体验，可以让H5轻巧，灵动。 体验案例： HYPERLINK /v2/manage/book/bnxn4z/ 万科：带你走进2000多年风筝史 制作要领： 核心组件：Layer图层、联动组件 按先前想好的“动作设计”，将素材导入到各自的Layer中，摆到设计好的位置。 添加关联组件，选其中一个Layer作为主控，选择正向，就是往一个方向滑动，不选，就是往相反方向滑动。因为Layer高度不一样，所以就产生了快慢的区别，视差效果就这么来的。 （Layer1：宽320，高2900）（Layer 2：宽320，高2850） 学习模板： HYPERLINK /v2/manage/book/41wttg/ 时尚类产品展示模板 —— Epub360推荐设计师 Maroon 位置触发 位置触发是指在H5里滑动页面到指定位置时，才能触发各种交互效果，在展示大量内容的同时，而不失趣味。 体验案例： HYPERLINK /v2/manage/book/c02man/ 2016万科滨水大宅新作 制作要领： 核心组件：启用长页面、锚点、序列帧 设置长页面和锚点，锚点尽量去控制动画组，这样可以方便后期的修改。 鱼是采用序列帧制作的游动效果，整体序列帧上添加了曲线或者直线运动的动画。描绘这种比较长的曲线动画我建议可以将浏览器视野先进行调整（ctrl+减号），绘制完成后再调整细节。 适当添加SVG动画，Epub360的SVG描绘和变形动画功能都是相当不错的体验，可以增加作品的精致感。 后期的主要工作就是调试动画的速度，在不同的系统平台上效果是有细微差别的，锚点的位置和动画的持续时间都需要耐心调整。 学习模板： HYPERLINK /v2/manage/book/s20c2i/ H5研究院大事记 —— Epub360推荐设计师 春颜秋色 飞过花开（直线+曲线运动） 直线+曲线运动是指H5页面随着某一元素的曲线移动而不断位移，元素在曲线运动的同时，一般会触发相应动画，可以说是线路图设计的经典组合。就下面的案例来说，有点飞过花开的感觉。 体验案例： HYPERLINK /v2/manage/book/yjci1d/ 彼得罗夫·玫瑰之旅邀请函  案例设计师：WU 制作要领： 核心组件：Layer、曲线/直线运动 飞机的曲线运动动画设置，需要注意留有足够的时间。 使用动画的出现控制，包括设置延迟时间以及出现方式，确保其它元素的渐现或飞入，与飞机轨迹匹配。 上面的设置都是在Layer画布里完成的，在Page里引入Layer后，给Layer组件设置向上的直线运动，与Layer里的飞机曲线运动，刚好形成反向运动。 学习模板： HYPERLINK /manage/book/u5h5va/present/ 飞过花开模板-ZA 附： HYPERLINK /forum.php?mod=viewthreadtid=321 案例制作详细攻略 —— 意派科技 老赵 SVG路径动画 SVG路线动画，简而言之，就是让SVG的描边像是有人绘制一样的动画效果，用上一般能提升作品的精致感，是H5线路图设计的经典效果。SVG动画也是我们Epub360的特色功能。 体验案例： HYPERLINK /v2/manage/book/xiuatn/ 优迈通讯：金融碰撞互联网 制作要领： 核心组件：SVG、Layer图层 制作初需想好每页走向，有一张完整走向图。 将素材按照走向图的位置放置Layer中，并在Layer里制作线条走向动效。这个案例中采用了svg的方式来控制线条动画，将原本平面中的线条全部用小段SVG线条进行替换。 每页交界处的线条需放缓速度，方便后续制作中画面衔接的调节，也方便用户阅读完该页的内容。 将制作好的layer放入page中，制作位移动画。先将layer看做一张静