700字范文 > css图片滑动切换图_CSS帧动画

css图片滑动切换图_CSS帧动画

时间：2023-02-09 05:48:16

相关推荐

css图片滑动切换图_CSS帧动画

前言

是不是很多人认为只有连续的变化才叫动画。

上图是连续旋转变化，下图是断断续续切换状态，请查看以下两个动画：

是否认知的感觉又强烈了一点呢？

假设我把下图的 loading 播放速度加快，继续看：

是否发现和图一的 loading 一样了，是否发现认知出现了偏差？

这种肉眼可见的断断续续的动画(如图一的下图，图二的下图其实也是，只是速度快而已，感知不明显)称为帧动画，又叫序列帧动画，定格动画，逐帧动画等，是一种动画技术，其原理为将每帧不同的图像连续播放，从而产生动画效果。

简而言之，实现帧动画需要两个条件：

1. 相关联的不同图像，即动画帧；

2. 连续播放。

原理

CSS 帧动画是通过不断变换 keyframes 中每个阶段的属性来实现，如上图的例子 0% 处和 100% 处分别使用不同的 transform 属性的 rotate 实现了 loading 效果。然而 CSS 动画默认的动画过渡方式的平滑的，平滑的过渡对逐帧动画会造成类似滑动的效果，所以需要动画时间函数 animation-timing-function 中的阶梯函数 steps 属性来设置过渡方式。

PS：steps 函数衍生出了 step-start 和 step-end 两个封装函数；cubic-bezier 函数则有linear，ease，ease-in，ease-out 以及 ease-in-out。

steps

steps 指定了一个阶梯函数，接受两个参数：

1. 第一个参数接受一个整数值，表示两个关键帧之间分几步完成；

2. 第二个参数可选，接受 start 和 end 两个值，默认值为 end，指定在每个间隔的起点或是终点发生阶跃变化；

PS：step-start 等同于 step(1, start)。step-end 等同于 step(1, end)。

动画时间函数 animation-timing-function 中的阶梯函数 steps 兼容性如下：

由上图可知，无论在移动端还是 PC 浏览器中，steps 的兼容性都是非常好的。

那么来理解 steps 的工作机制，如下图：

举个栗子，方便粉友们理解，有如下CSS3动画keyframes，定义了一段从0~100px的位移：

@keyframes move {0% { left: 0; } 100% { left: 100px; }}

假设 steps 函数第一个参数值是5，则相当于把 100px 分成了 5 段，如下示例图：

假设 steps 函数第二个参数值是 start，如下示例图：

假设 steps 函数第一个参数值是 end，如下示例图：

是否瞬间思路清晰，必须感谢 CSS 大佬张鑫旭，栗子取自他的文章，有兴趣的粉友在文末找到本文相关参考文献。

稍微补充一个 animation-fill-mode 相关知识，后续会使用到。

CSS 属性的 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

animation-fill-mode 的属性值为 forwards 目标将保留由执行期间遇到的最后一个关键帧计算值，使用其则表示如下示例图：

了解上述相关知识，那么赶紧来看个小姐姐的栗子，效果图如下：

示例代码如下：

CSS 逐帧动画html, body { width: 100%;height: 100% }html, body, div { margin: 0; padding: 0; }.box{margin:50pxauto; }.sister{width:204px; height:133.3px; background:url('./images/sister.png')no-repeat00/204px800px;animation:smile3ssteps(1,end)0sforwards;}@keyframessmile{0%{background-position-y:0px;}20%{background-position-y:-133.3px;}40%{background-position-y:-266.6px;}60%{background-position-y:-400px;}80%{background-position-y:-533.3px;}100%{background-position-y:-667px;}}

示例代码中图片如下：

那么为什么上述小姐姐案例代码中的 step 第一个参数是1？

steps 是 animation-timing-function 的一个属性值，animation-timing-function 应该于两个 keyframes 之间，而非整个动画。在上述案例代码中的 keyframes 中，已经把每个帧都写出来了，因此两个 keyframes 之间的间隔是1。

于是就有了更简洁的写法，可以把 keyframes 的计算直接交给 steps 来完成。

可以把上述案例的 keyframes 处调整如下，

.sister {animation: smile 3s steps(5, end) 0s forwards;}@keyframes smile {100%{background-position-y:-667px;}}

运行效果一样，而且写法更简洁。

应用场景

CSS 帧动画可以用于实现复杂点的动画效果，动画效果更细腻，并且设计师有更多自由的发挥空间，甚至可以定义到每一个时间刻度上的展现内容。可以应用于页面的 Loading、小人物及小物体元素的简单动画。具有以下优点：

1. 可以自由控制播放、暂停和停止

2. 可以控制播放次数，播放速度

3. 可以添加交互，在播放完成后添加事件

4. 浏览器兼容性好

注意事项

素材：帧动画素材图片宽高最好是偶数，合成雪碧图的素材数量最好是偶数，帧数最好是偶数，图片拼接处最好有一定的留白。