CSS組合動畫實現(xiàn)弧形軌跡_html/css

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 16:36:35

CSS組合動畫實現(xiàn)弧形軌跡_html/css

CSS組合動畫實現(xiàn)弧形軌跡_html/css_WEB-ITnose:CSS中的animations 以及 transitions都擅長實現(xiàn)從點A到點B的直線動畫。無論你如何調(diào)整貝塞爾曲線，你都無法通過animation和transitions讓元素沿著曲線運動。自定義線性方法可以產(chǎn)生彈性效果，但是X軸，Y軸上的相對運動還是相同的。當然可以使用JavaSc

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀CSS組合動畫實現(xiàn)弧形軌跡_html/css_WEB-ITnose:CSS中的animations 以及 transitions都擅長實現(xiàn)從點A到點B的直線動畫。無論你如何調(diào)整貝塞爾曲線，你都無法通過animation和transitions讓元素沿著曲線運動。自定義線性方法可以產(chǎn)生彈性效果，但是X軸，Y軸上的相對運動還是相同的。當然可以使用JavaSc

CSS中的animations 以及 transitions都擅長實現(xiàn)從點A到點B的直線動畫。無論你如何調(diào)整貝塞爾曲線，你都無法通過animation和transitions讓元素沿著曲線運動。自定義線性方法可以產(chǎn)生彈性效果，但是X軸，Y軸上的相對運動還是相同的。

當然可以使用JavaScript來模擬動畫，但其實有更簡單的方式來繞過這個限制。

先看效果：

單純對一個元素使用animation或者transition的話，那么計算機會自動選擇從A點到B點之間最短的距離。那么如何實現(xiàn)我們想要的曲線效果呢？

拆分之后再組合

物理角度上分析，位移是矢量，我們把它分解成X方向和Y方向的運動。假設(shè)我們寫了這樣的動畫：

@keyframes straightLine { 50% { transform: translate3D(100px, -100px, 0); }}.dot { animation: straightLine 2.5s infinite linear;}

從（0，0）移動到（-100， -100）的位置，拆分出來就是從（0，0）到（0， -100）與（0，0）到（-100， 0）的組合。

可能你的第一反應(yīng)會跟我一樣，這樣寫：

.dot { animation: xAxis 2.5s infinite linear, yAxis 2.5s infinite linear;}@keyframes xAxis { 50% { transform: translateX(100px); }}@keyframes yAxis { 50% { transform: translateY(-100px); } }

拆分成x,y軸方向上的運動，然后在animation中組合，然而效果是最后聲明的動畫有效，因為transform屬性不能重復(fù)定義。

如何組合？

你可以試試這種方式：同一元素上沒辦法做到，那就拆分成父元素和子元素的動畫。

父元素執(zhí)行從左到右，子元素執(zhí)行從下到上的動畫。

為了讓代碼看上去更簡潔，我們使用偽元素。

接著就是解決兩個方向上的同步問題，為了讓動畫更明顯，Demo使用自定義貝塞爾曲線，你也可以使用ease-in， ease-out這類內(nèi)置的時間性方法。

.demo-dot { animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);}.demo-dot::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 20px; background-color: #fff; animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);}@-webkit-keyframes yAxis { 50% { animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); transform: translateY(-100px); }}@keyframes yAxis { 50% { animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); transform: translateY(-100px); }}@-webkit-keyframes xAxis { 50% { animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); transform: translateX(100px); }}@keyframes xAxis { 50% { animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); transform: translateX(100px); }}

一波操作之后，你就能實現(xiàn)讓設(shè)計師贊不絕口的動畫。

這里使用都是keyframe的動畫，你也可以使用transitions，通過left,bottom等屬性來實現(xiàn)，但是注意這種方式會每次都觸發(fā)redraw,你可以看這篇文章。前端性能優(yōu)化之更平滑的動畫

ps:偽元素動畫在低端android機子上可能會失效。