天津建设合同怎么在网站录入,html5国内网站,推动,wordpress 课程管理#x1f389; 一、前言
css3的animation想必大家都知道吧#xff0c;那 steps 逐帧动画你知道吗#xff1f;对于我来说#xff0c;实际工作及练习中也很少用到这种跳跃式变化的动画#xff0c;而它start和end的解释又比较“不说人话”#xff0c;以前用到steps动画的时候… 一、前言
css3的animation想必大家都知道吧那 steps 逐帧动画你知道吗对于我来说实际工作及练习中也很少用到这种跳跃式变化的动画而它start和end的解释又比较“不说人话”以前用到steps动画的时候常常是靠调试来回设置start和end主打的就是瞎猫碰上死耗子。虽然之前也看过关于他们区别的文章但都是半知半解过两天就剩零知零解了。最近忙里偷闲我终于打算一探究竟了我倒要看看start和end到底有什么区别 顺便写几个小demo造福一方 二、逐帧动画介绍
animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态时我们称为线性变化浏览器会在每个关键帧之间插入补间动画所以动画效果是连贯性的这也就是我们常用的 补间动画。
而steps()逐帧动画则是跳跃式变化如果说补间动画是一个滑坡式的变化那么逐帧动画就是阶梯式变化它的变化没有中间过程。补间动画就像你看的普通动画片而逐帧动画就像是那种定格动画。
语法: animation-timing-function: steps(number, [end | start])参数说明 number参数指定了时间函数中的间隔数量必须是正整数 第二个参数是可选的可设值start和end表示在每个间隔的起点或是终点发生阶跃变化如果忽略默认是end。 三、图解图解 step-start 和 step-end 区别
什么叫在间隔的起点或终点发生变化呢光看文字十有八九看不懂下面就用示例代码来说明。 上图是我ps的一张图尺寸为200*750共5个色块每个色块高度150。 在示例代码中我将以这张图为背景每一帧将背景上升一个色块的高度。关键代码如下
animation: ani 5s 2s steps(5,start) infinite backwards;keyframes ani{100%{background-position:0px -750px;}
}在设置动画前的初始状态 再直接来看看动画末态的情况 一个色块150px所以动画末态是背景图片向上移动750px。 为了完整的看到动画效果我设置了2秒的动画延迟 我们设置的steps的第一个参数number为 5 也就是把整个动画过程切割成5个片段如下图 在实验之前先来分析一下既然是片段那必然有片段的起点和终点可以把补间动画看作点而逐帧动画则是面。那么这五个片段的起点终点是哪呢如下图 你会发现动画是由6个点切成段五段带着这个思路开始下面的实验。 先来看一下设置 start 的效果: 你会发现色块1怎么不显示了甚至在动画没开始前也就是延时阶段直接就显示了【2】变化过程为 2 - 3 - 4 - 5 - 空 分析一下就可以想到start是在间隔的起点发生阶越变化即开始直接就发生变化了第一段直接阶越到了第一段结束的位置。 再来看下设置 end 的效果 你发现动画变正常了动画过程是从【1】到【5】。 再分析一下因为end是在间隔终点发生阶越变化即每一段都会在其开始阶段进行停留这一段结束后才会发生变化直接阶越到下一段的开始状态。 总结
可以将补间动画和 steps 逐帧动画类比于点和线的区别steps切割开的每个动画片段就是一条样式不变的线而线都有首尾两个点。 设置 start 的 steps 的动画总是在开始发生变化即逐帧显示每一段的终点 而设置 end 的 steps 的动画总是在结束发生变化即逐帧显示每一段的起点
其实很简单的道理为什么总是记不住呢因为他和人的惯性思维恰好相反。设置start总觉得是显示每一段的开头可它恰好相反start是开头发生变化显示的都是每一段的结尾。 另一种理解思路 steps(number, [end | start]) 是将动画分为number段共有number 1帧画面。start就是抛弃第一帧画面执行动画end就是抛弃最后一帧画面执行动画。 注意 第二个参数还有两个内置值step-start等同于steps(1,start)动画分成1步2个节点抛弃第一个节点即显示结尾节点的状态同理step-end等同于steps(1,end)。
jump-start在每个时间间隔开始的时候跳1步到下一状态位置 jump-end在每个时间间隔结束的时候跳1步到下一状态位置 jump-both在每个时间间隔开始和结束的时候跳1步到下一状态位置跳步次数会比预设的多一次 jump-none在每个状态位置停留够一个时间间隔才跳到下一位置跳步次数会比与预设的少一次 四、思考
上面我只设置了动画100%时的状态那如果我设置了多个关键帧的状态呢那还是以整个动画过程切割成number段吗
我们再来做几个实验
实验1:
我们将动画时间由5秒改成10秒为了方便观察我们设置steps第二个参数为end放弃第一帧画面然后将原先的动画末态改到50%并在动画100%时增加边框。·
animation: ani 10s 2s steps(5,end) infinite backwards;keyframes ani{50%{background-position:0px -750px;}100%{border: 100px solid red;}
}结果如下图 观察后发现在10秒的完整动画期间background-position的变化过程是图像显示由1到5再由5到1共变化了 【10】 次而我设置的steps的number参数是 【5】这就打破了上面我说的以整个动画过程切割成number段的假说。 同时可以观察到border的变化过程共进行了5次因为我们只在100%的时候设置了border。 得出结论 steps的number参数并不是将整个动画过程切割成number段而是对于某个css样式来说每一段关键帧的变化切割成number段。 实验2:
假想上面我们只在动画100%的时候设置了100px的boder如果我们在50%的时候也设置border并且状态恰好是100%的一半这样对于动画0%到100%是一个流畅的线性变化。请问这时候动画还会被切成5段吗 观察发现动画被切成了10段。 得出结论 即使将几个关键帧的css变化设置的具有规律性但是steps仍然会将每段关键帧的变化切割成number段即只要在这个关键帧里设置了某个css那么对于这个css来说这个关键帧就会被视为steps动画的端点。 实验3:
那既然每段关键帧都会被steps切割成number段那每段的steps动画执行的时间怎么划分呢其实想想就能想到应该是按照关键帧占整个动画过程的比例分割整个动画时间。 如下图设置boder【0%-50%】宽度由0到100【50%-75%】宽度由100到0【75%-100%】宽度由0到100 很明显可以观察到border宽度变化的时间为 2:1:1即验证了我上面的推论。
⚔ 五、steps() 动画实践
下面我举几个steps() 动画的使用场景。
1. 动物或人物的动作变化–铁山靠
用一张人物动作关键帧的长图和上面的案例一样通过修改背景图片位置实现动物或人物的动作变化。作为一名蒸爱粉我给哥哥做了一个跳舞的动画
jcode
2. 打字机效果–“只因你太美”
打字机的原理是用一个和文字总宽度一样的div覆盖文字并用这个div的边框设置steps()动画实现光标效果然后减小div宽度每一帧减小一个文字的宽度让下面文字漏出来就好了\
点击运行查看效果
jcode
3. 纯css实现倒计时
我这里提供了两种实现方案准确来说是三种
方案1: var() css变量 counter-reset计数器 property规则 steps()逐帧动画 使用css变量和counter-reset计数器来实现倒计时的数字只要设置动画在5秒内将变量由5变为0即可实现倒计时但是变量的变化是不会被浏览器添加补间动画的即只会在5秒后直接变成0而不会有中间5-4-3-2-1-0的过程这时我们再利用property关键字为这个变量配置规则实现数字变化的动态过程 而最后出现的 “Go” 可以利用step-end逐帧动画在5秒后将文字修改成 “Go”或者利用counter-style关键字自定义计数器规则在变量变化到0的时候定义一个symbols符号。 如果你不了解counter-reset、property和counter-style可以查看以下两篇文章 CSS counter-reset 属性 mdn 关于property API 说明 mdn 关于counter-style 说明 点击运行查看效果
jcode
方案2: 只用steps()逐帧动画 其实这个就很简单了所有的数字和最后的 “GO” 都在html里写死并设置等高然后就可以向上面移动图片位置一样移动这些数字进行显示了。
点击运行查看效果
jcode
4. 其他应用场景
平常工作中可以用到steps()逐帧动画的场景也有很多
例如在延迟n秒后修改元素某个样式常规可能需要用js写个延时器动态修改它的css这完全可以用step-start动画代替再比如除了上面那种大屏的倒计时普通的时分秒倒计时也可以用steps代替js实现实现原理也简单就是将 0-9 制作成一张精灵图然后时分秒每个单位都各自用这个精灵图当作背景例如对于秒的数字可以设置动画时长为10s动画函数为steps(10,start)这样每次数字变化都是 1s同理对于分的数字设置动画时长为 600s,动画函数为steps(10,start)这样每次数字变化都是 60s。 六、写在最后
我是喜欢归纳总结前端相关知识的前端阿彬尽力持续输出原创优质文章欢迎点赞关注
往期文章 # 2023 前端 SEO 无死角解读 # 我给自己搭建的前端导航网站你们都别用 # 2023 最新最细 vitevue3ts 多页面项目架构建议收藏备用 # 浅谈 强制缓存/协商缓存 怎么用 # 2023 前端性能优化清单
