CSS組合動(dòng)畫實(shí)現(xiàn)弧形軌跡_html/css

當(dāng)然可以使用JavaScript來模擬動(dòng)畫，但其實(shí)有更簡(jiǎn)單的方式來繞過這個(gè)限制。

先看效果：

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

拆分之后再組合

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

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

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

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

.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軸方向上的運(yùn)動(dòng)，然后在animation中組合，然而效果是最后聲明的動(dòng)畫有效，因?yàn)閠ransform屬性不能重復(fù)定義。

如何組合？

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

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

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

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

.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); }}

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

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

ps:偽元素動(dòng)畫在低端android機(jī)子上可能會(huì)失效。

結(jié)尾

這篇文章 涂鴉碼龍 已經(jīng)翻譯過，翻譯得非常不錯(cuò)。重新整理一遍，一來是效果確實(shí)很不錯(cuò)，二則是為了加深理解，做了些自己的筆記，作為學(xué)習(xí)查閱之用。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com