JS框架设计读书笔记之-动画
基础概念
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框架设计读书笔记之-动画的更多相关文章
- JS框架设计读书笔记之-节点模块
节点的创建 浏览器提供了多种手段创建API,从流行程度依次是document.createElement.innerHTML.insertAdjacentHTML.createContextualFr ...
- JS框架设计读书笔记之-核心模块
随笔记录一下读书心得 1. 框架模块-核心模块 该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码. 模块的功能主要是:对象扩展.数组化.类型判定.事件绑定和解绑.无冲突处理.模块加载 ...
- JS框架设计读书笔记之-选择器引擎01
选择符 选择符是指CSS样式规则最左边的部分,例如 p{},#id{},.class{},p.class{} 等等 总共可以分为四大类: 并联选择器 => 逗号 => $('div,spa ...
- JS框架设计读书笔记之-小知识
这一篇写一点小知识 JS中0.1+0.2为什么不等于0.3? 关于这个问题之前也很疑虑,老师也只是笼统的讲这是JS的语言问题,但是内部具体的情况却没有讲,看了书才发现原理如此简单. 简单来讲,计算机识 ...
- JS框架设计读书笔记之-异步
setTimeout/setInterval 1. 如果回调执行时间大于间隔时间,真正的间隔时间会大一些. 2. 存在一个最小的时间间隔,即使seTimeout(fn,0),在IE6-IE8中大概为1 ...
- JS框架设计读书笔记之-选择器引擎02
选择器引擎涉及相关概念 概念 以Sizzle的主函数声明为例,来说明引擎的相关概念. function Sizzle(selector, context, results, seed) { //... ...
- JS框架设计读书笔记之-函数
这次写一些函数 1.模拟Object.keys方法 Object.keys = Object.keys || function(obj){ var a = []; // a[0],a[1]...分别赋 ...
- javascript框架设计(读书笔记)
我觉得多看几本进阶的书 与其十本书读一遍,不如一本书读十遍 读书的启示: 读好书(看推荐) 精读(重复看) 能读厚书(javascript权威指南) Object.keys Object.keys=O ...
- js框架设计1.1命名空间笔记
借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩 ...
随机推荐
- windows10 下安装node失败 出现2502 2503的解决办法
下载node出现以下异常 : the install has encountered an unexpected errer installing this package.this may i ...
- ThinkPHP中foreach和volist的区别
1.foreach标签foreach标签用于循环输出:foreach(name,item,key)name(必须):要输出的数据模板变量item(必须):循环单原变量key(可选):循环的key变量, ...
- SiganlR 系列之概述
简介 SignalR 是微软的 http 长连接(以下简称长连接)框架,它的出现为我们提供了一套行之有效的实时通信的解决方案. 背景 在http 1.0 时代,preRequest 都会建立新的tcp ...
- .NET十年回顾
一. 引子 从我还是编程菜鸟时起,.NET就从来没让我失望过.总是惊喜不断. 当年我第一个项目是做个进销存.用的Winform.当时我是机电工程师.编程只是业余心血来潮而已. .NET的低门槛.V ...
- Painter's Problem poj1681 高斯消元法
Painter's Problem Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4420 Accepted: 2143 ...
- swiper拖拽之后不自动滑动问题
//swiper轮播图 var mySwiper = new Swiper('.swiper-container',{ initialSlide :0, autoplay : 3000, direct ...
- python---os模块使用详解
os模块调用操作系统接口的模块 相关方法或属性: getcwd() --- 获取当前的操作目录,等同于linux中的pwd命令. 调用:os.getcwd() chdir() --- 改变python ...
- Python实战之字符串的详细简单练习
['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__' ...
- zabbix基本操作
zabbix基本操作 ---- 2016年终总结 二 包括的内容: 添加主机 查看监控数据 添加监控项 创建触发器 创建模版 添加报警 添加媒介 添加主机 进入页面 点击Configuration(大 ...
- Swift 算法实战之路:栈和队列
这期的内容有点剑走偏锋,我们来讨论一下栈和队列.Swift语言中没有内设的栈和队列,很多扩展库中使用Generic Type来实现栈或是队列.笔者觉得最实用的实现方法是使用数组,本期主要内容有: 栈和 ...