這篇文章主要介紹了JavaScript動(dòng)畫(huà)和CSS動(dòng)畫(huà)該如何選擇，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

按需制作網(wǎng)站可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站建設(shè)、成都做網(wǎng)站構(gòu)思過(guò)程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站建設(shè)、成都做網(wǎng)站的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

概述

你肯定知道，動(dòng)畫(huà)在創(chuàng)建引人注目的 Web 應(yīng)用程序中扮演著重要的角色。隨著用戶越來(lái)越多地將注意力轉(zhuǎn)移到用戶體驗(yàn)上，商戶開(kāi)始意識(shí)到完美、愉快的用戶體驗(yàn)的重要性，結(jié)果 Web 應(yīng)用程序變得越來(lái)越重，并具有更動(dòng)態(tài)交互的 UI。這一切都需要更復(fù)雜的動(dòng)畫(huà)，以便用戶在整個(gè)過(guò)程中更平穩(wěn)地進(jìn)行狀態(tài)轉(zhuǎn)換。今天，這甚至不被認(rèn)為是什么特別的事情。用戶正變得越來(lái)越挑剔，默認(rèn)情況下，他們期望的是具有高響應(yīng)性和交互性的用戶界面。

然而，界面的動(dòng)畫(huà)化并不一定是簡(jiǎn)單的。什么是動(dòng)畫(huà)，什么時(shí)候該用動(dòng)畫(huà)，動(dòng)畫(huà)應(yīng)該有什么樣的視頻效果，這些都是棘手的問(wèn)題。

JavaScript 和 CSS 動(dòng)畫(huà)比較

創(chuàng)建 Web 動(dòng)畫(huà)的兩種主要方法是使用JavaScript和 CSS。選擇哪種沒(méi)有對(duì)或錯(cuò)，這完全取決于你想要達(dá)到的效果。

CSS 動(dòng)畫(huà)

用CSS制作動(dòng)畫(huà)是讓元素在屏幕上移動(dòng)的最簡(jiǎn)單方法。

這里將從如何讓元素在 X 和 Y 軸上移動(dòng) 50px 簡(jiǎn)單示例開(kāi)始，通過(guò)持續(xù) 1 秒的 CSS 過(guò)渡來(lái)移動(dòng)元素。

.box {
  -webkit-transform: translate(0, 0);
  -webkit-transition: -webkit-transform 1000ms;

  transform: translate(0, 0);
  transition: transform 1000ms;
}

.box.move {
  -webkit-transform: translate(50px, 50px);
  transform: translate(50px, 50px);
}

當(dāng)元素加上 move 類時(shí)，改變 transform 的值然后開(kāi)發(fā)發(fā)生過(guò)渡效果。

除了轉(zhuǎn)換持續(xù)時(shí)間外，還有 easing 屬性，這實(shí)際上就是動(dòng)畫(huà)的運(yùn)動(dòng)速度方式，該參數(shù)會(huì)在之后詳細(xì)介紹。

如果像上面的代碼片段一樣，創(chuàng)建單獨(dú)的 CSS 類來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，當(dāng)然也可以使用 JavaScript 來(lái)切換每個(gè)動(dòng)畫(huà)。

如下元素：

p class="box">
  Sample content.
</p>

然后，使用 JavaScript 來(lái)切換每個(gè)動(dòng)畫(huà)。

var boxElements = document.getElementsByClassName('box'),
    boxElementsLength = boxElements.length,
    i;

for (i = 0; i < boxElementsLength; i++) {
  boxElements[i].classList.add('move');
}

上面的代碼片段是為所有包含 box 類的元素為其添加 move 類以觸發(fā)動(dòng)畫(huà)。

這樣做可以為你的應(yīng)用提供良好的平衡。 你可以專注于使用 JavaScript 管理狀態(tài)，只需在目標(biāo)元素上設(shè)置適當(dāng)?shù)念?，讓瀏覽器處理動(dòng)畫(huà)。 如果沿著這條路線前進(jìn)，你可以在元素上監(jiān)聽(tīng) transitionend 事件，但前提是放棄舊版 Internet Explorer 的支持：

