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/