如何制作H5动效？
9 个回答
你说的这个非常酷的动效其实就是：一镜到底 的动效（我把免费实现一镜到底H5动效的教程也一并写在回答里）。
一、什么是一镜到底动效H5？
H5中的一镜到底，保留了其在影视中所惯有的画面流畅性和场景带入感。通过在z轴上对画面间距进行控制实现酷炫的空间感，所带来的空间感通常伴随着强烈的穿梭的感觉，在视觉感官上，更具有震撼性。
二、一镜到底H5有什么优势？
这样的一镜到底H5，省去了手动翻页的繁，如电影镜头般连续的展现画面。镜头不cut、画面不切、一气呵成，空间感、场景感、穿越感惊现震撼人心，带来炒鸡炫酷要炸天看过不忘的视觉体验。
类似的这种一镜到底的H5还有《维多利亚的秘密》这样的展示效果超美的~~
三、免费制作H5一镜到底的攻略：
这么酷炫的一镜到底开发制作成本也不低，通常需要几万。如果你没有这么多预算的话，人人秀H5制作工具免费实现，3分钟就可以制作完成。你提前准备好设计素材，把素材全部存成是PNG格式（这点非常重要）
3.1附上一镜到底H5文字版教程
第一步 ：进入人人秀“个人中心”点击“创建活
一般前端都会说这个用CSS的scale变化来实现。
但是如果要把时间线、事件等控制好，大概率还是要使用一种专业级动画插件。我之前使用过gsap动画库，做这个动画是肯定可以的。
可以使用易企秀的功能实现
题主发的视频中的动态H5类型是一镜到底。
这可以用意派Epub360在线H5制作工具中的【一镜到底】组件来实现，具体操作方法可以在意派的教程中心搜到▼
意派Epub360上也有很多关于一镜到底的H5案例和模板可以参考，有需要的可以去看看~
意派Epub360可以实现的H5互动操作（点击、滑屏、拖放、拍照/上传、手写画板等）及动画（交互动画、播放动画、svg动画、精细动画控制、动画组等）、动效（出现动效、消失动效、效果动效）有很多，很难在这里一一阐述清楚，想系统了解的可以全面熟悉一下意派Epub360这款工具。
先制作一个网页，再让它动起来，输出gif格式即可
众所周知，一个元素，动往往比静更吸引眼球；
一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；
一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。
近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。
我们由浅入深来挖掘这动效制作的秘密，一个入门级的小问题：看上图这几个动画例子，大家是否能说出这动画是如何制作出来的呢？而又是如何在网页之上呈现的呢？
对，答案必须是设计师们都非常熟悉的gif小动画了，H5动效制作的第一手法，便是GIF了。
动效制作手法1：GIF
GIF图片擅长于制作细节的小动画，位图，优势在于“体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GI
首先找到一个在线H5制作平台，比如互动酷、MAKA、彩画网等等。下面以互动酷为例子。进入H5编辑界面，在左方和右方功能区就可以选择你设置想要的动效，都是十分酷炫的特效。
看起来不像是css的scale和GSAP弄的（虽然也能实现），更像是近期突然火起来的interactive canvas rendering。
今年的BestAwards上露脸的，大多都是交互性canvas了 - 没别的原因，就是因为能渲染的更酷，更流畅，占用资源更小，而且还有傻瓜软件可以用：Adobe Animate CC
这里是个官方教程： https://helpx.adobe.com/nz/animate/how-to/create-interactive-content.html
ps：因为暂时没有这方面的业务需求，所以我没有研究更多更深，如果我猜错了，麻烦告知哈 — 谢谢