哈利波特20周年，这支H5竟然疯狂刷屏了！

实现关键技术点：

① 使用长页面进行文字图片的排版组织，实现页面的上下滚动

② 给文字图片添加直线运动动画

③ 使用关联控制组件控制动画，实现滑动时文字图片左右移动的效果

④ 需要多个关联控制组件，实现文字图片移动不同速度

详细教程： 哈利波特20周年H5案例解析

2、大量运用序列帧动画

之前多数的刷屏H5，大都采用了内嵌视频的形式呈现，视频的形式较重且不利于交互。序列帧小而轻的优势明显，这支H5中也大量运用了序列帧动画的形式来展现。比如，由第一个文字场景切换到第二个长页面时的转场过渡：

小编看了下，整个转场过渡一共用了50张序列帧来完成的。

后面文字破碎的效果也是由序列帧来完成：

3、揭秘“遮罩效果”

在进入第二个场景后，文字的遮罩效果是不是让你大吃一惊？其实，这个效果只是用了点小技巧“骗过”你的眼睛：

设置相同颜色的文字和背景，只要红色矩形框移动到上面，就会显示文字，看起来就像是文字在自动显示隐藏了！当然，除了亮点，还有些细节上的缺憾：

比如，H5中有处场景“选一个你想学的咒语”，其实这个手写咒语只是单纯为了触发了下方的文字效果而设置的...只有点击“离开课堂”才能进入下一画面，这在引导的逻辑上有些奇怪，如果换成手写咒语后触发效果并跳转至下一场景，体验上应该会比较流畅。

这支H5在交互体验上的创新，相比之前刷屏的H5，是极为少见的，在H5中算是新的尝试。当然，这支H5也并非完美，过于着重技术与效果的展现，反而忽视了内容本身，这也导致许多包括小编在内的哈迷们，在看完这支H5之后，并未勾起对哈利波特的怀念与记忆，更不要说那些并不粉哈利波特的吃瓜观众了，基本上看完就忘了...

最后一点，关于网易H5抄袭Device6，小编也是今早在微博上刚看到的，其实无论是H5还是设计中，模仿和学习他人的作品都是普遍存在的，这也是较好的提升自我水准的方式。但是，如何把握好借鉴和抄袭之间的尺度，特别是在这么大的商用案例中，处理不当很有可能整支H5所耗的时间心血就白费了，甚至只能走向无奈下线的结局。

以上。

关注更多H5设计、案例、资讯