HybridApp之CSS3动画(0)_前言

众所周知，一款APP的User Experience（用户体验）是由“有用性”，“易用性”，“友好性”和“视觉”四个部分组成的。我们可以通过提升技术实力，优化交互逻辑这些手段来提升前三者，但是静态的界面在视觉冲击力方面往往是有限的，所以动画在APP中就变得必不可少。
还记得“哔哩哔哩”APP在加载时的那个萌妹子吗，还记得“天天果园”APP的那个果冻一样效果的菜单按钮吗。这些给过我很多惊喜的动画都让我下定决心，要在我做的APP中加入动画元素，但是毕竟HybridAPP不同于NativeAPP，我们怎么恰到好处的将我们自己设计的动画加入到我们的APP中呢？

一. 关于CSS的动画和转换性能
由于HybridAPP是基于浏览器的，那么我们的动画自然就是要用CSS3来实现，但是浏览器中的动画和用XML+Java(Android)/UI-Kit(IOS)是大不相同的，所以我们要从浏览器的内部工作开始分析。
目前主流浏览器都是通过“主线程”和“排版线程”这两个线程相互配合渲染出页面。
通常情况下，主线程主要负责以下工作：
1.运行JavaScript
2.计算HTML的CSS样式
3.布局页面
4.把页面元素绘制成一个或多个位图
5.把这些位图移交给排版线程
通常情况下，排版线程主要负责以下工作：
1.通过GPU渲染位图，并显示在屏幕上
2.向主线程请求更新位图的可见部分或即将可见的部分
3.判断出当前页面处于可见的部分
4.判断出即将通过页面滚动而可见的部分
5.随着用户滚动页面来移动这些部分

下面，让我们看一下浏览器的主线程和排版线程是如何协同工作来完成一个CSS Transition的，假设我们想要将一个元素的高度值从100px转换到200px，如下所示（transition:height）：
div {

height: 100px;
transition: height 1s linear;

} 
div:hover {

height: 200px;

}
主线程和排版线程会根据下图所示时序图来完成这个Transition。注意：在橙色方框中的操作是潜在的耗时操作，蓝色方框中的操作是较快的操作。

很明显，整个过程有很多橙色的方框，意味着浏览器有相当繁重的工作要处理，也意味着这个Transition可能会出现卡顿。
在整个Transition的每一帧中，浏览器都要去重新布局，绘制页面，并把最新的位图对象加载到GPU。浏览器之所以要在每一帧动画上处理如此繁重的工作是因为这个元素的内容一直在变化。修改一个元素的高度可能会引起其子元素也要相应的改变大小，因此浏览器必须去重新布局。重新布局后，主线程必须为该元素重新生成位图对象。

由此可见，对高度进行的Transition相对来说性能比较差，那有一些性能比较好的Transition吗？
假设我们想要把一个元素从一半大小缩放到实际大小，并假设我们使用CSS的transform 属性来对它进行缩放，同时使用CSS的transition属性来生成缩放的动画效果，如下所示：
div {

transform: scale(0.5);
transition: transform 1s linear;

} 
div:hover {

transform: scale(1.0);

}

我们看到只有很少的几个橙色的方框，意味着这个动画效果可能会很流畅！那么，一个元素的transform动画效果与其高度的动画效果有什么不同呢？
根据定义，CSS的transform属性不会改变元素的布局，也不会影响到其周围的元素。它把元素当做一个整体看待——缩放整个元素、旋转整个元素或者移动整个元素。
浏览器只需在动画开始的时候生成这个元素的位图对象，并把它传递给GPU。在这之后，浏览器无需再做任何重新布局，绘制页面以及传递位图对象的操作了，相反，浏览器可以利用GPU擅长的绘制的特点来快速的在不同的位置，旋转或缩放同一个位图对象。

那么，是否这就意味这我们不要去缓动一个元素的高度呢？并不是，一些情况下，这是你的设计效果的一部分，并且动画效果可以非常快的完成。也许动画的元素是孤立的，不会引起页面其他部分进行重新布局；也许该元素只是单纯的进行重绘，浏览器可以快速的完成；也许该元素很小，浏览器只需将很小的位图对象传递给GPU。
当然了，在不影响你设计的视觉效果的情况下，最好去缓动一个性能较好的CSS属性，如transform，而不是去缓动一个性能较差的CSS属性，如height。举例来说，假设你的设计中有一个按钮，当点击它的时候会出来一个菜单，试着去缓动菜单的transform属性来显示它而不是缓动它的top或height属性来达到类似的效果。

在动画上特别快的CSS属性还包括：
CSS transform
CSS opacity
CSS filter

在了解浏览器中动画的生成原理后，我们可以有一套简单的标准，在设计APP中的动画时，尽量避免去动用那些可能会导致页面重新布局的属性，而是尽可能用较快完成的属性。

二 .各种手机的各种浏览器，动画效果有兼容性问题
目前各大手机厂商使用的浏览器内核包括，Safari(iPhone)，Chromium/Mozila(Android)，其中谷歌和苹果两家公司的手机都是完全没有经过修改的Safari和Chrome，所以动画效果在这两个厂商的手机上没有兼容性问题，但是Android的众多厂商，比如三星，小米，华为，魅族等等，都是在Chormium/Mozila内核的基础上进行修改，最后推出一套自己的浏览器，这就会导致众多的兼容性问题，比如动画效果卡顿，动画效果不一致等问题。在这一点，我的建议是针对Android机型去打CrossWalk，将其在使用APP时的浏览器统一的替换为未经修改的Chromium内核，虽然这会导致安装包变大，但却解决了棘手的兼容性问题，以及后期可以统一维护。