基础概念

  CSS样式可分为两种,一种值接近无限的集合(color,width),一种值只有几种(display),可以进行计算的样式,产生了动画效果。\

  1. 动画的第一步是获得元素的精确样式值。

  2. 若要做平移,传入结束位置、距离、时长、fps。

tips:fps设置多少合适?

  除了人的眼睛,还要考虑到显示器的显示速度与浏览器的渲染速度。据国外统计,根据人所能感知到的变化间隔,25毫秒为最佳数值。

缓动公式

  

  缓动公式来源于数学上的三角函数、二次项方程、高阶方程式,有了公式就可以控制移动速度。

  一般情况下,只会用默认的linear或easeIn。现在所有的缓动公式,除了linear外都以ease开头命名,添加三种后缀,In代表加速、Out代表减速、InOut代表先加速后减速,于是有easeIn、easeOut、easeInOut之分。这种命名表示没有介入高阶函数与三角函数,linear表示匀速。

CSS3 transition

  transition是CSS入侵行为层的主要行为。

  包含4个属性,样式名、持续时间、缓动公式、延迟多久才触发。

transition-property

  指定属性执行transition效果,主要有以下几个值:none(无)、all(所有属性 默认值)、indent(元素属性名)。

  如果指定属性,可以选择的类型如下:

  1、与颜色相关的属性,如background-color,border-color,color,outline-color。

  2、与盒子模型、字体大小、间距、行高有关样式。如width、top、margin、line-height等。

  3、透明度 opacity。

  4、变形相关 即transform。

  5、阴影 text-shadow box-shadow。

  6、线性渐变与径向渐变。

transition-duration

  动画持续时间,单位可以是s,也可以是ms。

transition-timing-function

  缓动公式。有6个可能的值

  1、ease:逐渐变慢(默认值)

  2、linear:匀速

  3、ease-in:加速

  4、ease-out:减速

  5、ease-in-out:先加速后减速

  6、cubic-bezier:允许自定义一个时间曲线。(x1,y1,x2,y2),四个值对应贝塞尔曲线的4个点,值需定义在[0,1]之间。

transition-delay

  延迟执行时间,可选单位s或ms。

  该属性缺点是不可控,无法暂停,一般框架不会用这个来实现动画引擎。

CSS3 animation

  

  

  吸收了Flash的关键帧理念,并克服了transition的一些缺陷。

  animation是一个复合样式,可以细分为8个更细的样式,情况与background-*关系相仿。

  

1、animation-name

  制约关键帧样式的名字,可以同时对应多个关键帧样式规则名,以‘,’号分开。

2、animation-duraiton

  动画持续时间,单位为s或ms。

3、animation-timing-function

  缓动公式。

4、animation-delay

  动画延迟多久才开始,不计入duration。

5、animation-iteration-count

  动画播放次数,值可以为正整数或infinite,默认只执行一次。

6、animation-direction

  动画执行的方向,有四个值:normal、alternate、reverse、alternate-reverse。

  normal:指每次都从第一帧开始。

  alternate:count大于1有效,动画从0%-100%,100%-0%循环。

  reverse:有兼容问题,与normal相反,从最后一帧开始。

  alternate-reverse:有兼容问题,与alternate相反。

7、animation-fill-mode

  指动画跑完一圈,是保持动画前的状态还是此时的状态。

8、animation-play-state

  用于暂停或继续此动画。

  除了最后两个,前六个可以写在一块。