監(jiān)聽(tīng) transitionend 觸發(fā)的事件如下所示:

var boxElement = document.querySelector('.box');
boxElement.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
  // Handle the transition finishing.
}

除了使用 CSS 過(guò)渡之外，你還可以使用 CSS 動(dòng)畫(huà)，CSS 動(dòng)畫(huà)可以讓你更好地控制單獨(dú)的動(dòng)畫(huà)關(guān)鍵幀，持續(xù)時(shí)間以及循環(huán)次數(shù)。

關(guān)鍵幀用于指示瀏覽器 CSS 屬性在給定時(shí)間點(diǎn)上應(yīng)有的 CSS 屬性，然后填充空白。

來(lái)個(gè)簡(jiǎn)單的例子：

.box {
  /* 動(dòng)畫(huà)的名字 */
  animation-name: movingBox;

  /* 動(dòng)畫(huà)的持續(xù)時(shí)間 */
  animation-duration: 2300ms;

  /* 動(dòng)畫(huà)的運(yùn)行次數(shù) */
  animation-iteration-count: infinite;

  /* 設(shè)置對(duì)象動(dòng)畫(huà)在循環(huán)中是否反向運(yùn)動(dòng)的方法 */
  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.4;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(150px, 200px);
    opacity: 0.2;
  }

  100% {
    transform: translate(40px, 30px);
    opacity: 0.8;
  }
}

效果示例: https://sessionstack.github.i...

使用CSS動(dòng)畫(huà)，你可以獨(dú)立于目標(biāo)元素定義動(dòng)畫(huà)本身，并使用 animation-name 屬性來(lái)選擇所需的動(dòng)畫(huà)。

CSS 動(dòng)畫(huà)在某種程度仍然需要加瀏覽器前綴的，在 Safari、Safari Mobile 和 Android 中都使用了 -webkit。 Chrome、 Opera、Internet Explorer 和 Firefox 都不需要添加前綴。許多工具可以幫助你創(chuàng)建所需 CSS 的前綴，這樣就不需要在源文件中帶樣式前綴。

JavaScript 動(dòng)畫(huà)

和 CSS 過(guò)渡或者 CSS 動(dòng)畫(huà)相比，使用 JavaScript 創(chuàng)建動(dòng)畫(huà)更加復(fù)雜，但它通常為開(kāi)發(fā)人員提供了更強(qiáng)大的功能。

JavaScript 動(dòng)畫(huà)是作為代碼的一部分內(nèi)聯(lián)編寫的。你還可以將它們封裝在其他對(duì)象中。以下為用 JavaScript 來(lái)實(shí)現(xiàn)最開(kāi)始的 CSS 過(guò)渡的代碼：

var boxElement = document.querySelector('.box');
var animation = boxElement.animate([
  {transform: 'translate(0)'},
  {transform: 'translate(150px, 200px)'}
])

animation.addEventListener('finish', function() {
  boxElement.style.transform = 'translate(150px, 200px)';
})

默認(rèn)情況下，Web 動(dòng)畫(huà)僅修改元素的展示效果。 如果要將對(duì)象停留在移動(dòng)后的位置，則應(yīng)在動(dòng)畫(huà)完成時(shí)修改其基礎(chǔ)樣式。 這就是為什么在上面的例子中監(jiān)聽(tīng) finish 事件，并將 box.style.transform 屬性設(shè)置為 translate(150px, 200px)，該屬性值和 CSS 動(dòng)畫(huà)執(zhí)行的第二個(gè)樣式轉(zhuǎn)換是一樣的。

使用 JavaScript 動(dòng)畫(huà)，你可以在每一步完全控制元素的樣式。 這意味著你可以放慢動(dòng)畫(huà)速度，暫停動(dòng)畫(huà)，停止它們，翻轉(zhuǎn)它們，并根據(jù)需要操縱元素。 如果你正在構(gòu)建復(fù)雜的面向?qū)ο蟮膽?yīng)用程序，這尤其有用，因?yàn)槟憧梢哉_地封裝你想要的動(dòng)畫(huà)行為。

