溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“分析JavaScript中CSS關鍵幀的強大功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
要使用Web Animation API為關鍵幀動畫設置動畫，只需animate()在元素上調用該函數：
1 |
|
該函數接受兩個參數：
keyframes：包含所需CSS關鍵幀的JavaScript表示的文字數組
keyframeOptions：包含動畫的其他設置的文字，例如緩動，持續時間，填充模式等。
看一下下面的簡單示例，該示例使用 animate()函數而不是CSS關鍵幀來渲染動畫：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
如果我們使用純CSS聲明上面的內容，它看起來像這樣：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
正如您所看到的，這兩種語法非常相似，如果您已經熟悉CSS關鍵幀，那么將它移植到JavaScript就沒有問題。與JavaScript版本的一些區別值得記住：
在JavaScript版本中，屬性字符串值應該在引號（transform: 'translateX(0)'）中
帶連字符的屬性名稱必須轉換為camelCase而不是（borderRadius: 0）。
逗號而不是分號應該跟蹤每個屬性聲明（最后一個屬性除外）
默認情況下，使用JavaScript設置的關鍵幀在播放時均勻分布，每個關鍵幀的時間相同。但是，通過offset在關鍵幀中添加屬性，我們可以設置該關鍵幀應該開始播放的點，例如60％標記的0.6，類似于使用純CSS的關鍵幀。
該animate()方法的第二個參數是一個文字，可以很好地調整動畫的行為。許多選項直接從CSS的animation-*屬性映射，例如“ animation-delay”，“ animation-fill-mode”等。所有屬性都是可選的，如果沒有設置，則回退到默認值：
| property | CSS Property Equivalent | Description |
|---|---|---|
| id | none | Option that sets the name of this Animation to refer back to later in your code. |
| delay | animation-delay | The delay (integer) before the animation starts in milliseconds. Defaults to 0s. |
| direction | animation-direction | Defines whether the animation should play as normal, in reverse, or alternate between the two. Possible values are:
|
| duration | animation-delay | The duration (integer) of the animation in milliseconds, such as 1000. Default to 0 (no animation, jumps to last frame). |
| easing | animation-timing-function | Sets the easing function used to animate the @keyframe animation. Valid values include "ease", "ease-in", "ease-in-out","linear", "frames(integer)" etc. Defaults to "linear". |
| endDelay | n/a | The number of milliseconds to delay after the end of an animation. This is useful when sequencing multiple animations based on the end time of another animation. Defaults to 0. |
| fill | animation-fill-mode | Defines how the animation should apply styles to its target when the animation isn't playing anymore. Defaults to "none". Possible values are:
|
| iterationStart | n/a | Sets the point in the iteration the animation should start. The value should be a positive, floating point number. In an animation with 1 iteration, a iterationStart value of 0.5 starts the animation half way through. In an animation with 2 iterations, a iiterationStart value of 1.5 starts the animation half way through the 2nd iteration etc. Defaults to 0.0. |
| iterations
| animation-iteration-count | Sets the number of times the animation should run before stopping. A value of Infinity means forever. Defaults to 1. |
這是我在上面的例子中使用的keyframeOptions參數：
1 2 3 4 5 6 |
|
如果我們想使用動畫速記屬性在CSS中定義相同的選項，它將如下所示：
1 |
|
使用Animation API創建關鍵幀動畫的部分優點是可以按需操作結果，例如暫停，跳過或掛鉤到動畫的事件處理程序。執行所有這些操作的第一步是在調用animate()方法時將動畫分配給變量：
var myanimation = Element.animate(keyframes, keyframeOptions)
這將創建對Animation對象實例的引用，以允許我們通過各種公開的屬性和方法來操作動畫：
1 2 3 4 |
|
這是修改后使用控件進行回放的原始示例：
請注意，在此示例中，我animate()立即調用目標元素，這將導致動畫立即運行。為了防止這種情況，我pause()隨后調用了該 方法。這是您希望手動控制動畫時使用的常用模式：
1 2 3 4 5 6 7 |
|
下面列出了動畫對象實例的屬性，方法和事件處理程序，如上所述，在為animate()方法分配引用時創建：
屬性
currentTime: Gets or sets the current time value of the animation in milliseconds.
effect: Gets or sets the target effect of an animation. Support for this property is currently limited in all browsers.
finished: A promise object that's resolved when the animation has completed. Support for this property is currently limited in all browsers.
id: Gets or sets a string used to identify the animation.
playbackRate: Integer that gets or sets a playback rate of the animation. For example, 1=normal, 0 = pause, 2 = double, -1 = backwards etc.
playState: Read-only property that returns the current state of the animation: "idle", "pending", "running", "paused", or "finished".
ready: A promise object that's resolved when the animation is ready to be played. Support for this property is currently limited in all browsers.
startTime: Floating point number that gets or sets the current time (in milliseconds) of the animation.
timeline: Gets or sets the current timeline of the animation. Defaults to the document timeline (document.timeline). Support for this property is currently limited in all browsers.
方法
cancel(): Cancels the animation.
finish(): Immediately completes an animation.
pause(): Pauses an animation.
play(): Plays an animation.
reverse(): Reverses the current direction of the animation and plays it.
事件處理程序
oncancel: Triggered when the animation is canceled, such as by calling the cancel() method.
onfinish: Triggered when the animation is finished, such as by calling the finish() method.
通過操作currentTime屬性，下面為我們看到的基本動畫添加了一個簡單的擦除器：
我創建了一個HTML5 Range Slider來用作scrubber。當動畫首次運行（自動）時，動畫的currentTime 屬性值將持續傳送到滑塊，以使兩者同步。目前沒有“onprogress”事件處理程序或類似的東西（據我所知）只在WAAPI動畫運行時運行代碼，所以我用它 來監視動畫的進度。動畫結束后，我利用WAAPI事件調用并不必要地停止更新滑塊。
requestAnimationFrame()onfinishcancelAnimationFrame()
每當用戶與Ranger Slider交互時，我都會更新WAAPI動畫以與滑塊同步：
1 2 3 4 5 6 7 8 9 10 11 12 |
|
當用戶按下滑塊時，我暫停動畫并更新滑塊的值以與動畫的currentTime 屬性同步。當用戶拖動滑塊時，反過來發生 - 我同步currentTime屬性以反映滑塊的值，因此前者依賴于后者。最后，當用戶將鼠標放在滑塊上時，我恢復動畫的自動播放。
在下一個示例中，我將使用WAAPI一次演示動畫多個元素，并在它們全部結束后執行動作。
注意：在撰寫本文時，即使在Chrome和FF中，對WAAPI 承諾的原生支持也很不穩定 。我不得不使用 Web Animation Next Polyfill來使這個功能在瀏覽器中運行。
這里沒有什么太復雜的事了。基本上我循環并調用animate() 標題中的每個字母，并將每個Animation對象實例存儲在數組中。有了這個數組，我可以根據需要循環播放一系列動畫。每個動畫的finished屬性都返回一個 Promise，該動畫在動畫完成播放時被解析，我利用 Promise.all（）在所有動畫完成播放時重置整個動畫。
Animation()構造函數創建動畫到目前為止，我只使用animate()對象直接在一個元素上創建了WAAPI動畫，該元素返回一個Animation對象實例。我會失職但更不用說你也可以使用Animation() 構造函數來完成同樣的事情。
注意：Animation()在撰寫本文時，即使在Chrome和FF中，本機支持也是不穩定的。我不得不使用 Web Animation Next Polyfill來使這個功能在瀏覽器中運行。
有了警告，這里是如何調用 Animation() 構造函數：
1 |
|
該函數接受兩個參數：
effect：動畫效果。在撰寫本文時，僅keyframeEffect支持該對象。
timeline：動畫時間軸。在撰寫本文時，僅document.timeline支持。
讓我們看一下如何使用一個簡單的例子：
這是JavaScript代碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
新KeyframeEffect()對象是一個一體化對象，它包含一個位置的動畫的所有設置，從目標元素，要使用的關鍵幀到關鍵幀選項。
“分析JavaScript中CSS關鍵幀的強大功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
