CSS3控制变量输出精灵图序列帧动画 frameAnime.css

柴瀚昂

2023-12-01

frameAnime.css 【CSS精灵图序列帧动画】：

资源链接：

文档案例：http://miikio.gitee.io/frame-anime.css/
备用下载：https://pan.baidu.com/s/1n1BOR33y8aC2LtZvofaocg 丨提取码：v2wr

简述：

frameAnime 是通过控制CSS变量，以CSS3动画的方式播放精灵图序列帧，达到类似于gif动图的效果。
精灵图原理：https://www.cnblogs.com/evenyao/p/9262371.html
序列帧原理：https://blog.csdn.net/qq_32849999/article/details/81874422
兼容性：浏览器需支持W3C的CSS3规范，IE下不支持使用。
优点：
- 无损画质，将每帧画面合并到一张静态图内，可避免gif的画质压缩。
- 性能卓越，只使用CSS3的特性来实现效果，不需经过JS来播放画面。
- 动态呈现，使用变量控制画面属性，可灵活变动画面效果。
缺点：
- 严谨性，制作图片时每帧画面都需要很精确，稍有偏差可能会导致画面变形。
- 封闭性，当精灵图为网格状时，每张图需填满格子不能留有空白处，否则会出现闪烁帧。
- 维护难，在修改或调整画面时，如果尺寸大小帧数等稍有改动，一般都要重新合并图片和设置变量。

变量规则：

--step: 每秒显示帧数
--frame: 单个扫描方向轴上含有帧数
--frame-x: 单个X轴上含有帧数 (设置时生效)
--frame-y: 单个Y轴上含有帧数 (设置时生效)

--un: 图片长度单位
--size: 每帧图大小，实际帧大小公式：图片短边的长度 / 扫描方向的行列数
--wh-w: 宽大于高时使用的实际图片宽高比，示例：calc(16 / 9)
--wh-y: 高大于宽时使用的实际图片宽高比，示例：calc(9 / 16)
--w: 帧画面计算宽度
--h: 帧画面计算高度

--bx: 启用向左横向扫描 ( 0: 关闭 | 1: 开启 )
--by: 启用向下纵向扫描 ( 0: 关闭 | 1: 开启 )

--r: 图片基础旋转角度
--x: 图片X轴基础偏移
--y: 图片Y轴基础偏移
--s: 图片整体缩放大小
--sx: 图片X轴缩放大小 (设置时生效)
--sy: 图片Y轴缩放大小 (设置时生效)

--o-r: 动画原始旋转角度
--e-r: 动画结束旋转角度

--o-x: 动画原始X轴偏移
--o-y: 动画原始Y轴偏移
--e-x: 动画结束X轴偏移
--e-y: 动画结束Y轴偏移

--o-sx: 动画原始X轴图片缩放大小
--o-sy: 动画原始Y轴图片缩放大小
--e-sx: 动画结束X轴图片缩放大小
--e-sy: 动画结束Y轴图片缩放大小

--iteration-self: 自身动画重复次数
--iteration-move: 自身运动重复次数

注意事项：

--step 必要参数，相当于 fps/s，影响画面输出的实际帧率。
--frame 必要参数，表示精灵图在一行或一列中含有的帧数，影响输出到画面的帧个数和帧宽高。
--frame-x 用在精灵图有多行时，表示在一行中含有的帧数，从上往下按照每行从左到右逐行扫描。
--frame-y 用在精灵图有多列时，表示在一列中含有的帧数，从左往右按照每列从上到下逐列扫描。
--frame-x 或 --frame-y 用在多行或多列时会覆盖 --frame，单行或单列时不建议设置 --frame-x 和 --frame-y。
--un 默认为页面宽高比最小的视口单位 (自适应)，页面视口宽度大于高度时为 1vh，反之 1vw。--size 为实际帧大小时应设为 1px。
--size 配合 --wh-w 或 --wh-y 使用，表示图片扫描方向相反的边的长度，按照宽高比计算大小。
--wh-w 和 --wh-y 按照图片最长的边来设置，若宽大于高只需设置 --wh-w，反之 --wh-h，值均为 图片宽度 / 图片高度。
--w 和 --y 一般不需要设置，以 --wh-x 或 --wh-y, --size, --frame 计算宽高度即可。
--bx 和 --by 控制动画的帧扫描方向，--bx: 1; --by: 0;表示向左横向扫描，--bx: 0; --by: 1;表示向下纵向扫描。
--r 控制画面的基础旋转角度，--o-r, --e-r 分别表示动画开始时和结束时的旋转角度与基础旋转角度之和。
--s 控制画面的整体缩放大小，--sx, --sy 分别单独控制X轴和Y轴的缩放大小，负数时显示方向为反方向。
--x , --y 分别控制画面的X轴和Y轴的基础偏移，按照帧画面宽高百分比计算。
--o-x, --o-y, --e-x, --e-y 与 --o-r, --e-r 同理，均为控制自身运动的X轴和Y轴的偏移，按照帧画面宽高百分比计算。
--o-sx, --o-sy, --e-sx, --e-sy 与 --o-r, --e-r 同理，均为控制自身运动的X轴和Y轴的缩放大小。
--iteration-move 包含精灵图动画的旋转、缩放、偏移。
--iteration-self 仅包含精灵图动画的帧画面变化。

