【Hello CSS】第九章-如何畫一個(gè)體驗(yàn)更好的動(dòng)畫？

BothEyes1993 發(fā)布于2019-08-30 15:44 / 3525人閱讀

摘要：那就是重力加速度的表現(xiàn)以及彈力球與空氣，地面所產(chǎn)生的摩擦力的表現(xiàn)。彈力球下落時(shí)，由于重力加速度的原因，所以速度會(huì)越來(lái)越大，往上跳時(shí)速度會(huì)越來(lái)越小直至。

作者：陳大魚頭

github： KRISACHAN

在上一節(jié)中， 不走心 地畫了一些 CSS圖案 ，本節(jié)就繼續(xù)不走心地 畫動(dòng)畫 。

CSS的動(dòng)畫屬性

在CSS中，animation 、 transition 跟 transform 使我們常用于制作動(dòng)畫的屬性，我們先來(lái)大致地來(lái)了解下這三個(gè)屬性。

transform

CSS transform 屬性允許你旋轉(zhuǎn)，縮放，傾斜或平移給定元素。這是通過(guò)修改CSS視覺(jué)格式化模型的坐標(biāo)空間來(lái)實(shí)現(xiàn)的。

transform 可以設(shè)置元素 2D 或者是 3D 的變換，其變換行為有以下幾種：

值	描述
translate	位置移動(dòng)
scale	縮放
rotate	旋轉(zhuǎn)
skew	傾斜
perspective	透視

不同值的效果如下：

地址在此：https://codepen.io/krischan77...

animation

CSS animation 是正規(guī)的CSS 動(dòng)畫屬性，通過(guò)不同的值，可以畫出各種有趣的動(dòng)畫。

值	說(shuō)明
animation-name	指定要綁定到選擇器的關(guān)鍵幀的名稱
animation-duration	動(dòng)畫指定需要多少秒或毫秒完成
animation-timing-function	設(shè)置動(dòng)畫將如何完成一個(gè)周期
animation-delay	設(shè)置動(dòng)畫在啟動(dòng)前的延遲間隔。
animation-iteration-count	定義動(dòng)畫的播放次數(shù)。
animation-direction	指定是否應(yīng)該輪流反向播放動(dòng)畫。
animation-fill-mode	規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。
animation-play-state	指定動(dòng)畫是否正在運(yùn)行或已暫停。
initial	設(shè)置屬性為其默認(rèn)值。
inherit	從父元素繼承屬性。

小DEMO效果如下：

地址在此：

https://codepen.io/krischan77...

transition

CSS transitions 提供了一種在更改CSS屬性時(shí)控制動(dòng)畫速度的方法。 其可以讓屬性變化成為一個(gè)持續(xù)一段時(shí)間的過(guò)程，而不是立即生效的。此屬性可以很好的配合上面兩個(gè)屬性。

值	描述
transition-property	指定CSS屬性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉(zhuǎn)速曲線
transition-delay	定義transition效果開(kāi)始的時(shí)候

小DEMO效果如下：

地址在此：

https://codepen.io/krischan77...

上面我們大致了解了三個(gè)常用于做動(dòng)畫的屬性，下面我們來(lái)從實(shí)際的栗子來(lái)講解如何畫好一個(gè)動(dòng)畫。

產(chǎn)品經(jīng)理讓你畫個(gè)球

產(chǎn)品經(jīng)理在下午5點(diǎn)半，正在刷某音的時(shí)候想到了一個(gè)方案，就是在明天上線的H5頁(yè)面中加個(gè)彈球的loading動(dòng)畫。

產(chǎn)品經(jīng)理說(shuō)：“魚頭呀，我覺(jué)得我們的H5頁(yè)面能有個(gè)彈球的loading動(dòng)畫就好了，但是明天運(yùn)營(yíng)部門就要推廣了，所以辛苦你一下，今晚加個(gè)班，畫一個(gè)吧！”

魚頭開(kāi)（nan）心（guo）地說(shuō)：“好的，馬上畫。”

然后就開(kāi)始愉（shang）快（xin）地畫球。

