首发H5活动页心得 -- 企鹅FM鬼节活动页总结

- 2015年的老文,搬运存档用 -

作为一个UI工程师,在这个移动互联网叱咤风云的时代,每次看到timeline中被分享的各种花样H5页面,总是心痒难耐,也想做有着酷炫动画和带感声效的H5呢。刚好企鹅FM为了迎接中元节,要做一期相关的活动页面,关键是宣传的内容用的还是盗墓笔记,盗墓笔记和盗墓笔记啊。作为一个盗(ge)墓(sao)脑残粉,非常高兴能参与制作,还是职业生涯中第一个有着酷炫动画以及动人声效的H5呢。

作为刚刚来到新手村的朋友,踩到了一些坑,所以让我进入正题吧。哦,等一下,请先扫一下二维码啦~

前期沟通

在接到了需求以后,先是看视觉稿和整个活动页的流程,再设想一些动画效果后去和产品以及设计师沟通的。设计师可能没有出动效,但是页面上的动画肯定会有他们的考虑。所以在沟通的时候,如果作为写动画的我们能带着对页面的思考,还可以补充或者添加一些动画效果。

动画新手有的时候会天马行空想到一些奇怪的效果,可能会不符合整体设计风格,可能会违反现实物理规律,有自己的想法,还要和产品设计确认。比如这个页面:

一开始是做成了先出现手电筒,再出现光,所以刚开始手电筒上不会有那层黄绿色的光。后来设计师提醒,如果完全没有光源,手电筒也应该看不到。所以后来改成了现在的方案。物理定律什么的,我才记不清了呢T T。

P.S. 做动画的时候铭记动效14原则,基本上动画的效果不会跑偏。

效果实现

仔细想想,这个活动页面并没有用到什么高深技巧,基本上是用 position 定位和 CSS3 动画完成的。不过在写页面之前,还是有不少担心的:

  1. 页面兼容怎么做 按照 iPhone6 的尺寸确定元素的位置,然后用 zoom 或者 transform: scale(x) 拉伸页面或者拉伸元素。在实际开发的时候,我完全混乱了这两个属性的用法,所以稍作研究,对此有兴趣或有疑问的同学,请移步 km 文章《zoom 和 transform: scale(x)》
  2. 3D 变化效果怎么实现 大家应该早就听说过或者使用过 perspective 和 perspective-origin 这两个属性了,作为初次真正使用到 3D 动画的新手,看了各种关于 3D 动画的解释之后觉得3D 动画的原理大概是这样的:

简单粗暴地说,请想象你是站在上图中的红点位置,你距离物体的长度叫做 perspective,眼睛的位置是 perspective-origin。好了,现在站定位置,去看这个物体就能看到物体投影在某个平面上的效果,这里的平面就是我们的显示屏。 关于 perspective-origin,可以看看这个demo。 说了这么多,在实际运用中,我还是找了一个生成器。 得到的效果大概是这样的:

想要重点说一下磁带的实现,主要牵涉到的图片资源是下面这几个:

磁带被分成了3个部分,磁带底部,磁带封面和磁带。其中封面和磁带是正视图,需要使用 3D 旋转,让这两个元素“躺下去”,而且为了保证这三个元素之间不会因为屏幕的缩放,出现错位的问题,需要保证磁带封面和磁带的定位是基于磁带底部的。其实磁带上还有两片盖子,不知道大家有没有注意到。其实这个盖子是左右对称且中心对称的,所以完全可以只用一张图片完成这样的效果,用 transform: scale(-1, 1); 和 transform: scale(1, -1); 实现。

  1. 动画如何才有代入感 这个活动页面我个人最喜欢的地方就是星星砸下去的动画,感觉所有的戏份都在它身上:
一开始我的设想只是星星砸下去,感谢导师 @markqin 提的建议:星星砸下去的时候要有灰尘溅起或者火星四溅的效果。后来和设计@leonou 和@lokisschen 商量,最后用了灰尘溅起的效果。丽达 @chandleryu 看到效果后还有提议星星背后的铁板应该要有震动的效果。不过当时因为时间关系,震动的效果有点不好添加,所以放弃了,这一点感觉有一些遗憾。 可能页面新手的经验不够,很多动画的效果因为有限的想象力所以不太完善。这个时候和身边经验丰富的同事请教是很有效的方法。同时,一定要多看B站拓宽视野才行哦。

踩到了一些坑

页面布局并不复杂。基本上使用 position: absolute; 来实现的。在实现过程里,遇到了一些问题就有了以下几条整理:

  1. 杀鸡就不要用牛刀了,能又快又好解决问题才最重要 下图是首页的截图,页面加载之后应该可以看到“胆量测试”下面的蓝色线条有一个动画。
