重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天就跟大家聊聊有关html5+css3动画如何在webapp中应用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
专注于为中小企业提供成都网站制作、网站设计、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业双滦免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
动画在webapp的现状
webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高;
而体验优化的一个重点便是动画,可以说动画是webapp的一个亮点。但也是一个难点,一个痛点,主要原因是:移动端手机的碎片化严重。
设备、型号、版本、分辨率等差异导致移动端需要考虑的主流情况达10多种,而Hybrid带来的webview可以让情况更加糟糕
所以说,近两年想在移动端大范围的使用动画,或者使用webapp模式都对团队的能力提出了要求,原因是:
① 单页对变量污染更加敏感
这个变量污染包括js变量污染,css变量污染,虽然js可采用AMD模块消除主要问题,但css的污染却很难避免,有时候更甚于js
web Component是一个解决方案,但还不敢大范围使用,因为一次UI的改变会导致各个业务团队改变,这个代价没有颠覆性的优势,得不偿失。
② heap值攀升
如果view的管理没有一个有效的销毁机制,那么webapp模式的网站不可避免的会消耗更多的内存,甚至降低体验,费力不讨好
③ 手机烂,CPU烂,国产浏览器多而烂,私自调整webkit内核而引发的问题比比皆是,奇葩浏览器什么的就不提了
所以动画在webapp或者说在移动端的使用有其场景,他适用于小范围的动画,适用于view内级别的动画,比如弹出层的动画,细节处的动画
不适用于页面级别的切换,比如整个view的切换(我们看到的native中的过场动画),view级别动画的痛点是:手机碎片化
而view级别动画的难点是:
① view级别的动画不能预料dom树的大小,大dom树的动画cpu吃不消
② 过场动画不能共用window.scollTop,各个View需要维护自己的滚动条,而区域滚动是移动端另一个痛点
以上是移动端的现状,技术虽好,有其场景。可以在高端机上使用全局性的动画,但是框架层面一定要提供开关机制,低端机卡帧经常发生,保证低端机的基本功能
接下来介绍一下CSS3的动画......
CSS3的动画
transition
代码如下:
PS:当然,上面四个属性可以像border一样写到一堆
代码如下:
.demo { transition: border 2s ease 2s; }
这段代码就是告诉浏览器每当border发生变化时,请在两秒后触发,并且在两秒内完成
这里举一个典型的小例子做说明:
代码如下:
Blade Demo 点击我
简单的动画使用transition,复杂的动画便要使用animation了;或者说需要从一个状态到另一个状态的话,最好使用animation
代码如下:
animation animation-name 对于keyframe的名称 animation-duration 动画花费时间 animation-timing-function 动画曲线 animation-delay 延迟多少毫秒a执行 animation-iteration-count 执行次数 animation-direction 是否反方向播放
我们一般使用前四个参数,这里的使用需要先创建keyframe规则,这里先来一个简单的例子:
代码如下:
Blade Demo 每次执行了动画逻辑后需要移除class达到重置效果,animationEnd便是对应回调,对应transition也有一个transitionEnd回调会在动画后触发,偶尔不灵就采用setTimeout吧。 这里举一个更加适用于项目的例子: 代码如下:Blade Demo http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js">>
这是一个list页面的经典效果,做得好会让人眼前一亮,当然做得不好也会让人头疼,这里为了效果便代码上循环了下,这里有一个知识点要说下:
代码如下:
浏览器的dom操作与页面渲染时互斥的
以代码为例:
代码如下:
$.each(items, function (i) { var el = $(this); el.css('-webkit-animation-delay', i * 50 + 'ms'); el.addClass('animateItem'); })
事实上每次循环皆将class与css属性同步设置到了dom上但没有执行动画,而是整个dom操作执行结束后才执行的,如果这里代码加入时间片便不一样了
这样的话一次循环会马上执行,随后会执行其中的一个个setTimeout的代码,也可以看到setTimeout之间的时序不太好被保证,比如item有100项
代码如下:
function animatFn() { $.each(items, function (i) { setTimeout($.proxy(function () { var el = $(this); el.addClass('animateItem'); }, this), 300 * i); }) }
更复杂的效果,比如模拟qq的页面转场动画,就要与专业的重构同事上场了,可以看这个代码:
https://github.com/yexiaochai/cssui/tree/gh-pages
demo地址:http://yexiaochai.github.io/cssui/demo/debug.html#a
看完上述内容,你们对html5+css3动画如何在webapp中应用有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。