用 LESS 写一个帧动画类型的函数 / LESS keyframes loop method

less loop.md

用 LESS 写一个 可复用的 帧动画类型的 函数 / A css keyframes loop with LESS

For example , you have a css animation like this

/* CSS */
@keyframes demo {
	0% { background-image: url(../img/demo/1.png); }
	20% { background-image: url(../img/demo/2.png); }
	40% { background-image: url(../img/demo/3.png); }
	60% { background-image: url(../img/demo/4.png); }
	80% { background-image: url(../img/demo/5.png); }
	100% { background-image: url(../img/demo/6.png); }
}

Its easy when you got limit items to play, but when you got much more items, this will become a long boring thing.

So, what we are doing now is about to handle this kind of situation.

Use less, we could wirte a function like below, then we can handle any numbers items keyframe animation.

我们可以用 less 写一个适用于任意数量的、任意帧动画类型（更换 background-image 、更换 background-positon）的方法

// LESS
.element {
  	animation: demo 2s steps(1); //每秒少于48祯的动态图就会导致闪烁，所以如果不使用steps()会导致图像之间过度时的不连贯，使用steps(1)则每祯跳帧结束直接到下一帧开始，放弃中间的 css 默认的过度效果
}
@keyframes demo {
	.circle(45); // 比如，你有 45 祯的图像需要做成一个动画，传递过去的这个参数 45 既是下边函数中的 第一个参数 @n
	
	.circle(@n, @i:0) when (@i < @n) {
		@j: @i + 1; // 图片从1.png开始，比如 @n 为 45，则最后一张加载的为 45.png
	
		@a: @n - 1; // 通过 图片数 - 1 算出 0% ~ 100% 中选择器的数目
		@b: 1 / @a * 100; // 小数 * 100 换算成百分数的分子；
		@c: @b * @i; // 具体到各个 % 选择器的分子；
		@x: round(@c, 2); // 使用 less round 函数小数点两位后取整数
		@selector:e('@{x}%'); // 使用 less e 函数变为选择器,注意！！直接套用或者使用 percentage 函数无法识别
	
		@{selector}{
			background-image: url('../img/demo/@{j}.png'); // 图片从1.png开始
		}
		.circle(@n, (@i + 1));
	}
}

66666