1. 制作小球弹动效果

在这篇文章中,我们将会去探究一下浏览器是如何去处理CSS Animations和CSS Transitions的,   c

以便使你在写一些动画效果之前就可以对该动画在浏览器中运行效果有一个心理预判。

有了这些预判,你就可以设计出一些在浏览器中运行流畅的动画效果,从而带来更流畅的用户体验

浏览器的内部工作

让我们了解一些浏览器的工作原理,一探究竟。一旦我们了解了浏览器是如何工作的,我们就可以更好的去驾驭它。

现代浏览器通常拥有两个重要的执行线程,这两个线程相互配合来渲染出页面:

主线程

排版线程

通常情况下,主线程主要负责以下工作:

运行JavaScript

计算HTML元素的CSS样式

布局页面

把页面元素绘制成一个或多个位图

把这些位图移交给排版线程

通常情况下,排版线程主要负责以下工作:

通过GPU渲染位图,并显示在屏幕上

向主线程请求更新位图的可见部分或即将可见的部分

判断出当前页面处于可见的部分

判断出即将通过页面滚动而可见的部分

随着用户滚动页面来移动这些部分(译者注:可见部分的和即将可见的部分)

当长时间运行JavaScript或渲染一个很多的元素时,主线程会一直处于忙碌状态。在这期间它不会对用户的输入做出任何反应。

在另一方面,排版线程对用户输入保持着非常快的响应。

当页面变化时,排版线程尝试以每秒60帧的速度去重绘页面,即便这时页面还不完整。

举例来说,当用户滚动页面时,排版线程向主线程请求更新页面新显示部分的位图,(互相独立的两个部门)

但是,如果此时主线程并不能迅速响应请求,排版线程并不会去等待响应,

它会用它目前所拥有的这部分页面的内容去渲染页面,由于对应的内容还没有,所以会以白板的形式渲染出来。

GPU

我前边提到过排版线程通过GPU把位图绘制到了屏幕上。让我们快速的过一下GPU相关的东西。

GPU是一种芯片,在今天的大多数手机,平板以及电脑中都能发现它的身影。

它是非常专业的,这意味着GPU在某些方面非常擅长,但是在另外一些方面去表现不好。

GPU比较擅长于:

绘制位图到屏幕

重复的绘制同一个位图

在不同的位置,以不同的旋转角度,或者不同的缩放大小来绘制同一个位图。

GPU相对慢的地方:

将位图加载到显存里。

transition: height

现在我们已经在软件层面和硬件层面对如何渲染页面有了一个粗略的认识。

接下来,让我们看一下浏览器的主线程和排版线程是如何协同工作来完成一个CSS Transition的。

div {
height: 100px;
transition: height 1s linear;
} div:hover {
height: 200px;
}

正如你所见,整个过程有很多橙色的方框,意味着浏览器有相当繁重的工作要处理,也意味着这个Transition可能会出现卡顿。

在整个Transition的每一帧中,浏览器都要去重新布局,绘制页面,并把最新的位图对象加载到GPU。

我们前边了解过,把位图对象加载到 (image)GPU的内存中是个相对缓慢的操作。

浏览器之所以要在每一帧动画上处理如此繁重的工作是因为这个元素的内容一直在变化。

修改一个元素的高度可能会引起其子元素也要相应的改变大小,因此浏览器必须去重新布局。

重新布局后,主线程必须为该元素重新生成位图对象。

  

transition 结合  transform

由此可见,对高度进行的Transition相对来说性能比较差,那有一些性能比较好的Transition吗?

假设我们想要把一个元素从一半大小缩放到实际大小,并假设我们使用CSS的transform 属性来对它进行缩放,

同时使用CSS的transition属性来生成缩放的动画效果,如下所示:

div {
transform: scale(0.5);
transition: transform 1s linear;
} div:hover {
transform: scale(1.0);
}

根据定义,CSS的transform属性不会改变元素的布局,也不会影响到其周围的元素。(它的位置还是那么多, 只是一个动作临时改变大小而已)

它把元素当做一个整体看待——缩放整个元素、旋转整个元素或者移动整个元素。

这对浏览器来说是一个好消息!浏览器主线程只需在动画开始的时候生成这个元素的位图对象,并把它传递给GPU。

