首页 > 教程 > 关键词 > HTML5教程最新资讯 > 正文

玩转HTML5移动页面(动效篇)

2015-04-28 11:24 · 稿源:腾讯ISUX

作为一名前端,在拿到设计稿时你有两种选择:

1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢?

这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少。 同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为动效篇和优化篇

(1)  CSS3时序错开渐显动画 这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后当页面呈现后每个元素错开时间出现。 例子(忽略兼容前缀和无关属性):

效果就是两个元素分别从上面掉下来,这里有个小细节(keyframes),为了让掉下来的动画生动点,应该是在90%的时候先掉下一点点,然后瞬间在100%时回跳5px。

还有个细节,安卓2.3.*不能良好支持-webkit-animation-fill-mode,也就是渐变动画不能停止在最后一帧。有这样一个解决方案:

1.用Modernizr去检测是否支持这个属性,加上识别类.no-animation-fill-mode;

2.根据识别类采取以下措施:

(1)用js模拟同样效果;

(2)用css屏蔽掉动画;

(3)或者直接全部都用transition来做(不要keyframes)。

示例页面如下(查看DEMO):

(2) CSS3细节强调动画 一些局部细节如果还是渐现显示,会枯燥没什么感觉,例如标题、按钮等,需要一种强调。

分两种情况: 1.如果时间允许的话,基本做法是先把一个元素切成不同的块状,例如小人的手脚都切成不同图片,然后让它们重新组合,再通过赋予不同的CSS动画来让它生动起来,这里引用个webank的例子:

(查看DEMO

2.如果时间紧凑,又不像桑尼一样擅长于动画细节,可以使用一些辅助工具: Animate.css,通过直接预览选择想要的动效,然后下载它的CSS把对应的keyframe扒下来就好了(引用整个CSS是资源浪费)。

(3)SVG动画 SVG技术越来越不陌生,使用门槛也渐渐降低,而且SVG动画还可以使用CSS控制。 先看个生日页面,是个SVG的蛋糕:

(查看DEMO

可见SVG是很强大的!弥补了CSS3的不足。 然而这种动画也是略耗时,但有一种比较常用的,就是线条的描绘动画,CSS3比较难实现,这里可以用SVG,看图:

介绍一个PS插件svgArtisan(目前还未有主页),这个工具可以直接根据PSD的路径图层生成SVG图形。 接下来就简单了,将设计稿上的路径图形用插件生成对应的SVG,例如是这样的: (注意,其中的foreignObject标签内是不支持svg的浏览器会看到一张.m3-svg-nosupport标签下的图片。)

再使用CSS3的animation控制stroke-dashoffset:

效果不难吧!SVG还有各种用途,例如制作ICONFONT等,可以深入挖掘。

(4) 重力陀螺仪 想让页面更有层次感,不妨让设计提供一些碎片元素,例如彩花,星星之类,然后把它们单独切出来放画面前景,使用陀螺仪伴随着手机运动碎片也跟着运动,多么好玩! 这里提供一个工具可以轻松实现陀螺仪重力效果的:parallax.js 用法简单,定义一个parallax-obj的父类,把需要动的元素加上layer的类,然后设置动的范围data-depth:

(5) 背景音乐&音效 H5页面要炫酷,画面生动还是不够的,一定要配合生动的音乐。因此可以主动跟设计或产品沟通,让他们可以提供音乐资源,分分钟导致UV猛涨有木有!

当然,有了音乐,前端也不是直接引用的,还是有点要求: 1.音乐不宜过长,30s为佳,而且音乐要加上渐现渐隐效果,方便循环播放; 2.音乐体积要小,音质和流量,在手机上还是优先考虑流量吧。 一般背景音乐体积可以接受的范围是200K以下,若太大,可以使用格式工厂等软件,降低它的比特率和声道来改变体积。

接着,只需要简单引用:

这里有个问题,IOS是不能自动播放音乐的,一定要触发一个用户交互事件,例如点击。 但是有一种hack的方法可以让IOS微信侧页面自动播放(SAFARI依旧无效): 通过new一张图片,监听一张图片的onload事件,结束后回调执行音频播放audio.play()即可,原理估计是动了dom结构,相当于执行了一次交互。(有人也用过createEvent模拟,原理也是动了dom。) 因此,记得暴露一个音乐关闭/打开的按钮,不然肯定被用户骂死。

(6)有趣的loading Loading页还是要有的,万一用户网速慢呢? 以上做了那么多事,如果没有资源加载都是玩不来的,因此还需要一个loading的支持。一般情况下页面体积大于3m则要加上loading页。

然而loading还是可以做得很有趣的,一般的做法是: 1.引入品牌,例如APP宣传页; 2.引入有趣动画,放一个贱贱的人物跳舞给你看; 3.一切从简,用CSS3简单动画。

====最后总结====

最后,给一个例子结尾吧。 这是空间5.0预约页第二版,使用了以上的若干方法论,例如loading动画,CSS3动画,SVG星空连线,首屏星球重力感应,音乐(这里使用开启按钮后播放)等等。 (由于活动已结束,很多运营处都被删掉从简了,忽略那些细节)

(查看DEMO

当然,真正要做到高效制作动态H5页面,还是靠积累,因此平时做好的细节动画自己都积累起来,下次分分钟就能用得上。请继续阅读《玩转HTML5移动页面(优化篇)》

网友热搜:

  • 相关推荐
  • 大家在看
  • 马斯克放狠话:特斯拉一年内实现L5级自动驾驶

    被称为硅谷“钢铁侠”的特斯拉CEO马斯克再放狠话。日前,在2020世界人工智能大会开幕式上,马斯克表示:“我对未来L5级自动驾驶非常有信心,特斯拉有望在一年内完成L5级自动驾

  • 马斯克世界人工智能大会发言:今年有信心完成L5级别自动驾驶功能开发

    在今日召开的2020世界人工智能大会云端峰会上,特斯拉公司创始人兼首席执行官马斯克通过远程视频表示,特斯拉未来非常有信心实现L5 级别自动驾驶,甚至是完全自动驾驶。今年有信心完成L5 级别自动驾驶基本功能的开发。

  • HTC VIVE与ARVI VR携手拓展全球VR线下游戏版图

    全球创新技术领导者HTC VIVE?于今日宣布与VR线下娱乐内容的重要开发商ARVI VR开展深度合作,在全球范围内推广ARVI的VR密室逃脱游戏,共同拓展VR线下游戏市场,三年内有望触达数百个线下娱乐(LBE)场所,届时广大消费者将能够亲身体验逼真的互动式VR游戏。为了顺应密室逃脱游戏的迅速发展,自 2019 年 3 月起,HTC Vive就已经获得ARVI VR密室逃脱游戏的独家代理权。ARVI VR作为知名的密室逃脱游戏制作公司,相继开发了多款优质的VR密

  • 用户强烈要求下:微软让Edge地址栏重新显示“http://”和“www.”

    Edge浏览器变的更简洁了,但用户一点都不买账。Edge Canary 频道最新版本中做了一项很小但非常重要的调整:在地址栏上隐藏了“http://”或者“www.”,目的是让 URL 地址

  • 亚马逊开放PS5全线产品预订页面:主机、游戏和配件齐全

    虽然传言索尼于北京时间今天下午公布PS5价格、预订细节的传言宣告破灭,但细心的网友注意到,亚马逊澳大利亚悄然上线了PS5全线产品预订页面。所谓全线产品既包含主机本体、也有无光驱数字版、

  • 新Edge浏览器简化网址显示:默认隐藏http://www

    微软新Edge浏览器推出后得到好评,因为Canary/Dev等预览通道的出现,其软件更新速度也很快。日前,Canary版Edge出现变化,地址栏简洁化,默认隐去了http://www的网址前缀。想要查看包含协议

  • 毛老子固件内嵌花生壳PHTunnel,内网穿透实现局域网应用

    固件作为硬件设备的“灵魂”,担任着系统最基础、最底层的工作,决定着硬件设备的功能及性能,老毛子Padavan固件就是一款颇受技术控喜爱的路由器固件。 因为是基于开源项目的二次编译,老毛子固件比一般路由器自带的原厂固件功能更多、更强大,可用性和稳定性也还不错,不少爱折腾的技术控纷纷把自家的路由器刷成了老毛子固件,用起来表示“真香”。 在老毛子固件集成嵌入的多种功能中,「花生壳PHTunnel」是较受欢迎的一个,特别

  • 七爷:HT被低估时间越长,通缩拐点到来后的反弹力度就越大

    7 月 17 日晚,火币全球站CEO七爷在做客 BitUniverse 币优V姐访谈AMA直播,主题为“和七爷聊聊燃烧的HT”。直播中,七爷从他在清华创业经历开始,聊到区块链行业未来展望,涉及话题包括投资与趋势、初遇比特币、HT销毁与价值、火币重启上币、DeFi等。在本次直播中,七爷透露以下九大要点:1. 对于腾讯、特斯拉、比特币,相关一部分人都在早期判断出了价值,但并没有坚持持有。这就是人性。2. 截至 2020 年上半年,火币已累计销毁了

  • 中国最休闲城市:1/5长沙人每天5小时以上休闲时间

    央视财经《中国经济生活大调查(2019-2020)》即将于今晚21:30正式发布。赶在发布前,央视这两天也公布了部分数据。报告显示,在每天能拥有5个小时以上休闲时间的城市排名中,长沙人比例最高(

  • 无需公网 IP,花生壳 PHTunnel 助力 NAS 厂商低成本打造互联互通解

    原标题:无需公网 IP,花生壳 PHTunnel 助力 NAS 厂商低成本打造互联互通解决方案!数字经济的蓬勃发展,深刻改变了人们的生产和生活方式,无论工作、生活、学习还是娱乐,都离不开数据的支撑。随着数据体量的逐渐增大,也给存储体系带来前所未有的机会和挑战,云存储的概念逐步进入大众视野,NAS作为专业的云存储设备,以安全、高效、用途广的优势受到大众青睐。在为人们提供海量数据存储的同时,为方便用户随时随地远程访问数据?

  • 华为郭平:聚焦5G商业成功 充分释放5G网络红利

    7月27日消息,今日,华为轮值董事长郭平在2020共赢未来全球线上峰会上做开幕致辞,他表示,业界需5 “机” 协同,聚焦5G商业成功,充分释放5G网络红利。华为轮值董事长郭平做开场致辞 新冠疫情的爆发,给全球人们的生活、工作带来巨大影响,对全球经济带来巨大冲击。ICT技术在抗疫的方方面面能发挥巨大的作用。郭平表示:“作为一家ICT公司,我们有责任利用技术,和客户、伙伴一起抗击疫情,帮助运营商及企业客户,通?

  • 免费集成内网穿透,花生壳PHTunnel助力冠航私有云实现远程访问!

    万物互联时代,人们对各种网络应用和IoT设备提出更高要求。NAS作为专业的云存储,必须突破内网限制,满足人们远程办公场景下随时随地访问数据信息的需求。 杭州冠航科技有限公司旗下的私有云存储网关,是一款集成了企业级路由器、无线ac控制器、sd-lan异地组网、企业数据存储的多功能智能网络设备,为中小企业提供高速、安全的数据存储解决方案。但要突破内网限制,满足没有公网IP用户外网访问数据存储需求,是冠航科技一直以来面

  • 经典重现!HTC野火E2曝光:联发科P22处理器 水滴屏

    提起HTC WildFire(野火)系列相信70、80、90后都不会陌生,刚刚盛行安卓智能手机的时代,HTC WildFire绝对是小尺寸神器。7月16日,据外媒报道,HTC野火系列将推出新机,这款手机已经现身Goog

  • 5G资费降至69元 全民如何追新5G?京东小魔方带你看懂5G新品消费

    5G时代来了。 你还在单纯的以为5G只是一朵高岭之花吗?NO,不知不觉中,它已经渗透入了日常生活的方方面面。5G带来的不仅仅是使用体验的改变,它更带来了潮流的变迁,比如,你能想象银发群体已经冲到了5G潮流一线吗?你能想到5G手机在西部城市渗透率最高吗?你知道5G用户规模增长最快的是四线城市吗?日前,京东小魔方联合京东手机、智能供应链Y业务管理部发布了《 2020 年京东5G新品消费趋势洞察》,探索5G新生长的风向标,让追新之?

  • 5G丨诺基亚宣布成为亚太电信5G网络唯一供应商

    8月4日消息,据国外媒体报道,芬兰电信设备制造商诺基亚宣布,它已被中国台湾移动运营商亚太电信(APT)选定为唯一的5G(NSA/SA)供应商。亚太电信计划在今年晚些时候推出5G服务,并计划为其订阅用户提供云游戏、虚拟现实、增强现实和流媒体服务。据悉,诺基亚将支持亚太电信实现雄心勃勃的5G目标,具体来说将为其提供5G无线接入网络(RAN)和核心解决方案。此前,诺基亚曾表示,它是全球唯一拥有端到端产品组合的供应

  • 5G技术普及时代开启!联通自主定制5G CPE上市!

    CPE,英文全称为Customer Premise Equipment——客户前置终端设备。5G CPE提供移动运营商5G通信网和用户端Wi-Fi局域网之间的对接服务。直观来说,如果原来您家里的传统路由器是把有线宽带网络转成供笔记本、手机等使用的 Wi-Fi 网络,那么CPE还可以做的,是将 4G、5G无线蜂窝网络做了一次延伸和转换,然后以 Wi-Fi 网络的形式提供给手机、笔记本等各类终端上网。联通自主定制5G CPE来了中国联通5G CPE VN007 是中国联通上市销售的?

  • 99%的用户今年没必要上车5G!5G手机+4G套餐更香

    7月14日,回收宝手机价值研究院发布了“2020年上半年手机价值指数”白皮书。回顾了上半年的新机市场与二手机市场,为消费者还原了今年手机市场的全貌。白皮书显示,从今年年初开始,

  • 高通发布Quick Charge 5快充技术:0至50%电量仅需5分钟

    7月28日消息,日前,高通宣布面向Android终端推出最快速的商用充电技术Quick Charge 5,与前代平台相比,该平台不仅能够为智能手机提供前所未有的充电速度与效率提升,同时还支持一系列全新电池技术、配件和安全特性。据悉,Quick Charge 5有望成为面向智能手机提供100W以上充电功率的首个商用快充平台,可以帮助用户实现手机从零电量充至50%电量仅需5分钟。据官方介绍,Quick Charge 5的性能较前代平台充电效率提升70%

  • 《战神5》在列 索尼两款重磅独占曝光:PS5之父参与制作

    通过昨日的Xbox Game Showcase活动,微软展示了一批一方游戏,同时也宣告食言,因为至少有5款以上的大作并不会登陆Xbox One……索尼这边,话从没说得那么满,而且坚持独占战略。

    PS5
  • 法国表态不会禁止华为在法投资5G 华为5G最新消息

    法国表态不会禁止华为在法投资5G是什么情况?据路透社 7 月 21 日最新消息,法国财政部长勒梅尔当天表示,法国不会禁止华为在法投资5G。此前英国上周宣布将禁用华为后,其他欧洲国家对待华为的态度也受到关注。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签