約莫過(guò)了一個(gè)小時(shí)，終于完成了，然后高興地發(fā)了給產(chǎn)品經(jīng)理看，效果如下：

代碼如下：

魚頭說(shuō)：“產(chǎn)品經(jīng)理，你看下效果。”

產(chǎn)品經(jīng)理：“這效果肯定不行啊。”

魚頭問(wèn)：“為啥？”

產(chǎn)品經(jīng)理：“我們畫動(dòng)畫的時(shí)候，要盡可能的遵循物理世界的原則，一個(gè)可以彈跳的球，怎么可能是這樣硬不溜秋的呢？彈跳球的彈性是非常好的，當(dāng)你把球球扔到地上時(shí)，它本身會(huì)發(fā)生一個(gè)彈性形變，即變形后立刻恢復(fù)原狀，隨后它把儲(chǔ)存的彈性勢(shì)能裝化為動(dòng)能，就可以彈起來(lái)了。 ”

魚頭內(nèi)心戲：“完全聽(tīng)不懂。”

魚頭回答道：“好，我改！”

產(chǎn)品經(jīng)理：“那就辛苦你加班了，我約了女朋友，不能加班，你單身，996都沒(méi)關(guān)系。”

魚頭此時(shí)內(nèi)心毫無(wú)波瀾，甚至有點(diǎn)想寫代碼。

一個(gè)小時(shí)之后，魚頭又完成了一版，于是乎就錄了個(gè)GIF發(fā)給產(chǎn)品經(jīng)理，效果如下：

核心代碼如下：

.ball {
    background: skyblue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    animation: 2s move linear infinite;
    transform: translateY(0px) scale(1, 1);
}
@keyframes move {
    0% {
        transform: translateY(0px) scale(1, 1);
    }
    10% {
        transform: translateY(100px) scale(1, 1);
    }
    20% {
        transform: translateY(200px) scale(1, 1);
    }
    30% {
        transform: translateY(300px) scale(1, 1);
    }
    40% {
        transform: translateY(400px) scale(1, 1);
    }
    50% {
        transform: translateY(500px) scale(1, 1);
    }
    60% {
        transform: translateY(400px) scale(1.13, 0.87);
    }
    70% {
        transform: translateY(300px) scale(0.92, 1.08);
    }
    80% {
        transform: translateY(200px) scale(1.05, 0.95);
    }
    90% {
        transform: translateY(100px) scale(0.98, 1.02);
    }
    100% {
        transform: translateY(0px) scale(1, 1);
    }
}

魚頭內(nèi)心OS：“這下一定能通過(guò)了，我 利用scale的變形性，在小球下落的時(shí)候改變小球的形狀，用以模擬物理環(huán)境下彈跳球彈跳的狀態(tài) ，我真的太聰明了，這樣都能讓我想到。”

魚頭笑嘻嘻地發(fā)微信給產(chǎn)品經(jīng)理

魚頭：“產(chǎn)品經(jīng)理，我又做好了一版，你看一下？”

產(chǎn)品經(jīng)理：“效果不錯(cuò)，但是還需要再打磨一下。”

魚頭震驚地發(fā)出：“啥？”

產(chǎn)品經(jīng)理：“你的動(dòng)畫效果是有了，但是如果能加上一些視覺(jué)上的優(yōu)化，例如球體的反光，地面上的陰影或者是倒影，效果會(huì)更好。”

魚頭此時(shí)內(nèi)心還是毫無(wú)波瀾，甚至有點(diǎn)想笑，不，他此時(shí)就是想哭。

再次度過(guò)愉快的一小時(shí)，魚頭又完成了一版

效果如下：

核心代碼如下：

