html5+css3之动画在webapp中的应用


Posted in HTML / CSS onNovember 21, 2014

动画在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发生变化时,请在两秒后触发,并且在两秒内完成

这里举一个典型的小例子做说明:


复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<style type="text/css">
* { margin: 0 0; padding: 0 0; }
h1 { font-size: 16px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;}
.cm-header { top: 0; height: 44px; line-height: 44px; text-align: center; background-color: #099fde; color: #fff; z-index: 960; }
.title::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; margin-left: 5px; vertical-align: middle; position: relative; top: -4px; -webkit-transition: all 0.3s ease-in-out; }
.up::after { -webkit-transform: rotate(135deg); top: 1px; }
.down::after { -webkit-transform: rotate(-45deg); top: -4px; }
</style>
</head>
<body>
<header class="cm-header">
<h1 class="title up" id="title">
点击我</h1>
</header>
<script type="text/javascript">
var el = $('#title');
el.on('click', function () {
if (el.hasClass('up')) {
el.removeClass('up');
el.addClass('down');
} else if (el.hasClass('down')) {
el.removeClass('down');
el.addClass('up');
}
});
</script>
</body>
</html>

简单的动画使用transition,复杂的动画便要使用animation了;或者说需要从一个状态到另一个状态的话,最好使用animation


复制代码
代码如下:

animation
animation-name 对于keyframe的名称
animation-duration 动画花费时间
animation-timing-function 动画曲线
animation-delay 延迟多少毫秒a执行
animation-iteration-count 执行次数
animation-direction 是否反方向播放

我们一般使用前四个参数,这里的使用需要先创建keyframe规则,这里先来一个简单的例子:


复制代码
代码如下:

<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<style type="text/css">
@-webkit-keyframes demoFrame {
from { left: 0; }
to { left: 100px; }
}
div { width: 100px; top: 100px; height: 100px; background: gray; position: absolute; }
.demo { -webkit-animation: demoFrame 1s ; }
</style>
<script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
</head>
<body>
<div id="demo">
</div>
<input type="button" value="点击我开始动画" id="btn">
<script>
var el = $('#demo');
var btn = $('#btn');
el.on('webkitAnimationEnd', function () {
el.removeClass('demo');
});
btn.on('click', function() {
el.addClass('demo');
});
</script>
</body>
</html>

每次执行了动画逻辑后需要移除class达到重置效果,animationEnd便是对应回调,对应transition也有一个transitionEnd回调会在动画后触发,偶尔不灵就采用setTimeout吧。

这里举一个更加适用于项目的例子:

复制代码
代码如下:

<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<style type="text/css">
@-webkit-keyframes itemFrame {
from { -webkit-transform: translateY(-80px); }
to { -webkit-transform: translate(0); }
}
* { margin: 0; padding: 0; }
#demo li { list-style: none; border: 1px solid black; margin: 10px; padding: 10px; }
.animateItem { -webkit-animation: itemFrame 1s ; }</p> <p> </style>
<script id="others_zepto_10rc1" type="text/javascript" class="library" src="<a href="http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script">http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script</a>>
</head>
<body>
<ul id="demo">
</ul>
<script>
var el = $('#demo');
for(var i = 0; i < 10; i++) {
var li = $('<li>项目_' + i);
el.append(li);
}
var items = $('#demo li');</p> <p> function animatFn() {
$.each(items, function (i) {
var el = $(this);
el.css('-webkit-animation-delay', i * 50 + 'ms');
el.addClass('animateItem');
})
}</p> <p> items.on('webkitAnimationEnd', function () {
items.removeClass('animateItem');
items.css('-webkit-animation-delay', '');
});</p> <p> animatFn();</p> <p> setInterval(function () {
animatFn();
}, 3000)</p> <p></script>
</body>
</html>

这是一个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

结语

初学重构,如果文中有何不足,请您留言

HTML / CSS 相关文章推荐
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 #HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 #HTML / CSS
html5+css3气泡组件的实现
Nov 21 #HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 #HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 #HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 #HTML / CSS
css3实现超炫风车特效
Nov 12 #HTML / CSS
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
zend framework多模块多布局配置
2011/02/26 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
JS实现页面打印功能
2017/03/16 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python中的高级函数map/reduce使用实例
2015/04/13 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
小学敬老月活动方案
2014/02/11 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
交通事故协议书范文
2014/04/16 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
小学教师党员承诺书
2015/04/27 职场文书