資訊專欄INFORMATION COLUMN
摘要：參考環(huán)形路徑平移的方案，做一些調整，就可以得到型路徑平移的寫法這里初始把元素放在了上面那個半圓環(huán)的圓心，然后在的關鍵幀位置切換為下面的半圓環(huán)路徑。
最近在CSS Secrets一書看到了這樣一節(jié)：讓一個元素沿環(huán)形路徑平移。這是一個css動畫的問題，但卻沒有看上去那么簡單，其關鍵點是元素是平移的，也就是說，元素自身并不發(fā)生旋轉，只是穩(wěn)定地沿著一個環(huán)形的路徑移動，像這樣：
在書中作者Lea Verou已經給出了解答（實際上，可以追溯到作者更早的這篇博文），不過，我認為再補充一點周邊細節(jié)知識可能會更易于理解。因此，本文整理了一些東西，將嘗試更詳細地解答這個問題。
從旋轉動畫開始最開始看到這個問題的時候，會很容易想到用transform-origin定義圓心的位置，然后用rotate()進行旋轉。css代碼大概是這樣（半徑為150px）：
@keyframes spin {
to {
transform: rotate(1turn);
}
}
.avatar{
animation: spin 10s infinite linear;
transform-origin: 50% 150px;
}
搭配的html很簡單：
對應的效果是：
可以看到，這是一個旋轉動畫，元素在沿著環(huán)形路徑移動的同時，自身也會圍繞圓心發(fā)生旋轉。因此，這并不是我們想要的平移效果。
但另一方面，元素沿環(huán)形路徑移動這一點是符合我們的目標的。所以，可以在這個基礎上思考如何改進。
利用多元素的變形相消w3c的The Transform Function Lists里提到：
If a list of
is provided, then the net effect is as if each transform function had been specified separately in the order provided.
意思是，當一個元素的transform添加了多個變換函數時，其效果等同于按照這些變換函數的順序依次分散添加在多層元素中。例如，以下元素：
其變換結果等效于：
這是一條非常有用的規(guī)則。現在，假如有一個應用了旋轉變換函數的元素是：
顯然，這個元素其實是沒有旋轉的，因為兩個旋轉變換函數剛好抵消。這時候，我們再用一下前面的規(guī)則，就知道它等同于：
也就是說，內層元素可以通過變形來抵消外層的變形效果。
現在回到旋轉動畫，既然元素已經是沿環(huán)形路徑移動了，我們要做的就是抵消掉元素自身的旋轉。參考上面的原理，我們可以增加一個容器元素：
然后為它們搭配不同的動畫：
@keyframes spin {
to { transform: rotate(1turn); }
}
@keyframes spin-reverse {
from { transform: rotate(1turn); }
}
.avatar {
animation: spin 10s infinite linear;
transform-origin: 50% 150px;
}
.avatar > img {
animation: spin-reverse 10s infinite linear;
}
這段代碼把旋轉動畫搬到了div.avatar這個容器元素上，然后為
對應的css：
@keyframes spin {
from { transform:
translate(50%, 150px) rotate(0turn) translate(-50%, -150px)
translate(50%, 50%) rotate(1turn) translate(-50%, -50%); }
to { transform:
translate(50%, 150px) rotate(1turn) translate(-50%, -150px)
translate(50%, 50%) rotate(0turn) translate(-50%, -50%); }
}
.avatar {
animation: spin 10s infinite linear;
}
上面的代碼特意把transform的值分成兩行，分別代表原來的兩個元素各自的變換函數。到此，這段代碼就已經可以讓單個元素達成前文的兩個元素的效果了。不過，這段代碼還比較冗長，可以再做一點簡化。
我們很清楚transform的變換函數的順序很重要，不能隨意交換，但相鄰的同類變換函數可以考慮合并。
首先，可以找到位于中間的translate(-50%, -150px)和translate(50%, 50%)可以合并，得到translateY(-150px) translateY(50%)（百分比和像素值則不能再合并）。
然后，以from的部分為例，注意rotate(0turn)和rotate(1turn)分別來自原來的兩個元素，它們的角度值是為了互相抵消準備的，因此必須和為360deg（1turn = 360deg）：其中一個的角度值為x，另一個則為360 - x。
也就是說，元素在rotate(0turn)之前（未發(fā)生旋轉），和rotate(1turn)之后（發(fā)生了兩次旋轉），元素的角度是一致的（合計剛好轉了360deg），此時發(fā)生的translate()也可以合并。以此找到最前的translate(50%, 150px)和最后的translate(-50%, -50%)，它們可以合并，得到translateY(150px) translateY(-50%)。
至此，代碼變?yōu)椋?/p>
@keyframes spin {
from { transform:
translateY(150px) translateY(-50%) rotate(0turn)
translateY(-150px) translateY(50%) rotate(1turn); }
to { transform:
translateY(150px) translateY(-50%) rotate(1turn)
translateY(-150px) translateY(50%) rotate(0turn); }
}
.avatar {
animation: spin 10s infinite linear;
}
代碼雖然看起來沒怎么變短，但變換函數更細致明確了。最后，注意最開始的兩個translateY()，它們在from和to里都是一樣的，因此，完全可以在動畫之外，一開始就把元素放在那個位置，從而消除這兩個translateY()。
實際上，這兩個translateY()的位移做的事就是把這個元素放到環(huán)形路徑的圓心。
這樣，代碼再變?yōu)椋?/p>
@keyframes spin {
from { transform:
rotate(0turn)
translateY(-150px) translateY(50%)
rotate(1turn); }
to { transform:
rotate(1turn)
translateY(-150px) translateY(50%)
rotate(0turn); }
}
.avatar {
animation: spin 10s infinite linear;
}
這就是精簡后的單元素環(huán)形路徑平移的解決方案了。代碼直觀看上去，可能會覺得比較難理解，畢竟它是我們經過前面這樣一大段的分析推理得到的。
盡管如此，也有一篇文章介紹了如何直接理解這段環(huán)形路徑平移的代碼，推薦有興趣的你看看。
一點額外的嘗試 螺旋路徑平移在環(huán)形平移路徑的代碼的基礎上，改變起點或終點的圓環(huán)半徑，可以得到螺旋路徑：
@keyframes spin {
from { transform:
rotate(0turn)
translateY(-150px) translateY(50%)
rotate(2turn); }
to { transform:
rotate(2turn)
translateY(-50px) translateY(50%)
rotate(0turn); }
}
對應的效果：
這里為了體現螺旋效果，把圈數增加到了2圈。
S形路徑把兩個環(huán)形各取一半拼在一起，就可以得到S型路徑。參考環(huán)形路徑平移的方案，做一些調整，就可以得到S型路徑平移的寫法：
@keyframes spin{
0%{
transform:
rotate(-90deg) translateX(50px) rotate(90deg);}
49.9%{
transform:
rotate(-270deg) translateX(50px) rotate(270deg);}
50.0% {
transform:
translateY(100px) rotate(-90deg) translateX(50px) rotate(90deg);}
100% {
transform:
translateY(100px) rotate(90deg) translateX(50px) rotate(-90deg);}
}
這里初始把元素放在了上面那個半圓環(huán)的圓心，然后在50.0%的關鍵幀位置切換為下面的半圓環(huán)路徑。由于這個切換過程會讓元素小小地停滯一下，并不是我們想要的動畫，所以這里用帶小數的關鍵幀位置來盡可能縮短它的時長，使整個動畫更平滑。最終效果是：
一點補充matrix()是transform里一個特殊的變換函數，它可以通過矩陣乘法把rotate()、translate()等其他變換函數全部合并在一起。但是，matrix()并不能簡化本文的動畫代碼，因為css動畫將無法確認如何生成關鍵幀之間的補間動畫，如果關鍵幀里只有一個合并后的matrix()，css動畫只會按照平鋪的方式去完成過渡。
以文章最開始的旋轉動畫為例，rotate(1turn)轉換后是matrix(1, 0, 0, 1, 0, 0)，但如果直接寫：
@keyframes spin {
to {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
結果就是，什么也不會發(fā)生。
結語只通過一個transform加上一段神秘代碼，就可以做這樣特別的動畫，我覺得是很有意思的。希望本文的這樣一番解讀，可以幫助你加深對css的transform的理解。
（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2016...）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111698.html
摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要：整理一個繪制環(huán)形進度條的，需要的同學拿去用即可定義繪圖區(qū)域在頁面的任何位置，添加繪圖面板。 showImg(https://segmentfault.com/img/bVrm3V); 整理一個svg繪制環(huán)形進度條的demo，需要的同學拿去用即可 定義svg繪圖區(qū)域 在html頁面的任何位置，添加svg繪圖面板。定義svg繪圖區(qū)域大小 繪制一個圓形 cx 和 cy 屬性定義圓點的 x ...
摘要：第一部分是正方體部分，第二部分是中的路徑動畫了，第三部分則是交互旋轉。然后在立方體元素上添加鼠標點擊事件事件，在回調函數中做處理內容。回調函數中先記錄下來鼠標點擊的位置。 1.前言 我使用了jquery編寫交互的旋轉，因為初學所以不太承受，還請見諒。樣式我是寫stylus編碼，自動生成css。 2.正文 先放上一張效果圖showImg(https://segmentfault.com...
閱讀 2296·2023-04-25 16:42
閱讀 1202·2021-11-22 14:45
閱讀 2338·2021-10-19 13:10
閱讀 2827·2021-09-29 09:34
閱讀 3408·2021-09-23 11:21
閱讀 2100·2021-08-12 13:25
閱讀 2180·2021-07-30 15:15
閱讀 3491·2019-08-30 15:54
