补间动画和逐帧动画

原创 笑靥 随笔 CSS相关 186阅读 2018-09-19 15:47:48 举报

补间动画

定义

补间动画又称为中间帧动画、渐变动画,指的是人为设定动画的关键帧,而关键帧之间的过渡过程只需要由计算机处理渲染的一种动画形式。

实现手段

  1. CSS3 Animation(除steps()以为的animation-timing-function)在每个关键帧之间插入补间动画,可以通过@keyframes定义关键帧状态,可以指定除了start和end之外的节点,用百分比表示
  2. CSS3 Transition,区别去animation只能设定start和end两个关键帧状态
  3. 利用js实现动画,比如TweenJS动画库
  4. SVG,canvas动画

逐帧动画

定义

逐帧动画是一种在“连续的关键帧”中分解动画动作,就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画

实现方法

常见的是通过CSS3 animation 的steps(number_of_steps,direction)来实现逐帧动画的连续播放的

使用场景

  1. 使用png序列帧实现动画效果,原理就是通过关键帧调整background-position的值,实现位置的切换。示例:https://cssanimation.rocks/twitter-fave/
  2. 实现加载中的...效果

steps函数详解

steps(number_of_steps,direction)中第一个参数指定函数中的间隔数量(必须正整数),第二个参数可选start/end(默认),指定在每个间隔的起点或者终点发生阶跃变化。
参考如图:

特殊的:animation-timing-function支持两个与逐帧动画相关的属性值step-start(等同与steps(1,start))和step-end(等同与steps(1,end))。

steps()与animation-fill-mode

animation-fill-mode有时会影响steps()断点表现,例如
animation: move 5s forwards steps(5, end);
动画只执行一次,forwards会在动画结束时使元素保持动画帧最后的状态,于是就会出现动画分为五段,六个分段点,动画停止在第六个分段点上。这时就需要消减分段个数和动画运动的跨度。类似于
@keyframes move { 0% { left: 0; } 100% { left: 80px;//left:100px } } animation: move 5s forwards steps(4, end);

参考自:https://www.cnblogs.com/moqiutao/p/6796198.html
https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/
https://github.com/SIPC115/Poplar/blob/master/CSS/css8.md

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复