less封装一个播放精灵图的mixin

☼ 注：笔者的文章是根据自己当前项目做的笔记，具体应用请参照自己实际项目情况

//mixin.less
.frameAnimation(
    @width, // 容器宽度，一般取精灵图每一帧的宽
    @height, // 容器高度
    @bgi, // 精灵图url
    @bgsw, // 精灵图宽度
    @bgsh, // 精灵图高度
    @duration, // 动画完成一个周期的时间
    @keyframesName, // 动画名称
    @step: steps(1), // 设置间隔参数，可以实现分步过渡
    @iterationCount: 1, // 动画播放次数
    @fillMode: forwards // 动画时间之外的状态
) {
    width: @width;
    height: @height;
    background-image: @bgi;
    background-size: @bgsw @bgsh;
    animation: @keyframesName @duration @step @iterationCount @fillMode;
    @keyframes @keyframesName {
        0% {
            width: @width;
            height: @height;
            background-image: @bgi;
            background-size: @bgsw @bgsh;
        }
        .createFrameAnimationSteps(@bgsw / @width, @width);
    }
}
// 循环生成animation代码
// @frameCount是动画的帧数，即，精灵图的宽度 / 每一帧的宽度
.createFrameAnimationSteps(@frameCount, @bpx, @bpy: 0px, @i: 1) when(@i < @frameCount) {
    @step: (100 / @frameCount) * @i * 1%;
    @{step} {
        background-position: -@bpx * @i @bpy;
    }
    .createFrameAnimationSteps(@frameCount, @bpx, @bpy, @i + 1)
}

在需要使用的地方引入调用即可

@import '~@/assets/mixin.less';
.frame_animation {
    position: absolute;
    bottom: 35%;
    left: 0;
    z-index: 9999;
    .sprite {
        .frameAnimation(400px, 450px, url('~@/static/img/example/c-tiaoru.png'), 6800px, 450px, 2.4s, run);
        &.rollback {
            .frameAnimation(400px, 450px, url('~@/static/img/example/c-tiaochu.png'), 4800px, 450px, 2.4s, back);
        }
    }
}