动画在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

transition包含四个属性

transition-property 指定需要动画的css属性

transition-duration 完成过渡的实践

transition-timing-function 过渡函数，这个一般不设置，使用ease之类的

transition-delay 动画延迟多少秒执行

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>

animation

简单的动画使用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 ; }

   </style>

   <script id="others_zepto_10rc1" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script>

 </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');

   function animatFn() {

     $.each(items, function (i) {

       var el = $(this);

       el.css('-webkit-animation-delay', i * 50   + 'ms');

       el.addClass('animateItem');

     })

   }

   items.on('webkitAnimationEnd', function () {

     items.removeClass('animateItem');

     items.css('-webkit-animation-delay', '');

   });

   animatFn();

   setInterval(function () {

     animatFn();

   }, 3000)

 </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

结语

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

【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用的更多相关文章

  1. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

  2. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  3. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  4. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  5. Scrollanim – CSS3 & JavaScript 创建滚动动画

    Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...

  6. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

  7. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  8. 创建CSS3警示框渐变动画

    来源:GBin1.com 在线演示   在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...

  9. html5 新增元素以及css3新特性

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

随机推荐

  1. x01.os.22: ubuntu 常用设置

    新组装了个 64 位电脑,i5 CPU,进入 ubuntu 后,又是一通搜索设置,整理如下,以备后用. 安装 .dep 包 sudo dpkg -i [filename.dep] 在 ubuntu 中 ...

  2. ASP.NET 中的 Async/Await 简介

    本文转载自MSDN 作者:Stephen Cleary 原文地址:https://msdn.microsoft.com/en-us/magazine/dn802603.aspx 大多数有关 async ...

  3. 揭秘Windows10 UWP中的httpclient接口[2]

    阅读目录: 概述 如何选择 System.Net.Http Windows.Web.Http HTTP的常用功能 修改http头部 设置超时 使用身份验证凭据 使用客户端证书 cookie处理 概述 ...

  4. 写自己的Socket框架(一)

    本系列仅介绍可用于生产环境的C#异步Socket框架,如果您在其他地方看到类似的代码,不要惊讶,那可能就是我在参考开源代码时,直接“剽窃”过来的. 1.在脑海里思考一下整个socket的链接的处理流程 ...

  5. Android Studio2.1.2 Java8环境下引用Java Library编译出错

    转载请注明出处:http://www.cnblogs.com/LT5505/p/5685242.html 问题:在Android Studio2.1.2+Java8的环境下,引用Java Librar ...

  6. Atitit MATLAB 图像处理attilax总结

    Atitit MATLAB 图像处理attilax总结 1.1. 下载 Matlab7.0官方下载_Matlab2012 v7.0 官方简体中文版-办公软件-系统大全.html1 1.2. Matla ...

  7. ECS Linux 服务器解除ssh登陆后被锁定或暂停输入输出的终端

    在使用SSH终端(如Xshell)登陆时,若不慎点击 Ctrl + S  按键,会导致终端很像被锁定,输入和输出都无响应. 这是由于操作系统的终端收到指令 Ctrl + S 后,会暂停终端输入输出的刷 ...

  8. 从E.E到S.E

    title: 从E.E到S.E date: 2014-12-18 16:49:19 categories: [杂念] tags: [想法,生涯] --- 我在本科学的是Electric Enginee ...

  9. BIRCH聚类算法原理

    在K-Means聚类算法原理中,我们讲到了K-Means和Mini Batch K-Means的聚类原理.这里我们再来看看另外一种常见的聚类算法BIRCH.BIRCH算法比较适合于数据量大,类别数K也 ...

  10. C# Word中设置/更改文本方向

    C# Word中设置/更改文本方向 一般情况下在Word中输入的文字都是横向的,今天给大家分享两种方法来设置/更改一个section内的所有文本的方向及部分文本的方向,有兴趣的朋友可以试下. 首先,从 ...