伪元素上就不要做动画了,页面果然应该做一个测试一个啊
 
拿到设计稿一开始就先看看这个设计稿的布局,有一些是从页面顶部到底部都有效果的,这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保证页面完整呈现;或者在不影响交互的情况下,隐藏哪些元素。有的时候页面上元素比较集中,这个时候就要考虑在 iPhone6+ 这样的大屏幕设备上,要不要调整间距使得页面不会太空旷
 
zoom和transform:scale:
zoom 缩放的是被 zoom 的容器的视口,可以把它想象成放大镜的效果,这个属性是可被继承的,所以我们做设备屏幕兼容的时候,可以在 body 标签下加一个 div 包裹住页面上的其他元素,然后在这个 div 上加 zoom,达到的视觉效果就是页面上其他元素也被缩放了。但是有些元素并不支持 zoom。
 
transform 属性应用到元素的过程其实是矩阵变换的过程,在渲染的时候,元素的坐标就会被确定下来,然后和 transform 的属性值进行矩阵运算得到最终的坐标,不过你会发现,一个绝对定位的元素通过 transform 改变显示位置后,这个元素的 tbrl 值并不会被更新,且 transform 属性不可继承的。
 
要想 transfrom: scale(x) 达到和 zoom 相似的效果,要记得把 transfrom-origin 设置成 0 0。这么设置的原因是,在文档流中的元素,是以它的左上角为中心进行 zoom 的,而当元素脱离文档流时,要使 transform: scale(x) 和 zoom 达到相同的效果,还要具体分析 transform-origin 要如何设置。
 
为什么 scale 会留下右部和底部的迷の白色呢?回到 transform 的定义中,“applied to the coordinate system an element renders in through the ‘transform’ property”。当元素都进行渲染了,坐标已经确定了,再进行缩放,也就是在原来元素基础上改变大小。所以 .sf-index 虽然在渲染时四个角的位置分别是(0,0)、(100%,0)、(0,100%)、(100%, 100%),经过以 (0,0) 为变换中心的 scale,就变成了(0,0)、(85%,0)、(0,85%)、(85%,85%)。我们就会看到页面右边出现宽度为15%的一条白边,以及页面下方高度为15%的白边。
 
寻找动画灵感:
 
其他兼容方法:
像需要大量图片的页面,做兼容的时候我们常常担心的是什么?当然是图片比例出问题咯,所以也会使用通过伪元素设置 padding-top 的方法,保证图片比例正常地显示出来。只是这样的写法通常要结合 background-size:cover; 而我们常用的工具 CssGaga 在生成雪碧图了之后会覆盖 background-size。目前的这个方案的话……就不合成雪碧图了。
 
还有一个方案是使用 media query 结合 rem (或百分比)完成这样的布局,不过目前 gaga 不支持 background-size 的 rem,所以要采用什么方式合成雪碧图以及如何生成新的样式,还需要寻找新的方向。在不需要合成雪碧图的时候,可以用这两种方法。
 
伪元素真的是神一样的存在,一个标签自带两个儿子,不知道为什么就有种金闪闪的感觉。但是伪元素上的动画真的很坑
Android 上坑多,不要一次应用太多新技术。比如在魅族上用 flexbox 布局,就要加上 display: -webkit-box。还有一个教训就是,页面果然应该做一个测试一个
 

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

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

2.根据识别类采取以下措施:
(1)用js模拟同样效果;
(2)用css屏蔽掉动画;
(3)或者直接全部都用transition来做(不要keyframes)。

Android手机的屏幕碎片化非常严重,各种各样的分辨率非常之多,那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小,但要么在某些机型中获取失败,要么用赋值缩放相关元素时造成游戏崩溃……用 absolute 来解决:


关键代码:

1
2
3
4
5
6
7
8
.game {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}

以上代码使游戏容器绝对定位之后,上下左右四边都与手机屏幕贴紧,从而做到了适配各种屏幕。
然后使用 background-size:cover; 让背景覆盖全屏,此代码可以使背景 自动缩放 至 覆盖 容器大小。

为了适应各种屏幕,应该使用动态居中的布局,而不是传统页面的左上角为基准:

.welcome { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -111px; background-image: url("img/wel.png"); width: 222px; height: 200px; }

希望每次浏览这一屏内容的时候,动画都走一遍,可以使用reflow重新触发一下animation:

container.classList.remove("active"); container.offsetWidth = container.offsetWidth; container.classList.add("active");

animation-timing-function:steps(4, start);

第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。

每一帧变化会自动计算取平均值。

原理还是在不断的移动背景图片,但每种背景会保留一段时间,通过他我们可以方便的制作帧动画

h5 动画页面的更多相关文章

  1. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  2. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  3. 快速构建H5单页面切换应用

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  4. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  5. H5动画优化之路

    H5动画60fps之路 在移动端,和Native相比,H5一直都被人吐槽性能差,尤其是在动画方面. 谈到整个Web app的生命周期,一般分为四个部分: 加载 等待用户 响应用户 动画 一般情况下,首 ...

  6. 运用预加载提升H5移动页面的用户体验

    原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...

  7. H5 App页面 绝对定位 软键盘弹出时顶起底部按钮

    做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...

  8. h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)

    h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...

  9. h5动画如何实现?如何快速开发h5动画

    最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...

随机推荐

  1. URL编码解决

    与其他系统对接时遇到的问题URL中传递认证码,URL默认只允许传递ASCII码中的数据,所以浏览器默认会进行一次编码将%等特殊符号转义后台web服务器收到URL中的参数,会默认进行一次解码,但遇到的问 ...

  2. TCP/IP(八)之总结ICP/IP四层模型

    前言 在这里有一个问题,有的书上说TCP/IP是四层有的却说是五层.其实这个问题我也上网查了一下资料. tcp/ip是事实标准,分4层.osi模型是国际标准,分7层.讲课的时候,一般把他们综合起来讲, ...

  3. windows下创建Python虚拟环境

    windows下创建Python虚拟环境 说明 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv ...

  4. 【原创】流程引擎的网关(遵循BPMN2.0)设计总结

    概述 BPMN 2.0是什么呢?业务流程模型注解(Business Process Modeling Notation - BPMN)是 业务流程模型的一种标准图形注解.这个标准 是由对象管理组(Ob ...

  5. ssi服务器端指令详解(shtml)

    你是否曾经或正在为如何能够在最短的时间内完成对一个包含上千个页面的网站的修改而苦恼?那么可以看一下本文的介绍,或许能够对你有所帮助. 什么是SSI? SSI是英文Server Side Include ...

  6. dotweb框架之旅 [二] - 常用对象-App(dotweb)

    dotweb属于一个Web框架,希望通过框架行为,帮助开发人员快速构建Web应用,提升开发效率,减少不必要的代码臃肿. dotweb包含以下几个常用对象: App(dotweb) App容器,为Web ...

  7. win10应用 UWP 使用MD5算法

    windows有自带的算法来计算MD5 原本在WPF是 private string get_MD5(string str) { System.Security.Cryptography.MD5Cry ...

  8. Python和SQL 2017的强大功能

    Python和SQL Server 2017的强大功能   原文来自:https://www.red-gate.com/simple-talk/sql/sql-development/power-py ...

  9. Learning Scrapy 中文版翻译 第一章

    第一章:scrapy介绍 欢迎来到scrapy之旅.通过这本书,我们将帮助你从只会一点或者零基础的Scrapy初学者达到熟练使用这个强大的框架在互联网或者其他资源抓取海量的数据.在这一章节,我们将给你 ...

  10. 3des用法示例,已测试

    using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security ...