css3 animation 中的 steps
steps
Specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value ‘start’ or ‘end’, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value ‘end’.
粗略翻译如下: steps 函数指定了一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数);第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。
这样理解起来可能还是有点抽象,我们来个实例:
#demo {
animation-iteration-count: 2;
animation-duration: 3s;
}
这是一个 3s * 2 的动画,我们分别对它应用 steps(3, start)
和 steps(3, end)
,做出阶跃函数曲线如下:
1. steps(3, start)
steps() 第一个参数将动画分割成三段。当指定跃点为 start 时,动画在每个计时周期的起点发生阶跃(即图中 空心圆 → 实心圆 )。 由于第一次阶跃发生在第一个计时周期的起点处(0s),所以我们看到的第一步动画(初态)就为 1/3 的状态,因此在视觉上动画的过程为 1/3 → 2/3 → 1 。如果翻译成 JavaScript,大致如下:
var animateAtStart = function (steps, duration) {
var current = 0;
var interval = duration / steps;
var timer = function () {
current++;
applyStylesAtStep(current);
if (current < steps) {
setTimeout(timer, interval);
}
};
timer();
};
2. steps(3, end)
当指定跃点为 end,动画则在每个计时周期的终点发生阶跃(即图中 空心圆 → 实心圆 )。 由于第一次阶跃发生在第一个计时周期结束时(1s),所以我们看到的初态为 0% 的状态;而在整个动画周期完成处(3s),虽然发生阶跃跳到了 100% 的状态,但同时动画结束,所以 100% 的状态不可视。因此在视觉上动画的过程为 0 → 1/3 → 2/3 (回忆一下数电里的异步清零,当所有输出端都为高电平的时候触发清零,所以全为高电平是暂态)。同样翻译成 JavaScript 如下:
var animateAtEnd = function (steps, duration) {
var current = 0;
var interval = duration / steps;
var timer = function () {
applyStylesAtStep(current);
current++;
if (current < steps) {
setTimeout(timer, interval);
}
};
timer();
};
css3 animation 中的 steps的更多相关文章
- animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
- CSS3 Animation 帧动画 steps()
@keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ...
- 深入理解CSS3 Animation 帧动画 ( steps )
作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...
- css3动画中的steps值详解
css3的动画的animation-timing-function属性定义了动画的速度曲线,一般的速度曲线大家都知道,什么ease,linear,ease-in,ease-out,还有自定义贝塞尔曲线 ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- CSS3 animation的steps方式过渡
animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果 是连贯性的.除了ease,linear.cubic-bezier之类的过渡函数都会为其插入补间. 但有些效果不 ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- 浅谈CSS3动画的凌波微步--steps()
背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...
- CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
随机推荐
- excel 补全全部空格
首先全选列或者选中某列,按F5键.再按"定位条件„"button,选择空值,这样就把全部列的空格选中了,然后直接输入"你想要替换的值",再按Ctrl + 回车
- hdu 4193 单调队列
题意是给你n个数 组成的环 求以一个数开头 的数列全部前缀都为非负数的数列的个数: 思路: 先扩展成2*n的数列 然后求出sum[i]表示前i项的和 对每一个i>.=n结尾的数 ...
- A new Graph Game
点击打开链接 题意:给你一张N个节点的无向图.然后给出M条边,给出第 I 条边到第J条边的距离.然后问你是否存在子环,假设存在,则输出最成环的最短距离和 解析:构图:选定源点及汇点,然后将源点至个点流 ...
- Java 实现的断点下载
该断点下载可应用于浏览器或者迅雷等下载工具的下载,实现方式有多种多样的,本文仅仅研究了单线程的下载.迅雷等下载工具会自己主动将下载资源分块并记录每块的起始位置,然后依据系统性能.起多线程下载. 1. ...
- go语言笔记——是c开发的 lex yacc进行词法和语法分析,go不支持函数和运算符重载,不支持类型继承,也不支持断言,还有泛型
从 Go 1.0.3 版本开始,不再使用 8g,8l 之类的指令进行程序的构建,取而代之的是统一的 go build 和 go install 等命令,而这些指令会自动调用相关的编译器或链接器. 如果 ...
- 看看 SDWebImage内部基本实现过程
一.实现流程 入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后 SDWebImageManager 根据 ...
- jsp jquery js 的基本路径获取
引子:js中需要当前页面的基础路径,获取不到request,可以通过如下方法来解决! 1.jsp基础路径,在jsp头部加上,获取基础路径http://localhost:8080/project/ ...
- androd基础入门---1环境
1.项目结构特性 2.模拟器设置 3.编译器的下载 直接点击运行即可
- ie8 js编译器对象为空或不是对象的一个小问题
昨天在遍历json串的时候碰到了如下图所示的问题,除ie8以下版本的浏览器运行都是正常的, 部分代码如下: 1 var Workmodel=function(){ 2 model_json=[ 3 { ...
- ubuntu 更显列表 [Connecting to archive.ubuntu.com (2001:67c:1360:8001::21)] 超时的解决方法
问题描述: 在使用apt-get update 时更行列表,显示[Connecting to archive.ubuntu.com (2001:67c:1360:8001::21)]超时 分析: 我已 ...