? 注：筆者的文章是根據(jù)自己當(dāng)前項(xiàng)目做的筆記砂沛，具體應(yīng)用請參照自己實(shí)際項(xiàng)目情況
//mixin.less
.frameAnimation(
@width, // 容器寬度，一般取精靈圖每一幀的寬
@height, // 容器高度
@bgi, // 精靈圖url
@bgsw, // 精靈圖寬度
@bgsh, // 精靈圖高度
@duration, // 動畫完成一個(gè)周期的時(shí)間
@keyframesName, // 動畫名稱
@step: steps(1), // 設(shè)置間隔參數(shù)，可以實(shí)現(xiàn)分步過渡
@iterationCount: 1, // 動畫播放次數(shù)
@fillMode: forwards // 動畫時(shí)間之外的狀態(tài)
) {
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);
}
}
// 循環(huán)生成animation代碼
// @frameCount是動畫的幀數(shù)熊尉，即，精靈圖的寬度 / 每一幀的寬度
.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)
}
在需要使用的地方引入調(diào)用即可
@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);
}
}
}