.content {
    width: 300px;
    height: 600px;
    margin: 30px auto;
    position: relative;
    -webkit-box-reflect: below 0px -webkit-linear-gradient(transparent,transparent 50%, rgba(255,255,255,.6));
}
.ball {
    background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    animation: 2s move linear infinite;
    transform: translateY(0px) scale(1, 1);

}
@keyframes move {
    0% {
        transform: translateY(0px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    10% {
        transform: translateY(100px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    20% {
        transform: translateY(200px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    30% {
        transform: translateY(300px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    40% {
        transform: translateY(400px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    50% {
        transform: translateY(500px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    60% {
        transform: translateY(400px) scale(1.13, 0.87);
        background: radial-gradient(circle at 43% 0, skyblue 57%, #104b63);
    }
    70% {
        transform: translateY(300px) scale(0.92, 1.08);
        background: radial-gradient(circle at 37% 0, skyblue 63%, #104b63);
    }
    80% {
        transform: translateY(200px) scale(1.05, 0.95);
        background: radial-gradient(circle at 42% 0, skyblue 58%, #104b63);
    }
    90% {
        transform: translateY(100px) scale(0.98, 1.02);
        background: radial-gradient(circle at 41% 0, skyblue 59%, #104b63);
    }
    100% {
        transform: translateY(0px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
}

魚頭再次內(nèi)心OS：“在原來(lái)彈跳形變的基礎(chǔ)上，我利用 radial-gradient 給小球底部加上了陰影，然后又利用 -webkit-box-reflect 給整個(gè)容器加上了反向的鏡像效果，這個(gè)鏡像的靈魂效果是 60% 的透明度呀，這樣看起來(lái)就更像光滑瓷磚地面的倒影。我真是太聰明了，這次肯定能過(guò)了。 ”

（以上屬性在魚頭上一篇文章『第八章-CSS圖形』都有展示DEMO，有興趣可以去看看。）

魚頭又發(fā)微信給產(chǎn)品經(jīng)理

魚頭：“產(chǎn)品經(jīng)理，我又做好了一版，你看一下？”

產(chǎn)品經(jīng)理：“這次效果很好。”

產(chǎn)品經(jīng)理：“但是，你還是忽略了兩件很重要的事。那就是 重力加速度 的表現(xiàn) 以及 彈力球與空氣，地面所產(chǎn)生的摩擦力 的表現(xiàn)。

彈力球下落時(shí)，由于重力加速度的原因，所以速度會(huì)越來(lái)越大，往上跳時(shí)速度會(huì)越來(lái)越小直至0。

彈力球的空氣阻力以及與地面接觸時(shí)力的損耗導(dǎo)致地面對(duì)彈力球自身的反作用力減少，所以，小球下次上跳的距離會(huì)比下次的小，碰到地面時(shí)的形變也是，至于這個(gè)數(shù)值是多少，你不需要深究，畢竟是虛擬的狀態(tài)，也不可能100%模擬現(xiàn)實(shí)環(huán)境。 ”

產(chǎn)品經(jīng)理：“還好這次是讓你做個(gè)loading動(dòng)畫，本身loading動(dòng)畫就是循環(huán)性的動(dòng)畫，不然我就讓你加上重力加速度跟摩擦力的損耗狀態(tài)了。”

魚頭小心翼翼地問(wèn)：“那我可以回家了嗎？我肚子好餓。”

產(chǎn)品經(jīng)理：“等下，我突然又有一個(gè)想法.....”

于是乎，魚頭就這么過(guò)了一個(gè)浪漫的夜晚。

后記

其實(shí)CSS可畫的動(dòng)畫是很多的，只要我們細(xì)心的去組合不同的 CSS 屬性，就能作出很多有趣的效果。

【Hello CSS】系列

【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開(kāi)發(fā)者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發(fā)現(xiàn)有任何不合理，不正確的地方，還煩不吝指出，我會(huì)非常感謝的；如果通過(guò)文章有任何想法或疑問(wèn)，也希望各位能積極留言，我們互相探討；如果通過(guò)本系列文章有所收獲，這就讓魚頭我喜不自勝了！

如果你也喜歡 CSS，喜歡探討技術(shù)，或者對(duì)本文，本系列有任何的意見(jiàn)或建議，你可以掃描下方二維碼，關(guān)注微信公眾號(hào)“ 魚頭的Web海洋 ”，隨時(shí)與魚頭互動(dòng)。歡迎！衷心希望可以遇見(jiàn)你。