故事是这样的,自从 SVG 帝王@janilychen 带着神器 svgartisan 降临,做页面的时候总想加上一点 SVG 元素。然而这个页面上的蓝色线条因为加上了一些特效,所以导出 SVG 后还要二次处理,而且 SVG 的代码你懂得,它总是有点长。在问了帝王很多遍以后,他说“其实控制这张图片的宽度就好啦”。改变宽度在性能上来说,并不好,但考虑到这个页面也只有这里发生了重绘,所以还是用图片+宽度控制来实现了。 不知道大家会不会为了某一种技术而去做某一件事情,但其实完成那件事情才是真正的目的,却因为那个技术而耽误了不少进度,这样就有点进入了炫技的误区。一切还是以完成需求为第一目标。
  1. 答应我,伪元素上就不要做动画了 伪元素真的是神一样的存在,现在一个标签就自带了两个儿子,不知道为什么就有种金闪闪的感觉。但是伪元素上的动画真的很坑,年少无知,页面都写完了,发现在iOS上美如画的动画效果,到了小米和魅族上就……总之看到屏幕那一刻我是这样的:

Android 上坑多,不要一次应用太多新技术。比如在魅族上用 flexbox 布局,就要加上display: -webkit-box;。还有一个教训就是,页面果然应该做一个测试一个啊QAQ。因为这个项目是重构和前端并行开发的……把伪元素改成实际 DOM 元素的时候,是怀着一颗对不起前台@nicholguang 的心的。

  1. 请写好注释 合作的前台同学需要看UI同学的注释才能知道什么时候要加什么class,想到刚刚开始接需求的时候,从来不写注释…真是对不起前台同学T T 现在我个人的注释是这样的:

也看过组里不同同事的注释风格,大同小异,主体思想就是“在XX时候添加XX class”这样,和前台同学约定好就可以~

  1. 拿到设计稿,先思考 现在不管是活动页的设计稿还是产品页的设计稿,逐渐以 375x667 的 iPhone6 为基础。但是实际生活里,这些页面是会出现在细细长长的 iPhone5、480px 高度的 iPhone4 还有大屏幕的 iPhone 6+,更不要说在三星小米魅族一加等等等等尺寸都不知道怎么办才好的 Android 系列上打开会是什么gui。 拿这次的活动页面设计稿来说,与用户产生交互的按钮在页面篇底部的位置。有一个前提,为了兼容不同宽度的屏幕,所以页面是基于 iPhone 6 的 375px 用 zoom 属性进行缩放,可以看出iPhone 5 和 iPhone 4 的宽度一样,而且看设计稿,页面元素是从上到下分布的:

也就是说,使用相同的 zoom 值,满足了 iPhone5 的页面效果,但是在 iPhone4 上,按钮就会偏底,页面整体感觉也偏底。但是 zoom 值不能随便更改,否则红框中的录音机图片的左右边界就会显示出来。所以要针对 iPhone 4 调整元素的之间的间距,最终的效果大概是这样的:

可以看得出效果并不是很好,整个页面非常的拥挤,所以在这个情况下,我觉得用统一 zoom 值来调整有点一棍子打倒了,如果一个个元素微调,那么最好效果会好得多。加上 zoom 会有一定的性能问题,组里的同事有些是 zoom 调整,也有给每个元素加 class 通过 transform: scale(); 调整的。重构最神奇的就是,条条大路通罗马,怎么样都能达到自己想要的视觉效果,但是中间会因为各种原因,实现的方式不太一样。

拿到设计稿一开始就先看看这个设计稿的布局,有一些是从页面顶部到底部都有效果的,这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保证页面完整呈现;或者在不影响交互的情况下,隐藏哪些元素。有的时候页面上元素比较集中,这个时候就要考虑在 iPhone6+ 这样的大屏幕设备上,要不要调整间距使得页面不会太空旷。

要知晓设计稿背后的含义,不是一拿到就开始做了,有些元素其实是要整体考虑的。有些乍一看好像是用 position 定位,分别写 top 值就好。殊不知,设计师真正要表达的是,作为一个整体,它们在页面上要绝对居中。没有 get 到这个 point,兼容的时候就要哭了。

工具/网站推荐

  1. 查看设备的屏幕参数:http://mydevice.io/
  2. 设计keyframes:http://cssanimate.com/
  3. 动画灵感哪里找:http://codepen.io/https://dribbble.com/

参考资料

  1. 【前端开发】CSS3 3D就是这么简单

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区