Easing 定義

自然過(guò)渡效果會(huì)讓你的用戶對(duì)你的 Web 應(yīng)用程序感覺(jué)更舒服，從而帶來(lái)更好的用戶體驗(yàn)。

當(dāng)然，沒(méi)有任何東西從一個(gè)點(diǎn)到另一個(gè)點(diǎn)線性移動(dòng)。 實(shí)際上，當(dāng)事物在我們周圍的物理世界中移動(dòng)時(shí)，事物往往會(huì)加速或減速，因?yàn)槲覀儾皇窃谡婵罩校⑶矣胁煌囊蛩貢?huì)影響這一點(diǎn)。 人類的大腦會(huì)期望感受這樣的移動(dòng)，所以當(dāng)為網(wǎng)絡(luò)應(yīng)用制作動(dòng)畫(huà)的時(shí)候，利用此類知識(shí)會(huì)對(duì)自己會(huì)有好處。

以下是一些術(shù)語(yǔ)需要了解一下:

• ease in —? 相對(duì)于勻速，開(kāi)始的時(shí)候慢，之后快
• ease out—  相對(duì)于勻速，開(kāi)始時(shí)快，結(jié)束時(shí)候間慢
• ease-in-out—   相對(duì)于勻速，開(kāi)始和結(jié)束都慢）兩頭慢

Easing 關(guān)鍵字

CSS 過(guò)渡和動(dòng)畫(huà)允許你選擇要使用的 easing 類型。 不同的關(guān)鍵字會(huì)影響動(dòng)畫(huà)的 easing，你也可以完全自定義 easing 方法。

以下為可以選擇用來(lái)控制 easing 的 CSS 關(guān)鍵字：

• linear
• ease-in
• ease-out
• ease-in-out

讓我們深入來(lái)了解一下這幾個(gè)兄弟，并看它們各自展示的效果是怎么樣。

Linear 動(dòng)畫(huà)

easing 方法的的默認(rèn)為 linear，以下為 linear 過(guò)渡效果的圖示：

隨著時(shí)間增加，值等比增加，使用 linear動(dòng)效，會(huì)讓動(dòng)畫(huà)不自然，一般來(lái)說(shuō)，避免使用 linear動(dòng)效。

以下是如何實(shí)現(xiàn)簡(jiǎn)單的線性動(dòng)畫(huà)：

transition: transform 500ms linear;

Ease-out 動(dòng)畫(huà)

如前所述，與線性動(dòng)畫(huà)相比，easing out 動(dòng)畫(huà)開(kāi)始時(shí)快，結(jié)束時(shí)候間慢，過(guò)渡效果的圖示如下：

一般來(lái)說(shuō)，easing out過(guò)渡效果是最適合做界面體驗(yàn)的，因?yàn)榭焖俚貑?dòng)會(huì)給人以快速響應(yīng)的動(dòng)畫(huà)的感覺(jué)，而結(jié)束時(shí)讓人感覺(jué)很平滑這得歸功于不一致的移動(dòng)速度。

有很多方法可以實(shí)現(xiàn) ease-out效果，但最簡(jiǎn)單的是 CSS 中的 ease-out 關(guān)鍵字：

transition: transform 500ms ease-out;

Ease-in 動(dòng)畫(huà)

和 ease-out 動(dòng)畫(huà)相反－開(kāi)始時(shí)快，結(jié)束時(shí)候間慢，過(guò)渡效果圖如下：

