前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动)。主要是新品牌的推广需要,当然也有给公司以前老客户做的案例。今天主要总结下为新品牌开发的2个h5推广;就主要的运用技术,页面优化,以及存在的短板做总结。

一、主题与设计;

2个h5主题主要与4.1愚人节与5月的母亲节做对应;然后要比较婉转自然地为新品牌作铺垫,自然推广是主要的目的,但是又不能那么直白明显;所以2个h5分别选择了虚拟产品介绍与游戏参与为设计思路;主要设计图如下:

愚人节:       扫描体验

母亲节:     只能微信扫描体验

2个h5 分别以流程展示和游戏互动参与为操作主线进行,在最后通过时节的特点(愚人节自然是整蛊咯,母亲节则是温馨情感)导向品牌网站。个人对UI的整体设计还是比较认可的。

一、主要的技术点与亮点;

两个h5的UE交互比较相似,所以在技术层面上也比较贴切。整体没有太大的难度,与之前开发的H5互动页面技术采用差别不大;不过创意总是无限的,根据设计师的设计理念,并与之交流后确定的交互展示方式算得上是这2个h5的一大亮点。围绕效果对采用的技术作分析总结。

1.重力感应动画效果,摇一摇;

  项目里已不是第一次运用html5手机api,时至今日,几乎所有智能手机都很好地支持了DeviceOrientation 和DeviceMotion 这个2个手机接口;根据设计配合了css3的transform动画,营造了视觉差的效果;代码实现也是比较简单,单纯地调用接口代码即可;至于摇一摇动能,之前的文章也有提到过,so,不复赘述。

  1. window.addEventListener('deviceorientation', function(e) {
  2. var x = parseInt(e.gamma);
  3. var w = parseInt(0.4*x);
  4. if(Math.abs(x) < 80){
  5. $('.p0_cen').css('webkitTransform',' translate3d('+0.8*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) ');
  6. $('.p0_tip').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) ');
  7.  
  8. if($('.p1').hasClass('on')){ //p1
  9. $('.p1_bg').css('webkitTransform','translate3d('+1.5*w+'px,0px,-100px) rotate3d(0,1,0,' + 0.8*w + 'deg) scale(1.5)');
  10. $('.p1_tit1').css('webkitTransform',' translate3d('+1.4*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) ');
  11. $('.p1_tit2').css('webkitTransform',' translate3d('+1*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) ');
  12. $('.p1_tit3').css('webkitTransform',' translate3d('+1.2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) ');
  13. $('.p1_tit4').css('webkitTransform',' translate3d('+.7*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) ');
  14. $('.p1_bot').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 0.6*w + 'deg) ');
  15. };
  16. };
  17. });

2.帧动画,css spite,css animation;

  页面中的动画效果主要还是由css3 的animation组成,比较直观可控;由于设计的特殊性,需要用到大量仿真的场景动画效果,这时候显然是图片输出为主,尽管css sprite动画也可以做到,不过对于大帧数的效果,一个是不易导出整张图片,存储大小过大,另外一点就是不利于网页加载速度;所以用js控制images替换的帧动画比较合适。当然,提前预加载图片,时间控制,与音频的同步也是需要注意的细节。

  1. var barTimer = setInterval(function(){
  2.  
  3. if(num < 52){
  4. var path = 'res/img/p5/all_000'+num+'.jpg';
  5. $('.p5_anigla').attr('src',path);
  6. num++;
  7. }else{
  8. clearInterval(barTimer);
  9. };
  10.  
  11. },50);

3.html5 <video>的使用;

  由于母亲节设计的原因,在初始loading完资源后会涉及到视频的自动播放,好的一点是在微信内置浏览器里,可以自动播放,外置浏览器比如safari还是需要用户交互才能执行,所以根据项目的运行环境还是需要做不同的事件处理;

  另外一点值得注意的就是,在微信内置浏览器里非wp.weixin.com域名下的视频资源,在安卓下引用会出现各种各样的播放组件(比如播放完后会出现播放按钮,视频下方的进度条等;),ios暂无此等问题;所以,在运用视频的时候就需要针对安卓用户考虑是否接受这样一个效果体验;否则,还是做平台的不同处理吧。

