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

by CodeDraken

由CodeDraken

Web動(dòng)畫(huà)簡(jiǎn)介 (An Introduction to Web Animations)

In this introduction to web animations article, we will cover basic CSS animations using pseudo-classes, transitions, and transformations.

在此Web動(dòng)畫(huà)簡(jiǎn)介中，我們將介紹使用偽類(lèi) ， 過(guò)渡和轉(zhuǎn)換的基本CSS動(dòng)畫(huà)。

If you’re unsure why you should use CSS animations then take a look at these articles.

如果不確定為什么要使用CSS動(dòng)畫(huà)，請(qǐng)閱讀這些 文章 。

Some basic ( and very ugly (for now) ) example code for this article will be on CodePen:

本文的一些基本(現(xiàn)在非常難看)示例代碼將在CodePen上發(fā)布：

已觸發(fā) (Triggered)

Before we jump into some animations, let’s think about how they’re going to be activated. Most of our animations won’t run immediately when a page loads. More commonly they’ll be triggered by a class change (via JavaScript) or using Pseudo Classes.

在進(jìn)入一些動(dòng)畫(huà)之前，讓我們考慮一下如何激活它們。 頁(yè)面加載后，我們大多數(shù)動(dòng)畫(huà)不會(huì)立即運(yùn)行。 通常， 它們是由類(lèi)更改(通過(guò)JavaScript)或使用偽類(lèi)觸發(fā)的。

偽F (Pseudo Foo)

Here are a few pseudo-classes that are most commonly used for animations.

以下是一些最常用于動(dòng)畫(huà)的偽類(lèi) 。

:hoverThe hover pseudo-class is triggered when you hover over the target with the mouse. In this example, we set the <;p> to change its color to blue when hovered. It will revert back to its original color after the mouse moves off of it.

：hover當(dāng)您將鼠標(biāo)懸停在目標(biāo)上時(shí) ，將觸發(fā)懸停偽類(lèi)。 在此示例中，我們將< ; p>設(shè)置為在懸停時(shí)將其顏色更改為藍(lán)色。 鼠標(biāo)移開(kāi)后，它將恢復(fù)為原始顏色。

<style> #hover-example:hover { color: blue; cursor: pointer; }</style><p id=”hover-example”>Hover example</p>

:focus

：焦點(diǎn)

“The :focus CSS pseudo-class represents an element (such as a form input) that has received focus.” — MDN“：focus CSS偽類(lèi)表示已獲得焦點(diǎn)的元素(例如表單輸入)。” — MDN

(um… isn’t that like using a word to define itself??)

(嗯……這不像用一個(gè)詞來(lái)定義自己?jiǎn)?#xff1f;)

Focus is mainly used for inputs and buttons when they’re selected/activated — that is, when you click on an input or tab into it. In this example, clicking or tabbing into the input will cause it to change the width and its background color. Clicking out of it will cause it to revert back to its original size (and color).

焦點(diǎn)主要用于選擇/激活輸入和按鈕時(shí)， 即單擊輸入或選項(xiàng)卡時(shí) 。 在此示例中，單擊或制表符輸入將導(dǎo)致其更改寬度和其背景顏色。 單擊它會(huì)使其恢復(fù)為原始大小(和顏色)。

