本文是翻译国外的一篇关于使用Sass自动化处理CSS动画解决方法，听起来就很酷的样子，下面我们来具体来看看解决过程。
有一天,Harry Roberts有一段有关于他网站上的代码在twitter求教，如果有可能，在某些方面得到改善。Harry Roberts做的是使用keyframes的carousel动画，所以说使用一些数学计算是有可能得到相应改善。
“Why do we have to learn algebra, Miss? We’re never going to use it…” —Everyone in my maths class bit.ly/UaM2wf
有什么好主意？
据我所见，Harry Roberts在他的主页上使用了一个carousel动画。可以使用CSS，为什么要使用JavaScript呢，你说对吧。所以他使用CSS动画来制作Carousel动画。这听起来似乎是一个很好的想法，但直到你需要计算keyframe时，你就不会这么认为。
下面是有关于Harry Roberts对Carousel动画做的描述。
滚动Carousel(硬编码，有点让人觉得恶心！)和使用一个小动画（这个动画运动是模糊/动画）。整个Carousel动画需要计算过渡和延迟时间(比如100%)：
n * x (n - 1) * y = 100
其中n是指幻灯片的数量，x是动画在静态时的百分比，y是动画在运动时的百分比。
这个动画有5张幻灯片，根据上面描述，可以得到：
5 * x (5 - 1) * y = 100
如果知道x和n的值，我们就可以计算出y的值：
(100 - (n * x)) / (n - 1) = y
假设x选择的值为17.5（也就是动画中17.5%位置），我们知道n=5，这样可以计算出y=3.125:
(100 - (5 * 17.5)) / (5 -1) = 3.125
帧从17.5%过渡到3.125%等等，直到100%。
如果我们把x设置为15，那么可以计算出y=6.25:
(100 - (5 * 15)) / (5 -1) = 6.25
如果y运动是从"zero-or-below"，这也意味着，我们选择了x值太大。
注意，我们还有一个中间点，也就是在中间过渡帧，这个数可以这们得来：
(a * x) ((a - 1) * y) (y / 2)
问题是在n个帧哪一个帧才是中间帧。一般情况是3和4之间：
(3 * 17.5) （(3 - 1) * 3.125） (3.125 / 2) = 60.3125
这的确很混乱。
最终结果是：
<pre class="brush:css;toolbar:false">@keyframes carousel { 0% { transform: translate3d(0, 0, 0); filter: blur(0); } 17.5% { transform: translate3d(0, 0, 0); filter: blur(0); } 19.0625% { filter: blur(2px); } 20.625% { transform: translate3d(-20%, 0, 0); filter: blur(0); } 38.125% { transform: translate3d(-20%, 0, 0); filter: blur(0); } 39.6875% { filter: blur(2px); } 41.25% { transform: translate3d(-40%, 0, 0); filter: blur(0); } 58.75% { transform: translate3d(-40%, 0, 0); filter: blur(0); } 60.3125% { filter: blur(2px); } 61.875% { transform: translate3d(-60%, 0, 0); filter: blur(0); } 79.375% { transform: translate3d(-60%, 0, 0); filter: blur(0); } 80.9375% { filter: blur(2px); } 82.5% { transform: translate3d(-80%, 0, 0); filter: blur(0); } 100% { transform: translate3d(-80%, 0, 0); filter: blur(0); } }</pre>
清洁CSS动画
之前我考虑过Sass，减少动画代码。从上面的代码块中，我们不难发现，有一些关键帧是相同的。这样我们可以把代码清理清理，让整个动画变得更简单：
<pre class="brush:css;toolbar:false">@keyframes carousel { 0%, 17.5% { transform: translate3d(0, 0, 0); filter: blur(0); } 19.0625% { filter: blur(2px); } 20.625%, 38.125% { transform: translate3d(-20%, 0, 0); filter: blur(0); } 39.6875% { filter: blur(2px); } 41.25%, 58.75% { transform: translate3d(-40%, 0, 0); filter: blur(0); } 60.3125% { filter: blur(2px); } 61.875%, 79.375% { transform: translate3d(-60%, 0, 0); filter: blur(0); } 80.9375% { filter: blur(2px); } 82.5%, 100% { transform: translate3d(-80%, 0, 0); filter: blur(0); } }</pre>
Sass怎么玩
关键帧通常可以得到优化。因为@keyframes中循环的帧通常很容易产生重复的动画。我们可以试试。
首先，为了保持一致性，我们照常使用Harry的变量名：n,x和y。别忘了它们的含义：
$n是动画中的帧数
$x是动画帧的百分比，逻辑上是小于或等于100% / $n
$y是动画中每一帧的比例
$n: 5;
$x: 17.5%;
$y: (100% - $n * $x) / ($n - 1);
现在我们在@keyframes中做一个循环:
@keyframes carousel {
@for $i from 0 to $n { // 0, 1, 2, 3, 4
//Sass动画
}
}
在循环中，我们使用Harry的公式计算每一对相同的关键帧(比如41.25%和58.75%):
$current-frame: ($i * $x) ($i * $y);
$next-frame: (($i 1) * $x) ($i $y);
特别声明：小括号完全可以略去，这里只是用它们来让代码保持更干净。
现在，我们使用这些变量来生成关键帧，别忘了在里面插入正确的CSS(有关于更多的Sass内容，可以点击这里)：
#{$current-frame, $next-frame} {
transform: translateX($i * -100% / $frames);
filter: blur(0);
}
非常简单，不是吗？运行第一个循环之后，编译出CSS代码：
0%, 17.5% {
transform: translate3d(0%, 0, 0);
filter: blur(0);
}
剩下的就是Harry说的，在中间帧中添加blur()效果。我们可以使用他的公式计算出：
$halfway-frame: $i * ($x / 1%) ($i - 1) * $y ($y / 2);
#{$halfway-frame} {
filter: blur(2px);
}
这里出错了。
无效的CSS：我们预期的关键帧,比如10%，可计算出来的是-1.5625%。
正如你所看到，我们最终得到了一个负的关键帧。这在CSS规范中是禁止的，就算在Sass中也认为这是一个错误，所以我们需要确保这种事情不会发生。实际上，只有当$i为0才会发生。因此，有一个简单的方法来阻止这样的事情发生，根据规则输出$i的值：
@if $i > 0 {
#{$halfway-frame} {
filter: blur(2px);
}
}
错误解决了，这是最后的代码：
<pre class="brush:css;toolbar:false">$n: 5; $x: 17.5%; $y: (100% - $n * $x) / ($n - 1); @keyframes carousel { @for $i from 0 to $n { $current-frame: ($i * $x) ($i * $y); $next-frame: (($i 1) * $x) ($i $y); #{$current-frame, $next-frame} { transform: translate3d($i * -100% / $frames, 0, 0); } $halfway-frame: $i * ($x / 1%) ($i - 1) * $y ($y / 2); @if $i > 0 { #{$halfway-frame} { filter: blur(2px); } } } }</pre>
将这一切放在一个mixin中
到目前为止，这一切都好了？Harry的动画代码工作的很好，所以他没有再次计算。如果他想把幻灯片从5张变成4张，或者说希望动画时间更快或更慢，这一切以得重新开始。
目前我们的变量会污染全范围。同样的，如果在其他地方需要Carousel动画，需要重新设置其他变量名，然后将动画内容复制到新的动画中。这绝不是理想的做法。
这就是我们使用mixin的理由。为了让事情更易理解，我们使用实际的变量名来替代这些字母：
$n换成$frames
$x换成$static
$y换成$animating
另外，为了确保它输出不同的动，可以利用mixin多次调用不同的参数。所以我们需要再添加一个参数：动画的名字。
<pre class="brush:css;toolbar:false">@mixin carousel-animation($frames, $static, $name: 'carousel') { $animating: (100% - $frames * $static) / ($frames - 1); // Moar Sass }</pre>
由于mixin可以在不同的地方调用，为了阻止选择器包括它，可以使用@at-root确保动画输出是在根级别：
<pre class="brush:css;toolbar:false">@mixin carousel-animation($frames, $static, $name: 'carousel') { $animating: (100% - $frames * $static) / ($frames - 1); @at-root { @keyframes #{$name} { // Animation logic here } } }</pre>
在实际中，可以这样调用：
<pre class="brush:css;toolbar:false">@include carousel-animation( $frames: 5, $static: 17.5% );</pre>
编译出来的CSS:
<pre class="brush:css;toolbar:false">@keyframes carousel { 0%, 17.5% { transform: translateX(0%); filter: blur(0); } 19.0625% { filter: blur(2px); } 20.625%, 38.125% { transform: translateX(-20%); filter: blur(0); } 39.6875% { filter: blur(2px); } 41.25%, 58.75% { transform: translateX(-40%); filter: blur(0); } 60.3125% { filter: blur(2px); } 61.875%, 79.375% { transform: translateX(-60%); filter: blur(0); } 80.9375% { filter: blur(2px); } 82.5%, 100% { transform: translateX(-80%); filter: blur(0); } }</pre>
任务完成了。如果我们想在联系页面使用另一个动，可以这样使用：
<pre class="brush:css;toolbar:false"> @include carousel-animation( $name: 'carousel-contact', $frames: 3, $static: 20% );</pre>
是不是十分完美。(^_^)。
总结
这想当的完美。而Harry当初的代码容易阅读，但真的不太容易维护。使用Sass的自动化计算和循环特性，可以变得更佳方便。当然，它也使代码变得更为复杂，但这也使得它易于维护和更新。使用起来也非常的简单。
Sass
<pre class="brush:js;toolbar:false">// ---- // Sass (v3.4.0.rc.1) // Compass (v1.0.0.alpha.20) // ---- /** * Generate the carousel animation * based on the number of frames * and the pourcentage of a frame spent static * * @param {Number} $n - number of frames * @param {Number} $x - percentage of the animation spent static per frame * @param {String} $animation-name ('carousel') - animation name */ @mixin carousel-animation($frames, $static, $animation-name: 'carousel') { // Make `$static` a percentage in case it's unitless @if unitless($static) { $static: percentage($static); } // Compute the percentage of animation spent animating for each frame $animating: (100% - $frames * $static) / ($frames - 1); // Output the animation at root level // to make sure it doesn't crash if called in a selector @at-root { // Create an animation @keyframes #{$animation-name} { // Loop over the frames @for $i from 0 to $frames { // Compute keyframes $current-frame: $i * $static $i * $animating; $next-frame: ($i 1) * $static $i * $animating; $halfway-frame: $i * $static / 1% ($i - 1) * $animating $animating / 2; // Output halfway styles for blur // Avoid a negative keyframes by making sure `$i` is at least `1` @if $i > 0 { #{$halfway-frame} { filter: blur(2px); } } // Output styles for each frame #{$current-frame, $next-frame} { transform: translateX($i * -100% / $frames); filter: blur(0); } } } } } // Generate animation @include carousel-animation(5, 17.5%);</pre>
CSS
<pre class="brush:css;toolbar:false">/** * Generate the carousel animation * based on the number of frames * and the pourcentage of a frame spent static * * @param {Number} $n - number of frames * @param {Number} $x - percentage of the animation spent static per frame * @param {String} $animation-name ('carousel') - animation name */ @keyframes carousel { 0%, 17.5% { transform: translateX(0%); filter: blur(0); } 19.0625% { filter: blur(2px); } 20.625%, 38.125% { transform: translateX(-20%); filter: blur(0); } 39.6875% { filter: blur(2px); } 41.25%, 58.75% { transform: translateX(-40%); filter: blur(0); } 60.3125% { filter: blur(2px); } 61.875%, 79.375% { transform: translateX(-60%); filter: blur(0); } 80.9375% { filter: blur(2px); } 82.5%, 100% { transform: translateX(-80%); filter: blur(0); } }</pre>
您可能感兴趣的文章：
Sass和Compass的安装和使用方法
Sass自动化处理CSS动画实例教程
ESS和Sass的基本特性及区别
Laravel 5.1使用 Laravel Elixir 集成安装 Bootstrap
利用PostCSS跳进未来的CSS- JS-Republic's Blog
Sass Map 响应式排版详解教程
jQuery源码分析系列(40）: 动画设计
20个为前端开发者准备的文档和指南（3）
CSS的px值转rem值的Sublime Text 3自动完成插件
canvas实现的骨骼动画
