Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >首发H5活动页心得 -- 企鹅FM鬼节活动页总结

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

原创
作者头像
kmokidd
发布于 2019-04-16 05:05:49
发布于 2019-04-16 05:05:49
7600
举报

- 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. 动画如何才有代入感 这个活动页面我个人最喜欢的地方就是星星砸下去的动画,感觉所有的戏份都在它身上:

踩到了一些坑

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

  1. 杀鸡就不要用牛刀了,能又快又好解决问题才最重要 下图是首页的截图,页面加载之后应该可以看到“胆量测试”下面的蓝色线条有一个动画。
  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就是这么简单

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何做一个让人闻风丧胆的H5
前言 最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师,在这个移动互联网叱咤风云的时代,每次看到朋友圈中被分享的各种花样 H5 页面,总是心痒难耐,也想做有着酷炫动画和带感声效的 H5 呢。回想到做鬼节活动页的时候,接近午夜零点还在调整页面效果,看着页面上渐隐渐现的可怕画面,活生生吓到了自己,也是蛮难忘的。作为刚刚来到活动页新手村的朋友,踩到了一些坑,所以让我进入正题吧。哦,等一下,请先扫一下二维码啦~ 与设计师的沟通
腾讯大讲堂
2018/02/12
1.4K0
如何做一个让人闻风丧胆的H5
📚一站式解决:H5开发全攻略,看这篇让你省时又省力
在 H5 中,我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素(对于 REM)或视口宽度(对于 VW)的大小变化而变化,从而适应不同尺寸的屏幕。
linwu
2023/07/27
1.3K0
写给设计师的移动页面适配小知识
话说从设计稿到前端页面实现,是产品流程中非常重要的一环,这个阶段决定了设计师设计的设计稿能否完美地变成真正的产品雏形。废话不多说,本文主要介绍以下三块内容:移动设备尺寸;前端适配方案;设计师与前端如何对接。
姬小光
2018/09/05
9640
写给设计师的移动页面适配小知识
zoom 和 transform: scale(x)
一般设计师给到UI工程师的设计稿是基于 iPhone6 的,也就是说我们一般会先按照 375x667 的分辨率来定位页面上的元素。一开始在做活动页面的时候,我是很担心兼容问题的:一个元素基本靠 position 定位的页面,到底要怎么在 iPhone4 上还能不遮挡到位于页面底部的按钮呢?路过的同事教给了我 zoom 大法,还有 scale 大法。嗯,所以这篇文章就是来讨论一下 zoom 和 transform: scale(x) 的。
kmokidd
2019/04/15
2.3K0
zoom 和 transform: scale(x)
经验分享:多屏复杂动画CSS技巧三则 - 腾讯ISUX
当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画。并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动: 感谢sh
腾讯ISUX
2018/06/29
1.7K0
搞定这些疑难杂症,向css3动画说yes
本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3动画也不是什么新技术,既然是要搞定它,好歹我们也得先看下别人做的一些东西吧,所以在此先向各位推荐几个比较好用的动画库: animate.css effeckt hover.css animatable 关于css3动画不得不说的几个属性 看完上面那些动画库,心痒就不如行动了。 说起css3动画,有一个属性我们绝对避不开了,那就是transform这个
IMWeb前端团队
2018/01/15
2.2K0
搞定这些疑难杂症,向css3动画说yes
移动端H5的一些基本知识点总结
来到这家公司之后,和以前的工作发生了很大的转变.以前我一直是做PC端页面的.来到现在这家公司之后,主要是做手机移动端的页面.
FungLeo
2022/05/05
5010
如何打造一个高效适配的H5
以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一遍分辨率测试和微调,这时想屎的心都有了。而且这些适配都是建立在已 知的分辨率尺寸库上,如果市面新出来一款分辨率尺寸机型,呵呵,又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口,那么就不会再有上面 这些烦恼,且开发效率快和维护成本会降低很多。 答案是有的,而且这种形式最早出现于 flash 全屏整站,前阵子拜读了举总介绍的一篇文章关于图
前朝楚水
2018/04/03
1.3K0
如何打造一个高效适配的H5
企鹅FM点歌台总结
企鹅 fm 点歌台是 2.5 将会新出的功能,其中有两个点觉得值得分享,一个是老生常谈轮子都不知道造了多少个的 banner 轮播,还有一个就是企鹅 FM 移动端对齐的弹幕。
kmokidd
2019/04/16
1.6K0
企鹅FM点歌台总结
QQ天气H5-前端完整解析
IMWeb前端团队
2017/12/29
2.9K0
QQ天气H5-前端完整解析
【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣。 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的 CSS3 动画效果。 先上 demo ,没有将精力放在兼容上,请用 chrome 打开。 本文完整的代码,以及更多的 CSS3 效果,在我 github 
Sb_Coco
2018/05/28
2.2K0
移动端H5页面开发坑点指南
前言 在平时的H5移动端开发时,我们难免会遇到各种各样的坑点,这篇文章就带着大家来看看怎么解决,文章较长,建议收藏方便以后查阅!
Javanx
2019/10/28
3.3K0
玩转HTML5移动页面(优化篇)
承接上期讲堂君推荐的《玩转HTML5移动页面(动效篇)》,动效篇说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏。 1动画雪碧图 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。 特别地,如果单张雪碧图面积实在太大,可以拆
腾讯大讲堂
2018/02/12
3.4K0
玩转HTML5移动页面(优化篇)
使用 CSS 构建强大且酷炫的粒子动画
粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。
Sb_Coco
2022/09/21
1.9K0
使用 CSS 构建强大且酷炫的粒子动画
H5活动宣传页通用布局技术解决方案
IMWeb前端团队
2018/01/08
1.8K0
H5活动宣传页通用布局技术解决方案
经验分享:多屏复杂动画CSS技巧三则
首先,使用active触发每一屏的动画,几乎已经约定俗成,应该也建议成为默认的行业规范。
疯狂的技术宅
2019/03/27
1.4K0
经验分享:多屏复杂动画CSS技巧三则
CSS 3D动画概述菜鸟级解读之一
本文介绍了如何通过CSS3动画和JavaScript实现各种复杂的效果,包括旋转、缩放、移动、透明度变化等。同时,还介绍了如何使用CSS3的@keyframes规则来创建动画,以及如何使用JavaScript来控制动画。此外,还探讨了如何使用CSS3的transform属性来实现各种效果,包括旋转、缩放、移动、透明度变化等。最后,还介绍了一些其他有用的CSS3属性,如box-shadow、border-radius、filter等,以及如何使用JavaScript来控制这些属性。
练小习
2017/12/29
1.1K0
CSS 3D动画概述菜鸟级解读之一
移动端H5开发之页面适配篇
最近开发并上线了一款H5项目,在这里想和大家分享一下关于项目中使用到的移动端适配技巧,如果对你们有所帮助的话,就多多点赞收藏😃各位看官老爷别着急,在讲页面适配之前,我们先来捋一捋viewport(视口)的概念~在Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种:布局视口、视觉视口和理想视口1.1 布局视口图片在移动端,布局视口被赋予一个默认值,大部分为980px,这保证PC的网页可以在手机浏览器上呈现,用户可以手动对网
三点水的洋
2022/06/10
7.8K1
移动端H5开发之页面适配篇
滑屏 H5 开发实践九问 - 腾讯ISUX
滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传、广告、招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大。如今滑屏H5可谓玲琅满目,数不尽数。 作为一个 UI工程师,接过很多类似的项目,也曾写过滑屏的插件,在经历了不同的需求的“洗礼”并踩过若干个坑之后,不禁反问自己:应该如何面对每一次类似的需求,在已有的经验下如何做到体验更好?如何节省工作量提高效率?面对性能优秀的 iOS 与性能良莠不齐的 Android 平台,又如何做到体验统一与性能最优? 第一问:拖拽翻屏
腾讯大讲堂
2018/02/12
3.9K0
滑屏 H5 开发实践九问 - 腾讯ISUX
H5 和 CSS3 新特性
HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
Krry
2018/10/15
2.5K0
推荐阅读
相关推荐
如何做一个让人闻风丧胆的H5
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档