<style> input:focus { background-color: #f4f4f4; width: 50vw; }</style><input type=”text”>

:activeActive seems similar to focus, but it’s usually only triggered for a split second. The first use case that comes to mind are anchors (links). In this example, we make anything with the class activate change while it’s being clicked (that is, while it’s active).

：active Active看起來(lái)類(lèi)似于焦點(diǎn)，但是通常僅在瞬間觸發(fā) 。 我想到的第一個(gè)用例是錨點(diǎn)(鏈接)。 在此示例中，我們通過(guò)單擊類(lèi)(即，在其處于活動(dòng)狀態(tài)時(shí)) activate更改來(lái)進(jìn)行任何操作。

<style> .activate:active { background-color: orange; }</style><p class=”activate”>Click me!</p><div class=”activate”>Activate me!</div><button class=”activate”>Hold me!</button>

變形金剛 (Transformers)

“The transform CSS property lets you rotate, scale, skew or translate a given element. “ — MDN“ transform CSS屬性使您可以旋轉(zhuǎn)，縮放，傾斜或平移給定元素。 “-MDN

Transform is where you take your CSS animations to the next level. There are 21 or so functions you can use with transform, but we will not cover all of them in this article.

變換是將CSS動(dòng)畫(huà)提升到新水平的地方。 您可以在transform中使用大約21個(gè)函數(shù)，但是本文將不介紹所有這些函數(shù)。

翻譯(x，y) (Translate ( x, y ))

To translate means you’re moving something. In the example below, we move whatever has the translate class 10rem over on the X-axis and 5rem over on the Y-axis. (If you’re not familiar with rem, you can use pixels, too.)

翻譯意味著您正在移動(dòng)某些東西。 在下面的例子中，我們移動(dòng)任何有translate類(lèi)10rem了在X軸和5rem了在Y軸。 (如果您不熟悉rem，也可以使用像素。)

This is the shorthand function that combines X and Y, but you can use translateX or translateY instead if you prefer.

這是組合X和Y的簡(jiǎn)寫(xiě)函數(shù)，但是如果您愿意，可以改用translateX或translateY 。

<style> .translate { transform: translate(10rem, 5rem) }</style>

比例尺(x，y) (Scale ( x, y ))

Similar to translate, scale also has a scaleX, scaleY, and a scale shorthand function. Use scale to change the size of something. In the example below, elements with the scale class are reduced to half their size.

與translate相似，scale也具有scaleX ， scaleY和scale簡(jiǎn)寫(xiě)函數(shù)。 使用比例改變某物的大小 。 在下面的示例中，具有scale類(lèi)的元素的大小減小到一半。

<style> .scale { transform: scale(0.5); }</style>

變換原點(diǎn) (x，y，z) (Transform-origin ( x, y, z ))

Transform-origin is an important property when dealing with animations, especially rotations. It’s a bit odd and difficult to explain with just words, and I strongly suggest looking at the MDN docs for this one if you’re not already familiar with changing origins (like in Photoshop). The documentation words it best:

處理動(dòng)畫(huà)，尤其是旋轉(zhuǎn)時(shí)，變換原點(diǎn)是重要的屬性。 僅憑文字很難解釋，這有點(diǎn)奇怪而且很難解釋，如果您還不熟悉更改來(lái)源(例如在Photoshop中)，強(qiáng)烈建議您查看MDN文檔。 該文檔最好說(shuō)：

“The transformation origin is the point around which a transformation is applied” — MDN“轉(zhuǎn)換起點(diǎn)是應(yīng)用轉(zhuǎn)換的起點(diǎn)” — MDN

Imagine a wheel:

想象一個(gè)輪子：

When the wheel spins it rotates around that center point. But now imagine that center point was moved to, say, the top left corner. Now the wheel rotates around that new point thus providing a very different experience. That center point is similar to the origin. See the CodePen for an interactive example.

車(chē)輪旋轉(zhuǎn)時(shí)，它將繞該中心點(diǎn)旋轉(zhuǎn)。 但是現(xiàn)在想象一下，中心點(diǎn)已移至左上角。 現(xiàn)在，車(chē)輪圍繞該新點(diǎn)旋轉(zhuǎn)，從而提供了非常不同的體驗(yàn)。 該中心點(diǎn)與原點(diǎn)相似。 有關(guān)交互式示例，請(qǐng)參見(jiàn)CodePen 。

旋轉(zhuǎn)(角度) (Rotate (angle))

Rotate does exactly what it says it does. You can specify any angle, negative, positive, any number and it will spin it around that much. There are a few different values you can use (deg, rad, grad) — see more value types on MDN.

Rotate完全按照它說(shuō)的去做。 您可以指定任意角度，可以為負(fù)，為正，可以為任意角度，并且可以繞任意角度旋轉(zhuǎn)。 您可以使用一些不同的值(度，弧度，梯度)， 請(qǐng)參閱MDN上的更多值類(lèi)型 。

使事情順利 (Making things smooth)

Using transitions we can smooth things out and control the flow of our animations.

使用過(guò)渡，我們可以使事情變得平滑并控制動(dòng)畫(huà)的流向。

Transitions are like tweens or a speed control for our animation. It can take 4 arguments, and I’ll cover each in detail.

過(guò)渡就像補(bǔ)間動(dòng)畫(huà)或動(dòng)畫(huà)的速度控制一樣。 它可能需要4個(gè)參數(shù)，我將詳細(xì)介紹每個(gè)參數(shù)。

過(guò)渡財(cái)產(chǎn) (transition-property)

Transition property is what you’re animating. This could be color, size, a transform, and so on. You could also say all to transition everything, but you should avoid doing this and be more specific.

過(guò)渡屬性就是您要設(shè)置的動(dòng)畫(huà) 。 這可以是顏色，大小，變換等。 您也可以說(shuō)all以過(guò)渡所有內(nèi)容，但應(yīng)避免這樣做，并且要更加具體。

There’s a huge list of properties you can animate on MDN. You should avoid animating anything not on the list.

您可以在MDN上設(shè)置動(dòng)畫(huà)的屬性列表很多 。 您應(yīng)該避免對(duì)列表中沒(méi)有的內(nèi)容進(jìn)行動(dòng)畫(huà)處理。

transition-property: all;

transition-property: all;

過(guò)渡持續(xù)時(shí)間 (transition-duration)

This is how long the animation will take to finish. Use seconds or milliseconds.

這是動(dòng)畫(huà)完成所需的時(shí)間 。 使用秒或毫秒。

transition-duration: 2s;

transition-duration: 2s;

過(guò)渡計(jì)時(shí)功能 (transition-timing-function)

This is where it gets more complex. The transition timing function is an acceleration curve that describes how the animation flows. Take a look at these sites to see what this curve looks like and how it affects the animation.

這就是它變得更加復(fù)雜的地方。 過(guò)渡時(shí)間函數(shù)是描述動(dòng)畫(huà)如何流動(dòng)的加速曲線(xiàn) 。 查看這些 站點(diǎn)，以查看該曲線(xiàn)的外觀(guān)以及它如何影響動(dòng)畫(huà)。

You can have it ease in then ease out, slowly start then finish fast, or a more complex flow with some slow parts and fast parts. There are many ways to have your animation flow.

您可以輕松地進(jìn)行然后輕松地進(jìn)行，緩慢地開(kāi)始然后快速完成，或者使用一些較慢的部分和較快的部分進(jìn)行更復(fù)雜的處理。 有多種方法可以使動(dòng)畫(huà)流動(dòng)。

Luckily, there are some predefined values we can use:

幸運(yùn)的是，我們可以使用一些預(yù)定義的值：

easeease-inease-outease-in-outlinearstep-startstep-end

You’ll have to play with them a bit to find the one for your animation.

您必須與他們一起玩一些才能找到適合您的動(dòng)畫(huà)的那個(gè)。

Sometimes we’ll have to make our own using cubic-bezier (or use a library). For that, I suggest you find an online tool (see above links) or use your browser’s developer tools to make one.

有時(shí)，我們必須使用cubic-bezier (或使用庫(kù) )來(lái)制作自己的。 為此，我建議您找到一種在線(xiàn)工具(請(qǐng)參閱上面的鏈接)，或使用瀏覽器的開(kāi)發(fā)人員工具進(jìn)行構(gòu)建。

transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);

transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);

過(guò)渡延遲 (transition-delay)

This is perhaps the simplest value. Transition-delay is the time it will wait before starting the effect. Use seconds or milliseconds.

這也許是最簡(jiǎn)單的值。 Transition-delay是開(kāi)始效果之前要等待的時(shí)間。 使用秒或毫秒。

transition-delay: 500ms;

transition-delay: 500ms;

過(guò)渡 (屬性，持續(xù)時(shí)間，時(shí)間，延遲) (Transition (property, duration, timing, delay))

You’ve guessed it, this is the shorthand to combine all of the above functions.

您已經(jīng)猜到了，這是結(jié)合以上所有功能的簡(jiǎn)寫(xiě) 。

Here is what it looks like with one transition:

這是一個(gè)過(guò)渡的樣子：

transition: background 1s ease-in-out 0.5s;

transition: background 1s ease-in-out 0.5s;

For multiple, you need to add them to the same transition separated by commas.

對(duì)于多個(gè)，您需要將它們添加到由逗號(hào)分隔的相同過(guò)渡中。

transition: background 1s ease-in-out 0.5s,width 2s ease-in,height 1.5s;

結(jié)論 (In conclusion)

This is all you need to start making interactive websites. Go practice what you’ve learned, and once you have mastered the topics covered here, you can move on to more advanced animations.

這就是開(kāi)始制作交互式網(wǎng)站所需的一切。 練習(xí)所學(xué)知識(shí)，掌握了此處介紹的主題之后，就可以繼續(xù)學(xué)習(xí)更高級(jí)的動(dòng)畫(huà)。

In the next article (or two) I’ll talk about keyframes, 3D transforms, performance, JavaScript animations, and more.

在下一篇(或兩篇)文章中，我將討論關(guān)鍵幀，3D變換，性能，JavaScript動(dòng)畫(huà)等。

Thanks for reading! If you have any questions, comments, or criticism, then please leave a comment below and I’ll respond ASAP.

謝謝閱讀！ 如果您有任何疑問(wèn)，意見(jiàn)或批評(píng)，請(qǐng)?jiān)谙旅媪粞?#xff0c;我將盡快答復(fù)。

翻譯自: https://www.freecodecamp.org/news/an-introduction-to-web-animations-86f45de2a871/

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

總結(jié)

以上是生活随笔為你收集整理的web动画_Web动画简介的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。