4.移动自适应的优化;

  此次还有一点就是针对以前的页面适配问题再次作了一次普遍的优化;由于市面上的各种显示屏大小,分辨率的存在,间可能减少在码css的时候针对分辨率做媒体查询;所以,结合网上的一些代码案例,将之前的纯rem,依靠screen width适配的方案进行了提升:

  1)约定了基础设计图纸的大小;

  2)根据屏幕高度采取了比例缩放,使得布局不再仅仅依据屏幕宽度做调整;

  1. !function(win, option) {
  2. var count = 0,
  3. designWidth = option.designWidth,
  4. designHeight = option.designHeight || 0,
  5. designFontSize = option.designFontSize || 20,
  6. callback = option.callback || null,
  7. root = document.documentElement,
  8. body = document.body,
  9. rootWidth, newSize, t, self;
  10. //返回root元素字体计算结果
  11. function _getNewFontSize() {
  12. var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
  13. return parseInt( scale * 10000 * designFontSize ) / 10000;
  14. }
  15. !function () {
  16. rootWidth = root.getBoundingClientRect().width;
  17. self = self ? self : arguments.callee;
  18. //如果此时屏幕宽度不准确,就尝试再次获取分辨率,只尝试20次,否则使用win.innerWidth计算
  19. if( rootWidth !== win.innerWidth && count < 20 ) {
  20. win.setTimeout(function () {
  21. count++;
  22. self();
  23. }, 0);
  24. } else {
  25. newSize = _getNewFontSize();
  26. //如果css已经兼容当前分辨率就不管了
  27. if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) {
  28. root.style.fontSize = newSize + "px";
  29. return callback && callback(newSize);
  30. };
  31. };
  32. }();
  33. //横竖屏切换的时候改变fontSize,根据需要选择使用
  34. win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
  35. clearTimeout(t);
  36. t = setTimeout(function () {
  37. self();
  38. }, 200);
  39. }, false);
  40. }(window, {
  41. designWidth: 640,
  42. designHeight: 1136,
  43. designFontSize: 100,
  44. callback: function (argument) {
  45. /*console.timeEnd("test")*/
  46. }
  47. });

三、缺陷与短板;

由于开发时间与进程等各种原因,几个h5堆积起来也是蛮紧张的,即时基础模板与样式库大同小异,不过还是聊下在各种调整与优化中出现的不足;

1.css3 3D动画

  1)很早之前的h5使用css3 3D animation的时候已经提出过这个问题,就是在ios系统上的ratateX,Y系列总会与页面元素之间出现穿透遮挡的问题,一直没有找到代码层面的原因,究其根本还是浏览器自身的支持与解析造成的吧,总之安卓上webkit内核是没有这种情况出现的;

不过问题还是要处理掉的,方法无非就是外层容器溢出隐藏:overflow:hidden;另外就是在z距上的translate ,再相应地scale缩放。

  2)对3D变换的更深理解:不可或缺的perspective,意为透视,视角;正确使用将会给使用者在视觉上造成3D的视觉,主要表示的就是观察者距离屏幕的px距离;正为前方观察,负值为后方;

  1. -webkit-perspective:620px;

  自然,你可以将这个属性单独设置到舞台容器上,也可以针对不同视觉效果单独给元素添加;

  3)还是那个老问题,针对低端安卓机,即使开启了硬件加速,也会或多或少地出现动画卡顿不流畅的情况,所以根据以后h5的设计趋势,动画效果占比越来越大,css3的动画应该尽量少用,转为canvas;

2.音视频的控制

  以后的H5几乎都会有音视频的加入吧,也算是一个整体流行趋势,不管是吴亦凡H5 还是前段时间的宝马M2,视频的运用已经比较普遍;但是兼容性还是存在各种问题,比如(安卓不能同时播放2个多媒体,自动全屏播放,预加载,不同网络状况下的处理等等);

所以考虑到以后的优化手段与开发效率,需要一些动画库来管理与处理,比如以前开发中使用过的craftyJs一类的动画框架,最近也在研究腾讯TGideas的几个 动画H5,个人觉得creatJs这个类库也是方案很好的解决途径之一。

3.图片处理

  图片上传显示也算是在移动网页上,尤其是一些互动性h5常见的功能点,此次为了配合最后的大头贴功能,也着实是对图片压缩适配做了不少工作;包括截取的自适应,热区感应,位置对齐等,不过经过前几个h5的经验,最后还是比较完美地处理;不过手机浏览器对input的限制也是大不相同;有的安卓依旧不能选择摄像头即时拍照;编辑卡顿的现象。不过这也是很少在手机移动端出现图片大功能编辑的原因之一,总之还是根据实际功能需求来调整。

结束语:现在的移动端H5热潮差不多是一个稳定的阶段,通俗一点就是烂大街了,不过依旧会有大厂的神来之笔出现让人眼前一亮;微信衍生出来的这个移动平台也极大地推广了移动web的发展;各种技术与创意也是层出不穷。

