整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者：MrWang
轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000023102193
當(dāng)我們談及網(wǎng)頁(yè)動(dòng)畫時(shí)，自然聯(lián)想到的是 CSS3 動(dòng)畫、JS 動(dòng)畫、SVG 動(dòng)畫 等技術(shù)以及 jQuery.animate() 等動(dòng)畫封裝庫(kù)，根據(jù)實(shí)際動(dòng)畫內(nèi)容設(shè)計(jì)去選擇不同的實(shí)現(xiàn)方式,然而，每個(gè)現(xiàn)行的動(dòng)畫技術(shù)都存在一定的缺點(diǎn)，如 CSS3動(dòng)畫必須通過(guò)JS去獲取動(dòng)態(tài)改變的值，一個(gè)動(dòng)畫效果分散在css文件和js文件里不好維護(hù)，setInterval 的時(shí)間往往是不精確的而且還會(huì)卡頓,引入額外的動(dòng)畫封裝庫(kù)也并非對(duì)性能敏感的業(yè)務(wù)適用。
Web Animation API 的歷史也應(yīng)該有幾年了，但是每當(dāng)做動(dòng)畫效果時(shí)，筆者就是依賴各種庫(kù)，很少想著去原生實(shí)現(xiàn)，最終造成了我們的項(xiàng)目各種依賴庫(kù)，體積也不斷變大，性能如何也不得而知，作為前端開(kāi)發(fā)的我們多么希望原生的JS去支持通用的動(dòng)畫解決方案， Web Animation API 可能就是一個(gè)不錯(cuò)的解決方案。
W3C 提出 Web Animation API（簡(jiǎn)稱 WAAPI）正緣于此，它致力于集合 CSS3 動(dòng)畫的性能、JavaScript 的靈活、動(dòng)畫庫(kù)的豐富等各家所長(zhǎng)，將盡可能多的動(dòng)畫控制由原生瀏覽器實(shí)現(xiàn)，并添加許多 CSS 不具備的變量、控制以及或調(diào)的選項(xiàng)。它為我們提供了一種通用語(yǔ)言來(lái)描述DOM元素的動(dòng)畫，主要方法有：Animation，KeyframeEffect，AnimationEvent，DocumentTimeline，EffectTiming。關(guān)于這個(gè)API的詳細(xì)介紹，可以參照MDN的這篇文檔，鏈接地址：https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API。
使用Web Animations API，我們可以將交互式動(dòng)畫從樣式表移動(dòng)到JavaScript，將表示與行為分開(kāi)。我們不再需要依賴DOM的技術(shù)，例如編寫CSS屬性作用于元素以控制方向。為了構(gòu)建自定義動(dòng)畫庫(kù)和創(chuàng)建交互式動(dòng)畫，Web Animations API可能是完成工作的完美工具，你無(wú)需借助第三方動(dòng)畫庫(kù)，就可以輕松實(shí)現(xiàn)一個(gè)效果不錯(cuò)的動(dòng)畫。
為了讓大家對(duì)這個(gè)API有個(gè)清晰的認(rèn)識(shí)，筆者在接下來(lái)的系列文章里，用五六個(gè)例子讓大家理解這個(gè)API，今天筆者將用此API實(shí)現(xiàn)一個(gè)隨機(jī)移動(dòng)的圖片開(kāi)始進(jìn)行介紹，比如用這個(gè)效果我們可以制作一個(gè)隨機(jī)飄浮移動(dòng)的廣告位，游戲里隨機(jī)走動(dòng)的怪物等等，本例中的特點(diǎn)就是為了體現(xiàn)Web Animation API的靈活性和強(qiáng)大性，我沒(méi)有引用任何第三方類庫(kù)，比如（JQ）以及也沒(méi)有使用setTimeout和requestAnimationFrame()函數(shù)。
本篇文章預(yù)計(jì)時(shí)間 5 分鐘
開(kāi)始前，我們先來(lái)看看完成后的動(dòng)畫效果，示例如下效果：
無(wú)論圖片怎么隨機(jī)移動(dòng)，我們都希望在指定的容器里，而不是漫無(wú)邊際，首先我們?cè)趆tml頁(yè)面定義容器：
<div id="container"> </div>
接下來(lái)定義容器的樣式：
body {
margin: 0;
}
div#container {
height:500px;
width:100%;
background: #C6CEF7;
}
#target {
position: absolute;
filter: drop-shadow(-12px 12px 7px rgba(0,0,0,0.5));
}
獲取容器
var container=document.getElementById("container");
加載動(dòng)畫
為了更加直觀性，我選擇一個(gè)走動(dòng)的gif圖片，由于圖片的加載需要一些時(shí)間，為了不破壞動(dòng)畫的連貫性，確保圖片加載完了我們?cè)趫?zhí)行動(dòng)畫，相關(guān)代碼如下：
var target=document.createElement("img");
target.id="target";
target.onload=function() {
floatHead();
}
target.src="walk.gif";
container.appendChild(target);
大家都看到了，onload部分我們加載了floatHead()函數(shù)，接下來(lái)我們來(lái)進(jìn)行相關(guān)實(shí)現(xiàn)，此函數(shù)主要包含以下功能：創(chuàng)建一個(gè)隨機(jī)位置，計(jì)算移動(dòng)時(shí)間，封裝移動(dòng)動(dòng)畫。
隨機(jī)位置
我們利用Math.floor函數(shù)實(shí)現(xiàn)了其隨機(jī)位置的變化，示例代碼如下：
function makeNewPosition() {
var containerVspace=container.offsetHeight - target.offsetHeight,
containerHspace=container.offsetWidth - target.offsetWidth,
newX=Math.floor(Math.random() * containerVspace),
newY=Math.floor(Math.random() * containerHspace);
return [newX, newY];
}
這里的隨機(jī)位置，我們返回了一個(gè)數(shù)組，描述的是圖片相對(duì)容器的位置，即top,left。這里你需要理解offsetHeight，offsetWidth，可理解為div的可視高度或?qū)挾龋瑯邮降膆eight或Width+上下padding或左右padding+上下border-width或左右border-width。
計(jì)算時(shí)間
動(dòng)畫是有時(shí)間屬性的，我們進(jìn)行位置的移動(dòng)，需要花多久時(shí)間，假設(shè)運(yùn)動(dòng)速度為0.1個(gè)單位/毫秒。這個(gè)函數(shù)包含兩個(gè)數(shù)組：prev為當(dāng)前目標(biāo)的原始X和Y位置，next為移動(dòng)目標(biāo)的位置。此函數(shù)沒(méi)有進(jìn)行進(jìn)行精確的距離計(jì)算，只是判斷了x和y軸上移動(dòng)的距離大小用最大的距離除以速度，示例代碼如下：
function velocity(prev, next) {
var x=Math.abs(prev[1] - next[1]),
y=Math.abs(prev[0] - next[0]),
larger=x > y ? x : y,
speedModifier=0.1,
time=Math.ceil(larger / speedModifier);
return time;
}
封裝移動(dòng)動(dòng)畫
接下來(lái)是我們Web Animations API的核心部分，我們使用其核心API在加上上述我們完成的兩個(gè)函數(shù)讓其動(dòng)起來(lái)，示例代碼如下：
function floatHead() {
var newPos=makeNewPosition(),
oldTop=target.offsetTop,
oldLeft=target.offsetLeft,
target.animate([
{ top: oldTop+"px", left: oldLeft+"px" },
{ top: newPos[0]+"px", left: newPos[1]+"px" }
], {
duration: velocity([oldTop, oldLeft],newPos),
fill: "forwards"
}).onfinish=function() {
floatHead();
}
}
該Animation的animate函數(shù)有兩個(gè)參數(shù)，一個(gè)是KeyframeEffects數(shù)組和AnimationEffectTimingPropertiesoptions 的對(duì)象。基本上，第一個(gè)參數(shù)映射到您將放入CSS中的內(nèi)容@keyframes，你可以想象成css中的@keyframes內(nèi)容，比如以下代碼：
@keyframes emphasis {
0% {
transform: scale(1);
opacity: 1;
}
30% {
transform: scale(.5);
opacity: .5;
}
78.75% {
transform: scale(.667);
opacity: .667;
}
100% {
transform: scale(.6);
opacity: .6;
}
}
你可以將“{}”里的信息順序依次放到一個(gè)數(shù)組里；第二個(gè)參數(shù)是時(shí)間控制 timing，包括有 duration 持續(xù)時(shí)間、iterations 執(zhí)行次數(shù)、direction 動(dòng)畫方向、easing 緩動(dòng)函數(shù)等屬性。比如以下代碼：
#toAnimate {
animation: emphasis 700ms ease-in-out 10ms infinite alternate forwards;
}
你還可能注意到我們使用了onfinish事件完成了floatHead函數(shù)的反復(fù)調(diào)用，其是Animation的屬性，監(jiān)聽(tīng)動(dòng)畫完成事件，如果動(dòng)畫完成繼續(xù)執(zhí)行floatHead()，相當(dāng)不斷的遞歸調(diào)用。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0;
}
div#container {
height:500px;
width:100%;
background: #C6CEF7;
}
#target {
position: absolute;
filter: drop-shadow(-12px 12px 7px rgba(0,0,0,0.5));
}
</style>
<meta charset="UTF-8">
<title>前端達(dá)人示例展示——圖片隨機(jī)移動(dòng)</title>
</head>
<body>
<div id="container"></div>
<script>
function makeNewPosition() {
var containerVspace=container.offsetHeight - target.offsetHeight,
containerHspace=container.offsetWidth - target.offsetWidth,
newX=Math.floor(Math.random() * containerVspace),
newY=Math.floor(Math.random() * containerHspace);
return [newX, newY];
}
function velocity(prev, next) {
var x=Math.abs(prev[1] - next[1]),
y=Math.abs(prev[0] - next[0]),
larger=x > y ? x : y,
speedModifier=0.2,
time=Math.ceil(larger / speedModifier);
return time;
}
function floatHead() {
var newPos=makeNewPosition(),
oldTop=target.offsetTop,
oldLeft=target.offsetLeft;
target.animate([
{ top: oldTop+"px", left: oldLeft+"px" },
{ top: newPos[0]+"px", left: newPos[1]+"px" }
], {
duration: velocity([oldTop, oldLeft],newPos),
fill: 'forwards'
}).onfinish=function() {
floatHead();
}
}
var container=document.getElementById("container"),
target=document.createElement("img");
target.id="target";
target.onload=function() {
floatHead();
}
target.src="walk.gif";
target.width="200";
container.appendChild(target);
</script>
</body>
</html>
最后聊聊你關(guān)心的各瀏覽器兼容問(wèn)題，如下所示顯示了各個(gè)瀏覽器的兼容情況：
看來(lái)好多都是部分支持，沒(méi)有完全支持，筆者也親自測(cè)試了下，在pc端最新版的谷歌瀏覽器和Firefox是沒(méi)有任何問(wèn)題的可以完美運(yùn)行，筆者的safari還是運(yùn)行不起來(lái)，在iPhone XS Max無(wú)法運(yùn)行。
作為一名前端開(kāi)發(fā)者，在移動(dòng)端大行其道怎么能容忍在手機(jī)端沒(méi)有效果，為了在現(xiàn)代瀏覽器廠商還沒(méi)完全跟進(jìn)到位的時(shí)候搶先用上 WAAPI（Web Animation API簡(jiǎn)稱），我們可以選擇引入針對(duì) Web Animation API 的 Polyfill 庫(kù) [https://github.com/web-animations/web-animations-js]，從而在 IE/Firefox/Safari 等瀏覽器上體驗(yàn)到 WAAPI 的精彩。
因此我們只需要文件里引入以下js，就可以完美體驗(yàn)：
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
移動(dòng)端瀏覽器，Android 5.0 以上的 Android Browser 和 Chrome for Android 本身就已經(jīng)支持 WAAPI 了，加上 Polyfill 之后，筆者的手機(jī)終于可以看到運(yùn)行效果了，微信里的QQ內(nèi)核瀏覽器也能完美運(yùn)行，pc端的safari也可以完美運(yùn)行。可以說(shuō)是全平臺(tái)支持了，有了這個(gè)庫(kù)你可以放心大膽的使用了。
好了今天的代碼擼完了，js代碼還不到50行(注：為了在手機(jī)端運(yùn)行，引入了web-animations.min.js)，您可以點(diǎn)擊"https://www.qianduandaren.com/demo/walk/"行預(yù)覽，筆者親測(cè)在iPhone XS Max運(yùn)行良好，其他手機(jī)沒(méi)有，有待親們的測(cè)試，歡迎到留言區(qū)告知。下一篇文章我們用不到20行的原生js代碼純手工擼一個(gè)漂亮的時(shí)鐘，敬請(qǐng)期待。
更多精彩內(nèi)容，請(qǐng)微信關(guān)注“前端達(dá)人”公眾號(hào)！
當(dāng)我們談及網(wǎng)頁(yè)動(dòng)畫時(shí)，自然聯(lián)想到的是 CSS3 動(dòng)畫、JS 動(dòng)畫、SVG 動(dòng)畫 等技術(shù)以及 jQuery.animate() 等動(dòng)畫封裝庫(kù)，根據(jù)實(shí)際動(dòng)畫內(nèi)容設(shè)計(jì)去選擇不同的實(shí)現(xiàn)方式,然而，每個(gè)現(xiàn)行的動(dòng)畫技術(shù)都存在一定的缺點(diǎn)，如 CSS3動(dòng)畫必須通過(guò)JS去獲取動(dòng)態(tài)改變的值，一個(gè)動(dòng)畫效果分散在css文件和js文件里不好維護(hù)，setInterval 的時(shí)間往往是不精確的而且還會(huì)卡頓,引入額外的動(dòng)畫封裝庫(kù)也并非對(duì)性能敏感的業(yè)務(wù)適用。
Web Animation API 的歷史也應(yīng)該有幾年了，但是每當(dāng)做動(dòng)畫效果時(shí)，筆者就是依賴各種庫(kù)，很少想著去原生實(shí)現(xiàn)，最終造成了我們的項(xiàng)目各種依賴庫(kù)，體積也不斷變大，性能如何也不得而知，作為前端開(kāi)發(fā)的我們多么希望原生的JS去支持通用的動(dòng)畫解決方案， Web Animation API 可能就是一個(gè)不錯(cuò)的解決方案。
W3C 提出 Web Animation API（簡(jiǎn)稱 WAAPI）正緣于此，它致力于集合 CSS3 動(dòng)畫的性能、JavaScript 的靈活、動(dòng)畫庫(kù)的豐富等各家所長(zhǎng)，將盡可能多的動(dòng)畫控制由原生瀏覽器實(shí)現(xiàn)，并添加許多 CSS 不具備的變量、控制以及或調(diào)的選項(xiàng)。它為我們提供了一種通用語(yǔ)言來(lái)描述DOM元素的動(dòng)畫，主要方法有：Animation，KeyframeEffect，AnimationEvent，DocumentTimeline，EffectTiming。關(guān)于這個(gè)API的詳細(xì)介紹，可以參照MDN的這篇文檔，鏈接地址：https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API。
使用Web Animations API，我們可以將交互式動(dòng)畫從樣式表移動(dòng)到JavaScript，將表示與行為分開(kāi)。我們不再需要依賴DOM的技術(shù)，例如編寫CSS屬性作用于元素以控制方向。為了構(gòu)建自定義動(dòng)畫庫(kù)和創(chuàng)建交互式動(dòng)畫，Web Animations API可能是完成工作的完美工具，你無(wú)需借助第三方動(dòng)畫庫(kù)，就可以輕松實(shí)現(xiàn)一個(gè)效果不錯(cuò)的動(dòng)畫。
為了讓大家對(duì)這個(gè)API有個(gè)清晰的認(rèn)識(shí)，筆者在接下來(lái)的系列文章里，用五六個(gè)例子讓大家理解這個(gè)API，今天筆者將用此API實(shí)現(xiàn)一個(gè)隨機(jī)移動(dòng)的圖片開(kāi)始進(jìn)行介紹，比如用這個(gè)效果我們可以制作一個(gè)隨機(jī)飄浮移動(dòng)的廣告位，游戲里隨機(jī)走動(dòng)的怪物等等，本例中的特點(diǎn)就是為了體現(xiàn)Web Animation API的靈活性和強(qiáng)大性，我沒(méi)有引用任何第三方類庫(kù)，比如（JQ）以及也沒(méi)有使用setTimeout和requestAnimationFrame()函數(shù)。
本篇文章預(yù)計(jì)時(shí)間 5 分鐘
開(kāi)始前，我們先來(lái)看看完成后的動(dòng)畫效果，示例如下效果：
無(wú)論圖片怎么隨機(jī)移動(dòng)，我們都希望在指定的容器里，而不是漫無(wú)邊際，首先我們?cè)趆tml頁(yè)面定義容器：
<div id="container"> </div>
接下來(lái)定義容器的樣式：
body {
margin: 0;
}
div#container {
height:500px;
width:100%;
background: #C6CEF7;
}
#target {
position: absolute;
filter: drop-shadow(-12px 12px 7px rgba(0,0,0,0.5));
}
獲取容器
var container=document.getElementById("container");
加載動(dòng)畫
為了更加直觀性，我選擇一個(gè)走動(dòng)的gif圖片，由于圖片的加載需要一些時(shí)間，為了不破壞動(dòng)畫的連貫性，確保圖片加載完了我們?cè)趫?zhí)行動(dòng)畫，相關(guān)代碼如下：
var target=document.createElement("img");
target.id="target";
target.onload=function() {
floatHead();
}
target.src="walk.gif";
container.appendChild(target);
大家都看到了，onload部分我們加載了floatHead()函數(shù)，接下來(lái)我們來(lái)進(jìn)行相關(guān)實(shí)現(xiàn)，此函數(shù)主要包含以下功能：創(chuàng)建一個(gè)隨機(jī)位置，計(jì)算移動(dòng)時(shí)間，封裝移動(dòng)動(dòng)畫。
隨機(jī)位置
我們利用Math.floor函數(shù)實(shí)現(xiàn)了其隨機(jī)位置的變化，示例代碼如下：
function makeNewPosition() {
var containerVspace=container.offsetHeight - target.offsetHeight,
containerHspace=container.offsetWidth - target.offsetWidth,
newX=Math.floor(Math.random() * containerVspace),
newY=Math.floor(Math.random() * containerHspace);
return [newX, newY];
}
這里的隨機(jī)位置，我們返回了一個(gè)數(shù)組，描述的是圖片相對(duì)容器的位置，即top,left。這里你需要理解offsetHeight，offsetWidth，可理解為div的可視高度或?qū)挾龋瑯邮降膆eight或Width+上下padding或左右padding+上下border-width或左右border-width。
計(jì)算時(shí)間
動(dòng)畫是有時(shí)間屬性的，我們進(jìn)行位置的移動(dòng)，需要花多久時(shí)間，假設(shè)運(yùn)動(dòng)速度為0.1個(gè)單位/毫秒。這個(gè)函數(shù)包含兩個(gè)數(shù)組：prev為當(dāng)前目標(biāo)的原始X和Y位置，next為移動(dòng)目標(biāo)的位置。此函數(shù)沒(méi)有進(jìn)行進(jìn)行精確的距離計(jì)算，只是判斷了x和y軸上移動(dòng)的距離大小用最大的距離除以速度，示例代碼如下：
function velocity(prev, next) {
var x=Math.abs(prev[1] - next[1]),
y=Math.abs(prev[0] - next[0]),
larger=x > y ? x : y,
speedModifier=0.1,
time=Math.ceil(larger / speedModifier);
return time;
}
封裝移動(dòng)動(dòng)畫
接下來(lái)是我們Web Animations API的核心部分，我們使用其核心API在加上上述我們完成的兩個(gè)函數(shù)讓其動(dòng)起來(lái)，示例代碼如下：
function floatHead() {
var newPos=makeNewPosition(),
oldTop=target.offsetTop,
oldLeft=target.offsetLeft,
target.animate([
{ top: oldTop+"px", left: oldLeft+"px" },
{ top: newPos[0]+"px", left: newPos[1]+"px" }
], {
duration: velocity([oldTop, oldLeft],newPos),
fill: "forwards"
}).onfinish=function() {
floatHead();
}
}
該Animation的animate函數(shù)有兩個(gè)參數(shù)，一個(gè)是KeyframeEffects數(shù)組和AnimationEffectTimingPropertiesoptions 的對(duì)象。基本上，第一個(gè)參數(shù)映射到您將放入CSS中的內(nèi)容@keyframes，你可以想象成css中的@keyframes內(nèi)容，比如以下代碼：
@keyframes emphasis {
0% {
transform: scale(1);
opacity: 1;
}
30% {
transform: scale(.5);
opacity: .5;
}
78.75% {
transform: scale(.667);
opacity: .667;
}
100% {
transform: scale(.6);
opacity: .6;
}
}
你可以將“{}”里的信息順序依次放到一個(gè)數(shù)組里；第二個(gè)參數(shù)是時(shí)間控制 timing，包括有 duration 持續(xù)時(shí)間、iterations 執(zhí)行次數(shù)、direction 動(dòng)畫方向、easing 緩動(dòng)函數(shù)等屬性。比如以下代碼：
#toAnimate {
animation: emphasis 700ms ease-in-out 10ms infinite alternate forwards;
}
你還可能注意到我們使用了onfinish事件完成了floatHead函數(shù)的反復(fù)調(diào)用，其是Animation的屬性，監(jiān)聽(tīng)動(dòng)畫完成事件，如果動(dòng)畫完成繼續(xù)執(zhí)行floatHead()，相當(dāng)不斷的遞歸調(diào)用。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0;
}
div#container {
height:500px;
width:100%;
background: #C6CEF7;
}
#target {
position: absolute;
filter: drop-shadow(-12px 12px 7px rgba(0,0,0,0.5));
}
</style>
<meta charset="UTF-8">
<title>前端達(dá)人示例展示——圖片隨機(jī)移動(dòng)</title>
</head>
<body>
<div id="container"></div>
<script>
function makeNewPosition() {
var containerVspace=container.offsetHeight - target.offsetHeight,
containerHspace=container.offsetWidth - target.offsetWidth,
newX=Math.floor(Math.random() * containerVspace),
newY=Math.floor(Math.random() * containerHspace);
return [newX, newY];
}
function velocity(prev, next) {
var x=Math.abs(prev[1] - next[1]),
y=Math.abs(prev[0] - next[0]),
larger=x > y ? x : y,
speedModifier=0.2,
time=Math.ceil(larger / speedModifier);
return time;
}
function floatHead() {
var newPos=makeNewPosition(),
oldTop=target.offsetTop,
oldLeft=target.offsetLeft;
target.animate([
{ top: oldTop+"px", left: oldLeft+"px" },
{ top: newPos[0]+"px", left: newPos[1]+"px" }
], {
duration: velocity([oldTop, oldLeft],newPos),
fill: 'forwards'
}).onfinish=function() {
floatHead();
}
}
var container=document.getElementById("container"),
target=document.createElement("img");
target.id="target";
target.onload=function() {
floatHead();
}
target.src="walk.gif";
target.width="200";
container.appendChild(target);
</script>
</body>
</html>
最后聊聊你關(guān)心的各瀏覽器兼容問(wèn)題，如下所示顯示了各個(gè)瀏覽器的兼容情況：
看來(lái)好多都是部分支持，沒(méi)有完全支持，筆者也親自測(cè)試了下，在pc端最新版的谷歌瀏覽器和Firefox是沒(méi)有任何問(wèn)題的可以完美運(yùn)行，筆者的safari還是運(yùn)行不起來(lái)，在iPhone XS Max無(wú)法運(yùn)行。
作為一名前端開(kāi)發(fā)者，在移動(dòng)端大行其道怎么能容忍在手機(jī)端沒(méi)有效果，為了在現(xiàn)代瀏覽器廠商還沒(méi)完全跟進(jìn)到位的時(shí)候搶先用上 WAAPI（Web Animation API簡(jiǎn)稱），我們可以選擇引入針對(duì) Web Animation API 的 Polyfill 庫(kù) [https://github.com/web-animations/web-animations-js]，從而在 IE/Firefox/Safari 等瀏覽器上體驗(yàn)到 WAAPI 的精彩。
因此我們只需要文件里引入以下js，就可以完美體驗(yàn)：
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
移動(dòng)端瀏覽器，Android 5.0 以上的 Android Browser 和 Chrome for Android 本身就已經(jīng)支持 WAAPI 了，加上 Polyfill 之后，筆者的手機(jī)終于可以看到運(yùn)行效果了，微信里的QQ內(nèi)核瀏覽器也能完美運(yùn)行，pc端的safari也可以完美運(yùn)行。可以說(shuō)是全平臺(tái)支持了，有了這個(gè)庫(kù)你可以放心大膽的使用了。
好了今天的代碼擼完了，js代碼還不到50行(注：為了在手機(jī)端運(yùn)行，引入了web-animations.min.js)，您可以點(diǎn)擊"https://www.qianduandaren.com/demo/walk/"行預(yù)覽，筆者親測(cè)在iPhone XS Max運(yùn)行良好，其他手機(jī)沒(méi)有，有待親們的測(cè)試，歡迎到留言區(qū)告知。下一篇文章我們用不到20行的原生js代碼純手工擼一個(gè)漂亮的時(shí)鐘，敬請(qǐng)期待。
更多精彩內(nèi)容，請(qǐng)微信關(guān)注“前端達(dá)人”公眾號(hào)！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