用法：

基础用法：

<head>
	<link rel="stylesheet" href="frameAnime.css" />
	<style>
		.img {
			/* frameAnime CSS变量自定义参数 */
			background-image: url(...);
		}
	</style>
</head>
<body>
	<div class="frameAnime img"><div>
</body>

暂停/停止播放动画：

<!-- 为元素添加类名 pause 暂停动画，画面帧中途暂停，取消后继续从当前暂停帧播放 -->
<div class="frameAnime img pause"><div>

<!-- 为元素添加类名 end 停止动画，画面回到起始帧 -->
<div class="frameAnime img end"><div>

精灵图含有多个扫描轴时初始化配置 (使用 js)：

<div class="frameAnime _x2 img"><div>
<div class="frameAnime _y3 img"><div>

<!-- 精灵图含有多个扫描轴时需要添加 JavaScript，只有单个轴时不需要添加 -->
<script type="text/javascript" src="frameAnime.js"></script>
<script>
	// 初始化页面内多行多列帧动画的源配置
	frameAnime_init();
</script>

精灵图含有多个扫描轴时亦可按需添加多行或多列动画规则 (不使用 js)：

类命名规则：前缀类 frameAnime + 命名类 _x[Number] 或 _y[Number]
示例命名：
- .frameAnime._x5 : _x表示帧动画从上往下按照每行从左到右逐行扫描，5表示共逐行扫描5行
- .frameAnime._y4 : _y表示帧动画从左往右按照每列从上到下逐列扫描，4表示共逐列扫描4列

需添加的 CSS 格式 (注意 @keyframes 的规律性)：

/* 需要注意 _x[Number] 所指向的扫描轴数量 */
.frameAnime._x5 {
    --frame-y: 5;  /* 表示扫描轴为X轴共5行，Y轴是每行扫描轴的叠放方向 */
    --w: calc(var(--size) * var(--wh-w) * var(--frame-y));
    --h: calc(var(--size) / var(--wh-h) * var(--frame-y));
    animation:
        frameAnime-self_x5 calc(1s / (var(--step) / var(--frame-x, var(--frame)))) steps(var(--frame-x, var(--frame))) var(--iteration-self),
        frameAnime-move calc(1s / (var(--step) / var(--frame))) steps(var(--frame)) var(--iteration-move);
}
/* 把逐行关键帧分成5份，每份的值为 100% / 5 累加 */
@keyframes frameAnime-self_x5 {
    0%, 20% { --a-self_x5: 0; }
    20.001%, 40% { --a-self_x5: 0.2; }
    40.001%, 60% { --a-self_x5: 0.4; }
    60.001%, 80% { --a-self_x5: 0.6; }
    80.001%, 100% { --a-self_x5: 0.8; }
    20.001%, 40.001%, 60.001%, 80.001% {
    	background-position: 0 calc(var(--un) * var(--h) * var(--a-self_x5) * -1);
	}
    20%, 40%, 60%, 80%, 100% {
    	background-position: calc(var(--un) * var(--w) * -1) calc(var(--un) * var(--h) * var(--a-self_x5) * -1);
	}
}

.frameAnime._y4 {
    --frame-x: 4;  /* 表示扫描轴为Y轴共4列，X轴是每列扫描轴的叠放方向 */
    --w: calc(var(--size) * var(--wh-w) * var(--frame-x));
    --h: calc(var(--size) / var(--wh-h) * var(--frame-x));
    --bx: 0;
    --by: 1;
    animation:
        frameAnime-self_y4 calc(1s / (var(--step) / var(--frame-y, var(--frame)))) steps(var(--frame-y, var(--frame))) var(--iteration-self),
        frameAnime-move calc(1s / (var(--step) / var(--frame))) steps(var(--frame)) var(--iteration-move);
}
@keyframes frameAnime-self_y4 {
    0%, 25% { --a-self_y4: 0; }
    25.001%, 50% { --a-self_y4: 0.25; }
    50.001%, 75% { --a-self_y4: 0.5; }
    75.001%, 100% { --a-self_y4: 0.75; }
    25.001%, 50.001%, 75.001% {
    	background-position: calc(var(--un) * var(--w) * var(--a-self_y4) * -1) 0;
	}
    25%, 50%, 75%, 100% {
    	background-position: calc(var(--un) * var(--w) * var(--a-self_y4) * -1) calc(var(--un) * var(--h) * -1);
	}
}

更多案例请参考文档：http://miikio.gitee.io/frame-anime.css/

CSS3控制变量输出精灵图序列帧动画 frameAnime.css

frameAnime.css 【CSS精灵图序列帧动画】：

相关阅读

相关文章

相关问答

相关文档