即使前段时间 腾讯放出的H5推广浏览率分析,有点让人开发者心灰意冷;但是也很好地说明了,技术与创新结合,想象力与设计,给用户新颖舒适的体验才能催发更优秀的作品。

近期H5项目开发小结的更多相关文章

  1. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  2. 关于H5项目开发中TS(或JS)文件按照顺序编译成一个文件的记录

    由于js的执行特性,多个js文件合成一个文件或者进行多个js文件加载时,时需要按照指定的顺序进行的,否则会出现报错的情况. 我们看一下目前几个主流H5引擎的做法. 白鹭的做法 当前版本的做法 在tsc ...

  3. 如何开发H5项目 -- 入门篇

    前言 H5即HTML5,H5开发具有低成本.高效率.跨平台.研发周期短,用户接触成本低等特性. 一.开发环境 在开发一个H5项目之前,需要先搞好环境.主要有node.npm.gulp.bower.下面 ...

  4. Android H5混合开发(1):构建Cordova 项目

    Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...

  5. Android H5混合开发(3):原生Android项目里嵌入Cordova

    前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...

  6. 项目实战:BBS+Blog项目开发

    01-博客系统之功能需求 02-博客系统之表结构设计1 03-博客系统之表结构设计2 04-博客系统之表结构设计3 05-博客系统之表结构设计4 06-博客系统之表机构设计5 07-博客系统之创建系统 ...

  7. Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

    近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...

  8. 近期Java高级开发岗面试总结

    原文出处:公众号:编程大道 作者:walking 近期Java高级开发岗面试总结 哈喽大家好,我是walking,这是我的公众号:编程大道. 很久没和大家见面了,文章更新的速度略有延后.这个公众号断断 ...

  9. 微信硬件H5面板开发(一) ---- 调用openApi

    微信硬件平台是微信推出连接物与人,物与物的IOT解决方案.也就是说可以通过微信控制各种智能设备.比如一些蓝牙设备.空调.电视等等. 我本身不懂硬件(虽然是电子信息专业),硬件是北航的两个研究生在弄,小 ...

随机推荐

  1. 沈逸老师PHP魔鬼特训笔记(6)--巫术与骨架

    PHP最牛逼的特性之一除了懒人函数,还有一些魔法函数. 首先我们来认识下__tostring,通过一个巫术方法,我们吧实例转化过后的类,直接当字符串输出.结合我们前面所做的功能,我们在类里面加上这个函 ...

  2. Android小项目之七 应用程序的更新安装

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...

  3. HDU 1598 find the most comfortable road (MST)

    find the most comfortable road Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d ...

  4. 第02篇. Jetty 9 实战之安装/运行/部署

    一直以来,想改变一些自己早已经习惯的事情. 一直都听说jetty跟Tomcat一样,是一个web容器. 一直都是在说等等,再等等,等有时间的时候! 一直都是给自己一些逃避的理由 1. 首先从Jetty ...

  5. 【思路,dp,BigInteger】ZOJ - 2598 Yet Another Digit

    [redundant binary - 冗余二进制]:由0,1,2构成的二进制形式,基数还是2. 现给你一十进制数n,问其可转化成多少种冗余二进制形式. 首先要想到:2x = 2*2x-1 也就是说 ...

  6. 看完final的感受

    今天没课,(其实是有体育课的,去打了一会球就跑路了...)就在宿舍看world final ; 我去,老毛子真是好厉害,看的我目瞪口呆,哈喇子直流; 上交的大神好厉害,本来还以为上交要夺冠的,最后罚时 ...

  7. hihocoder 1152 Lucky Substrings

    #1152 : Lucky Substrings 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 A string s is LUCKY if and only if t ...

  8. C#的三大特性

    每个新手基本上都知道C#的三大特性,但是今天我给自己总结了一下这三大特性 1.封装 被定义为"把一个或多个项目封闭在一个物理的或者逻辑的包中".在面向对象程序设计方法论中,封装是为 ...

  9. SQL Server 发布订阅 发布类型详解

    MicrosoftSQL Server 提供了三种复制类型. 每种复制类型都适合于不同应用程序的要求. 根据应用程序需要,可以在拓扑中使用一种或多种复制类型: 快照复制 事务复制 合并复制 为了帮助您 ...

  10. sql语句创建主键、外键、索引、绑定默认值

    use Mengyou88_Wuliu --创建公司表 create table dbo.Company2 ( CompanyID ,) not null, CompanyName ) null, A ...