JS框架设计读书笔记之-动画的更多相关文章

  1. JS框架设计读书笔记之-节点模块

    节点的创建 浏览器提供了多种手段创建API,从流行程度依次是document.createElement.innerHTML.insertAdjacentHTML.createContextualFr ...

  2. JS框架设计读书笔记之-核心模块

    随笔记录一下读书心得 1. 框架模块-核心模块 该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码. 模块的功能主要是:对象扩展.数组化.类型判定.事件绑定和解绑.无冲突处理.模块加载 ...

  3. JS框架设计读书笔记之-选择器引擎01

    选择符 选择符是指CSS样式规则最左边的部分,例如 p{},#id{},.class{},p.class{} 等等 总共可以分为四大类: 并联选择器 => 逗号 => $('div,spa ...

  4. JS框架设计读书笔记之-小知识

    这一篇写一点小知识 JS中0.1+0.2为什么不等于0.3? 关于这个问题之前也很疑虑,老师也只是笼统的讲这是JS的语言问题,但是内部具体的情况却没有讲,看了书才发现原理如此简单. 简单来讲,计算机识 ...

  5. JS框架设计读书笔记之-异步

    setTimeout/setInterval 1. 如果回调执行时间大于间隔时间,真正的间隔时间会大一些. 2. 存在一个最小的时间间隔,即使seTimeout(fn,0),在IE6-IE8中大概为1 ...

  6. JS框架设计读书笔记之-选择器引擎02

    选择器引擎涉及相关概念 概念 以Sizzle的主函数声明为例,来说明引擎的相关概念. function Sizzle(selector, context, results, seed) { //... ...

  7. JS框架设计读书笔记之-函数

    这次写一些函数 1.模拟Object.keys方法 Object.keys = Object.keys || function(obj){ var a = []; // a[0],a[1]...分别赋 ...

  8. javascript框架设计(读书笔记)

    我觉得多看几本进阶的书 与其十本书读一遍,不如一本书读十遍 读书的启示: 读好书(看推荐) 精读(重复看) 能读厚书(javascript权威指南) Object.keys Object.keys=O ...

  9. js框架设计1.1命名空间笔记

    借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...

随机推荐

  1. struts1.3整合spring2.5(将spring委托给struts方式)

    前提是配置完struts1.3 导包 spring-2.5.6.jar //spring核心包 spring-webmvc-struts-2.5.5.jar //struts整合spring使用 lo ...

  2. 使用gc、objgraph干掉python内存泄露与循环引用!

    Python使用引用计数和垃圾回收来做内存管理,前面也写过一遍文章<Python内存优化>,介绍了在python中,如何profile内存使用情况,并做出相应的优化.本文介绍两个更致命的问 ...

  3. [Node.js] 2、利用node-git-server快速搭建git服务器

    本文用到了node-git-server 1.检测本地git版本 该包的使用需要机器上本来就安装git,且git的版本大于等于2.7: ╭─root@lt /home/workspace ╰─# gi ...

  4. AngularJS -- 提供者(Providers)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 每个Web应用程序都是有多个对象组合.协作来完成任务的.这些对象需要被实例化,并且连接在 ...

  5. win7旗舰版最新激活密钥

    Win7旗舰.企业.专业版的激活密钥(32位.64位均可用).FJGCP-4DFJD-GJY49-VJBQ7-HYRR2 AcerVQ3PY-VRX6D-CBG4J-8C6R2-TCVBD Alien ...

  6. 最接近原生APP体验的高性能前端框架-MUI

      前  言 轻量,原生UI,流畅体验,是MUI的三个特征.   1. 新手指南 快速体验 1. 下载Hello mui App 下载已打包好的Hello mui 手机app,直接在手机上体验mui的 ...

  7. XSS跨站脚步攻击及防范

    XSS(Cross Site Script)跨站脚本攻击.它指的是恶意攻击者往Web 页面里插入恶 意html 代码,当用户浏览该页之时,嵌入其中Web 里面的html 代码会被执行,从而达到侵害用户 ...

  8. IPSec协议

    IPSec协议:IPsec将IP数据包的内容先加密再传输,即便中途被截获,由于缺乏解密数据包所必要的密钥,攻击者也无法获取里面的内容. 传输模式和隧道模式:IPsec对数据进行加密的方式有两种:传输模 ...

  9. zoj 1938 Binomial Showdown 组合数裸基础

    Binomial Showdown Time Limit: 2 Seconds      Memory Limit: 65536 KB In how many ways can you choose ...

  10. jdbc-大数据存储

    jdbc-大数据存储 1 什么是大数据 所谓大数据,就是大的字节数据,或大的字符数据.标准SQL中提供了如下类型来保存大数据类型: 类型 长度 tinyblob 28--1B(256B) blob 2 ...