在这之后,浏览器无需再做任何重新布局,绘制页面以及传递位图对象的操作了,

相反,浏览器可以利用GPU擅长的绘制的特点来快速的在不同的位置,旋转或缩放同一个位图对象。

  

设计决策


那么,是否这就意味这我们不要去缓动一个元素的高度?

非也,一些情况下,这是你的设计效果的一部分,并且动画效果可以非常快的完成。

也许动画的元素是孤立的,不会引起页面其他部分进行重新布局 (只好给元素设置 absolute);

也许该元素只是单纯的进行重绘,浏览器可以快速的完成;

也许该元素很小,浏览器只需将很小的位图对象传递给GPU。

当然了,在不影响你设计的视觉效果的情况下,最好去缓动一个性能较好的CSS属性,如transform,

而不是去缓动一个性能较差的CSS属性,如height。

举例来说,假设你的设计中有一个按钮,当点击它的时候会出来一个菜单,

试着去缓动菜单的transform属性来显示它而不是缓动它的top或height属性来达到类似的效果。

在动画上特别快的CSS属性包括:

CSS transform

CSS opacity

CSS filter (依赖于过滤器的复杂度和浏览器)

目前这个列表是非常有限的,但是随着浏览器的进步,你将会看到越来越多的CSS属性在动画中变得越来越快。

另外,不要轻视当前的列表。你可能会很惊讶你能通过组合这些属性创造出许多丰富的效果。只要有创意!

链接

动画js控制

css3动画的原理 及 各种效果制作的更多相关文章

  1. 美妙的 CSS3 动画!一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  2. CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  3. css3动画机制原理和实战

    这段时间喜欢上css3动画效果了,关于这个每个人都有不同的看法,在我个人看来css3在做一些小页面的动画效果还是很好用的,一些简单的小动画要是用js的话,未免浪费. 要是做大一点的话最好js+css3 ...

  4. 使用CSS3动画实现绚丽的照片墙效果

    临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图 效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...

  5. 写多个物件css3循环动画案例原理

    div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...

  6. css3 动画+动画库

    css3 动画 实现原理 1.transition 过渡:https://www.runoob.com/cssref/css3-pr-transition.html 语法:( transition的 ...

  7. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  8. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  9. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

随机推荐

  1. java-基础-【四】实际编程中的对象

    一.概述 实际编程开发中,仅仅一个数据库对象映射是满足不了各种复杂需求. O/R Mapping 是 Object Relational Mapping(对象关系映射)的缩写.通俗点讲,就是将对象与关 ...

  2. EasyUI Resizable 可调整尺寸

    通过 $.fn.resizable.defaults 重写默认的 defaults. 用法 通过标记创建可调整尺寸(resizable)对象. <div class="easyui-r ...

  3. Openstack(八)部署镜像服务glance

    8.1glance镜像服务介绍 Glance是OpenStack镜像服务组件,glance服务默认监听在9292端口,其接收REST API请求,然后通过其他模块(glance-registry及im ...

  4. Openstack(七)keystone

    官方安装文档:https://docs.openstack.org/ocata/zh_CN/install-guide-rdo/index.html 7.1 keystone简介 Keystone 中 ...

  5. Android初体验之Monkey和MonkeyRunner

    原文地址https://blog.csdn.net/mad1989/article/details/38087737 Monkey 什么是Monkey Monkey是Android中的一个命令行工具, ...

  6. Docker 随笔

    设置镜像时区 RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc ...

  7. 6.3 Controllers -- Managing Dependencies Between Controllers

    1. 有时候,特别是当嵌套资源的时候,我们需要两个controllers之间的某种连接.让我们拿这个router当做例子: app/router.js var Router = Ember.Route ...

  8. SQL 根据条件取不同列中的值来排序

    1  有时候排序比较复杂,比如:领导对工资在1000到2000元之间的员工更感兴趣,于是要求工资在这个范围内的员工排在前面,以便优先查看 对于这种要求我们可以在查询中新生成一列,用多列排序的方法处理代 ...

  9. http://www.kankanews.com/ICkengine/archives/18078.shtml

    https://github.com/lealife/WeiXin-Private-API

  10. 20155201 2016-2017-2 《Java程序设计》第八周学习总结

    20155201 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 第十四章 NIO与NIO2 相对于串流输入/输出使用InputSteam,OutputStr ...