與 ease-out 動(dòng)畫(huà)相比， ease-in 可能會(huì)讓人感到不尋常，由于啟動(dòng)緩慢給人以反應(yīng)卡頓的感覺(jué)，因此會(huì)產(chǎn)生一種無(wú)反應(yīng)的感覺(jué)。 動(dòng)畫(huà)結(jié)束很快也會(huì)產(chǎn)生一種奇怪的感覺(jué)，因?yàn)檎麄€(gè)動(dòng)畫(huà)正在加速，而現(xiàn)實(shí)世界中的物體在突然停止時(shí)往往會(huì)減速。

和 ease-out 和 linear 動(dòng)畫(huà)類似，使用 CSS 關(guān)鍵字來(lái)實(shí)現(xiàn) ease-in 動(dòng)畫(huà)：

transition: transform 500ms ease-in;

Ease-in-out 動(dòng)畫(huà)

該動(dòng)畫(huà)為 ease-in 和 ease-out 的合集，過(guò)渡效果圖如下：

不要使用太長(zhǎng)的動(dòng)畫(huà)持續(xù)時(shí)間，因?yàn)樗鼈儠?huì)讓你的 UI 感覺(jué)沒(méi)有響應(yīng)。

用 ease-in-out CSS 關(guān)鍵字來(lái)實(shí)現(xiàn) ease-in-out 動(dòng)畫(huà)：

transition: transform 500ms ease-in-out;

自定義 easing

你也可以定義自己的 easing 曲線，這可以更好地創(chuàng)建自己想要的動(dòng)畫(huà)效果。

實(shí)際上， ease-in，linear 及 ease 關(guān)鍵字映射到預(yù)定義 貝塞爾曲線 ，可以在 CSS transitions specification 和 Web Animations specification 中查找更多關(guān)于貝塞爾曲線的內(nèi)容。

貝塞爾曲線 (Bézier curves)

Bézier curve(貝塞爾曲線)是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。 曲線定義：起始點(diǎn)、終止點(diǎn)（也稱錨點(diǎn)）、控制點(diǎn)。通過(guò)調(diào)整控制點(diǎn)，貝塞爾曲線的形狀會(huì)發(fā)生變化。 1962年，法國(guó)數(shù)學(xué)家Pierre Bézier第一個(gè)研究了這種矢量繪制曲線的方法，并給出了詳細(xì)的計(jì)算公式，因此按照這樣的公式繪制出來(lái)的曲線就用他的姓氏來(lái)命名，稱為貝塞爾曲線。

CSS3 transition-timing-function 屬性，其語(yǔ)法如下：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

總而言之可以用cubic-bezier(n,n,n,n)的形式來(lái)表示全部的屬性值，這里就涉及到貝塞爾曲線（Bézier curve）。

讓我們看看貝塞爾曲線的工作原理。 貝塞爾曲線需要四個(gè)值，或者更準(zhǔn)確地說(shuō)它需要兩對(duì)數(shù)字。 每對(duì)描述立方貝塞爾曲線控制點(diǎn)的 X 和 Y 坐標(biāo)。貝塞爾曲線的起點(diǎn)有一個(gè)坐標(biāo) (0, 0) ，結(jié)束坐標(biāo)是 (1, 1)。 你可以設(shè)置兩個(gè)對(duì)號(hào)，兩個(gè)控制點(diǎn)的 X 值必須在 [0,1] 范圍內(nèi)，并且每個(gè)控制點(diǎn)的 Y 值可以超過(guò) [0,1] 限制，盡管規(guī)定不清楚多少。

即使每個(gè)控制點(diǎn)的 X 和 Y 值稍有變化，也會(huì)得到完全不同的曲線。讓我們看兩張貝塞爾曲線的圖，兩張圖相近但坐標(biāo)的控制結(jié)點(diǎn)卻不同。

和

如您所見(jiàn)，兩張圖有很大的不同， 第一個(gè)控制點(diǎn)矢量差為 (0.045,0.183) 矢量差，而第二控制點(diǎn)矢量差為 (-0.427, -0.054) 。

第二條曲線的樣式為：

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

前兩個(gè)數(shù)字是第一個(gè)控制點(diǎn)的 X 和 Y 坐標(biāo)，后兩個(gè)數(shù)字是第二個(gè)控制點(diǎn)的 X 和 Y 坐標(biāo)。

