现有如下雪碧图，实现逐帧动画
所以需要结合css3 animation的steps() 属性，我理解的steps的第一个参数的代表的是在一个动画间隔里分几步实现。
比如上图中的动画分为9帧，每一帧宽度为291px,如果我的 @keyframe 写法如下
@keyframes stepMonkey {
0% {
background-position: 0;
}
100% {
background-position: -8*291px;
}
}
那么此动画的animation的step 可以设置为steps(9) , 即表示在一个keyframe关键帧里，分成了9段实现的。
或者@keyframe也可以这么写
@keyframes setpmonkey {
0% {
background-position: 0;
}
12.5% {
background-position: -1*291px;
}
25% {
background-position: -2*291px;
}
27.5% {
background-position: -3*291px;
}
50% {
background-position: -4*291px;
}
62.5% {
background-position: -5*291px;
}
75% {
background-position: -6*291px;
}
87.5% {
background-position: -7*291px;
}
100% {
background-position: -8*291px;
}
}
那么此动画的animation的step 可以设置为steps(1) , 即表示在9个keyframe关键帧里，每帧都是一步实现。
然后因为图片是固定宽高，设计稿动态图不一定会是固定宽度 291px，所以需要将keyfarme里的 291px换成可传参的形式。
结合 scss 实现关键代码如下：
@mixin keyframes($animationName) {
@keyframes #{$animationName} {
@content;
}
}
然后上面的代码可分别简化为
@mixin stepMonkey($width: 291px) {
background: url('../src/assets/monkey-step.png') 0 0 no-repeat;
background-size: cover;
animation: stepMonkey 0.5s steps(9) infinite;
@include keyframes(stepMonkey) {
0% {
background-position: 0;
}
100% {
background-position: -9*$width;
}
}
}
@mixin stepMonkey($width: 291px) {
background: url('~@/assets/images/box/monkey-step.png') 0 0 no-repeat;
background-size: cover;
animation: stepMonkey 0.5s steps(1) infinite;
@include keyframes(stepMonkey) {
@for $i from 0 through 8 {
#{$i*12.5}% {
background-position: -$i*$width;
}
}
}
}
点此查看demo ~~~~~~~~
