前端每日實(shí)戰(zhàn)：133# 視頻演示如何用 CSS 和 GSAP 創(chuàng)作有多個(gè)關(guān)鍵幀的連續(xù)動(dòng)畫

keke 發(fā)布于2019-08-23 11:55 / 2617人閱讀

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。隱藏容器外的內(nèi)容，并刪掉輔助線最后，裝飾一下頁(yè)面的角落大功告成

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/eLMKJG

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cdDRmH9

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器中包含 10 個(gè) div 子元素，每個(gè) div 中包含 1 個(gè) span 元素：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

定義容器的尺寸和樣式：

.container {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, tomato, gold);
    border-radius: 3%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

畫出容器里的 1 個(gè)元素，它有一個(gè)外殼 div，里面是一個(gè)白色的小方塊 span：

.container {
    position: relative;
}

.container div {
    position: absolute;
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container div span {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: white;
}

為容器中的元素定義下標(biāo)變量，并讓元素的外殼依次旋轉(zhuǎn)，圍合成一個(gè)圓形，其中 outline 是輔助線：

.container div {
    outline: 1px dashed black;
    transform: rotate(calc((var(--n) - 1) * 36deg));
}

.container div:nth-child(1) { --n: 1; }
.container div:nth-child(2) { --n: 2; }
.container div:nth-child(3) { --n: 3; }
.container div:nth-child(4) { --n: 4; }
.container div:nth-child(5) { --n: 5; }
.container div:nth-child(6) { --n: 6; }
.container div:nth-child(7) { --n: 7; }
.container div:nth-child(8) { --n: 8; }
.container div:nth-child(9) { --n: 9; }
.container div:nth-child(10) { --n: 10; }

至此，子元素繪制完成，接下來(lái)開始寫動(dòng)畫腳本。
引入 GSAP 庫(kù)：

定義一個(gè)變量，代表子元素選擇器：

let elements = ".container div span";

聲明一個(gè)時(shí)間線對(duì)象：

let animation = new TimelineMax();

先設(shè)定入場(chǎng)方式為由小（第1幀）變大（第2幀），其中并沒(méi)有第 2 幀的代碼，它是隱含在語(yǔ)義中的：

animation.from(elements, 1, {scale: 0});

讓子元素變成豎長(zhǎng)條，向四周散開（第3幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25});

讓豎長(zhǎng)條旋轉(zhuǎn)著變成小方塊（第4幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180});

讓小方塊變成橫長(zhǎng)條，圍成一個(gè)圓形（第5幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1});

注意，因 scrimba 在錄制過(guò)多幀時(shí)會(huì)崩潰，所以第 6 幀至第 11 幀沒(méi)有在視頻中體現(xiàn)。
讓圓形向內(nèi)收斂，同時(shí)線條變細(xì)（第6幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1});

讓線條向左擺動(dòng)（第7幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"});

再讓線條向右擺動(dòng)（第8幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"});

再把橫線變?yōu)樨Q線，造型與第 3 幀相似，只是線更細(xì)，更向內(nèi)收斂（第9幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1});

再把豎線變?yōu)闄M線，造型與第 5 幀相似，但線短一些（第10幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})

橫線稍向外擴(kuò)散，變?yōu)閳A點(diǎn)（第11幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: "-80px", scaleY: 0.5, borderRadius: "50%"});

讓圓點(diǎn)變形為豎線，并向內(nèi)收縮，這個(gè)變化的距離長(zhǎng)，所以動(dòng)畫時(shí)間也要長(zhǎng)一些（第12幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: "-80px", scaleY: 0.5, borderRadius: "50%"})
    .to(elements, 1, {y: "-10px", scaleX: 0.1, scaleY: 0.5, borderRadius: "0%", rotation: 0});

讓豎線從中心向外快速擴(kuò)散，擴(kuò)散前稍停片刻，好像線條都被發(fā)射出一樣（第13幀）：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: "-80px", scaleY: 0.5, borderRadius: "50%"})
    .to(elements, 1, {y: "-10px", scaleX: 0.1, scaleY: 0.5, borderRadius: "0%", rotation: 0})
    .to(elements, 1, {y: "-300px", delay: 0.5});

用時(shí)間尺度縮放函數(shù)讓動(dòng)畫播放速度加快一倍：

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: "-80px", scaleY: 0.5, borderRadius: "50%"})
    .to(elements, 1, {y: "-10px", scaleX: 0.1, scaleY: 0.5, borderRadius: "0%", rotation: 0})
    .to(elements, 1, {y: "-300px", delay: 0.5})
    .timeScale(2);

修改聲明時(shí)間線的代碼，使動(dòng)畫重復(fù)播放：

let animation = new TimelineMax({repeat: -1, repeatDelay: 1});

至此，動(dòng)畫完成。
隱藏容器外的內(nèi)容，并刪掉輔助線；

.container {
    overflow: hidden;
}

.container div {
    /* outline: 1px dashed black; */
}

最后，裝飾一下頁(yè)面的角落：

body {
    overflow: hidden;
}

body::before,
body::after {
    content: "";
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(
        transparent 25%,
        gold 25%, gold 50%,
        tomato 50%
    );
}

body::before {
    left: -30vmin;
    bottom: -30vmin;
}

body::after {
    right: -30vmin;
    top: -30vmin;
}

大功告成！

GPU云服務(wù)器云服務(wù)器如何用css 如何用vue開發(fā)實(shí)時(shí)音視頻如何用云服務(wù)器和虛擬主機(jī)賺錢 html和css有什么區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97681.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

keke

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

用Python爬取了幾千條相親文案，終于發(fā)現(xiàn)了告別單身的秘密

閱讀 3233·2021-11-11 16:55
Burp+夜神模擬器app抓包(一次成功)

閱讀 2498·2021-10-13 09:39
工信部召開行政指導(dǎo)會(huì)，要求阿里、騰訊等企業(yè)限期解除對(duì)鏈接的屏蔽

閱讀 2427·2021-09-13 10:27
Angular2 控制視圖的封裝模式

閱讀 2164·2019-08-30 15:55
HTML CSS + DIV實(shí)現(xiàn)排版布局

閱讀 3093·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：121# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個(gè)小魚游動(dòng)的交互動(dòng)畫

閱讀 3137·2019-08-29 16:34
a標(biāo)簽樣式繼承的問(wèn)題

閱讀 1829·2019-08-29 12:41
14天入門JavaScript-day three

閱讀 1073·2019-08-29 11:33

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端每日實(shí)戰(zhàn)：133# 視頻演示如何用 CSS 和 GSAP 創(chuàng)作有多個(gè)關(guān)鍵幀的連續(xù)動(dòng)畫

相關(guān)文章

**前端每日實(shí)戰(zhàn) 2018 年 9 月份項(xiàng)目匯總（共 26 個(gè)項(xiàng)目）**

**前端每日實(shí)戰(zhàn) 2018 年 9 月份項(xiàng)目匯總（共 26 個(gè)項(xiàng)目）**