性能優(yōu)化

當(dāng)你在使用動(dòng)畫(huà)的時(shí)候，你應(yīng)該維持 60 幀每秒，否則會(huì)影響用戶體驗(yàn)。

和世界上的其他事物一樣，動(dòng)畫(huà)也會(huì)有性能的開(kāi)銷。一些屬性的動(dòng)畫(huà)性能開(kāi)銷相比其它屬性要小。例如，為元素的 width 和 height 做動(dòng)畫(huà)會(huì)更改其幾何結(jié)構(gòu)并且可能會(huì)造成頁(yè)面上的其它元素移動(dòng)或者大小的改變，這個(gè)過(guò)程稱為布局。我們?cè)谥暗囊黄恼?中更詳細(xì)地討論了布局和渲染。

通常，你應(yīng)該避免動(dòng)畫(huà)觸發(fā)布局或重繪的屬性。 對(duì)于大多數(shù)現(xiàn)代瀏覽器，這意味著把動(dòng)畫(huà)局限于 opacity 和 transform 屬性。

Will-change

你可以使用 will-change 知瀏覽器你打算更改元素的屬性，這允許瀏覽器在進(jìn)行更改之前進(jìn)行最適當(dāng)?shù)膬?yōu)化。但是，不要過(guò)度使用 will-change，因?yàn)檫@樣做會(huì)導(dǎo)致瀏覽器浪費(fèi)資源，從而導(dǎo)致更多的性能問(wèn)題。

will-change 用法如下：

.box {
  will-change: transform, opacity;
}

該屬性在 Chrome, Firefox，Opera 得到很好的兼容。

JavaScript 動(dòng)畫(huà)和 CSS 動(dòng)畫(huà)該如果抉擇

• 根據(jù) Google Developer，渲染線程分為 主線程 (main thread)和 合成線程 (compositor thread)。如果 CSS 動(dòng)畫(huà)只是改變 transforms 和 opacity，這時(shí)整個(gè) CSS動(dòng)畫(huà)得以在 合成線程完成（而JS動(dòng)畫(huà)則會(huì)在 主線程執(zhí)行，然后觸發(fā)合成線程進(jìn)行下一步操作），在 JS 執(zhí)行一些昂貴的任務(wù)時(shí)，主線程繁忙，CSS 動(dòng)畫(huà)由于使用了合成線程可以保持流暢
• 在許多情況下，也可以由合成線程來(lái)處理 transforms 和 opacity 屬性值的更改。
• 對(duì)于幀速表現(xiàn)不好的低版本瀏覽器，CSS3可以做到自然降級(jí)，而JS則需要撰寫額外代碼。
• CSS動(dòng)畫(huà)有天然事件支持（TransitionEnd、AnimationEnd，但是它們都需要針對(duì)瀏覽器加前綴），JS則需要自己寫事件。
• 如果有任何動(dòng)畫(huà)觸發(fā)繪畫(huà)，布局或兩者，則需要 “主線程”才能完成工作。 這對(duì)于基于 CSS 和 JavaScript 的動(dòng)畫(huà)都是如此，布局或繪制的開(kāi)銷可能會(huì)使與 CSS 或 JavaScript 執(zhí)行相關(guān)的任何工作相形見(jiàn)絀，這使得問(wèn)題沒(méi)有實(shí)際意義。
• CSS3有兼容性問(wèn)題，而JS大多時(shí)候沒(méi)有兼容性問(wèn)題。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享JavaScript動(dòng)畫(huà)和CSS動(dòng)畫(huà)該如何選擇內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)標(biāo)題：JavaScript動(dòng)畫(huà)和CSS動(dòng)畫(huà)該如何選擇
URL鏈接：http://jinyejixie.com/article30/ppespo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、面包屑導(dǎo)航、ChatGPT、網(wǎng)站維護(hù)、用戶體驗(yàn)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)