CSSHoudini：用瀏覽器引擎實現(xiàn)高級CSS效果

Houdini被稱之為Magicofstylingandlayoutontheweb,看起來十分神秘，但實際上，Houdini并非什么神秘組織或者神奇魔法，它是一系列與CSS引擎相關的瀏覽器API的總稱。一、Houdini是什么在了解之前，先來看一些Houdini能實現(xiàn)的效果吧:反向的圓角效果(Border-radius)：動態(tài)的球形背景(Backgrond)：彩色邊框（Border）：CSSHoudini神奇吧，要實現(xiàn)這些效果使用常規(guī)的CSS可沒那么容易，但對CSSHoudini來說，卻很easy,這些效果只是冰山一角，CSSHoudini能做的有更多。（這些案例均來自GoogleChromeLabs,更多案例可以通過HoudiniSamples查看）。

看完效果，再來說說Houdini到底是什么。首先，Houdini的出現(xiàn)最直接的目的是為了解決瀏覽器對新的CSS特性支持較差以及Cross-Browser的問題。我們知道有很多新的CSS特性雖然很棒，但它們由于不被主流瀏覽器廣泛支持而很少有人去使用。隨著CSS規(guī)范在不斷地更新迭代，越來越多有益的特性被納入進來，但是一個新的CSS特性從被提出到成為一個穩(wěn)定的CSS特性，需要經(jīng)過漫長地等待，直到被大部分瀏覽器支持時，才能被開發(fā)者廣泛地使用。而Houdini的出現(xiàn)正是洞察和解決了這一痛點，它將一系列CSS引擎API開放出來，讓開發(fā)者可以通過JavasScript創(chuàng)造或者擴展現(xiàn)有的CSS特性，甚至創(chuàng)造自己的CSS渲染規(guī)則，給開發(fā)者更高的CSS開發(fā)自由度，實現(xiàn)更多復雜的效果。二、JSPolyfillvsHoudini有人會問，實際上很多新的css特性在被瀏覽器支持之前，也有可替代的JavaScriptPolyfill可以使用，為什么我們仍然需要Houdini呢？這些Polyfill不是同樣可以解決我們的問題嗎？要回答這個問題也很簡單,JavaScriptPolyfill相對于Houdini有三個明顯的缺陷:.不一定能實現(xiàn)或實現(xiàn)困難。CSSOM開放給JavaScript的API很少，這意味著開發(fā)者能做的很有限，只能簡單地操縱DOM并對樣式做動態(tài)計算和調整，光是去實現(xiàn)一些復雜的CSS新特性的Polyfill就已經(jīng)很難了，對于更深層次的Layout、Paint、Composite等渲染規(guī)則更是無能為力。所以當一個新的CSS特性被推出時，通過JavaScriptPolyfill不一定能夠完整地實現(xiàn)它。.實現(xiàn)效果差或有使用限制。JavaScriptPolyfill是通過JavaScript來模擬CSS特性的，而不是直接通過CSS引擎進行渲染，通常它們都會有一定的限制和缺陷。例如，大家熟知的css-scroll-sn叩-polyfill就是針對新的CSS特性ScrollSn叩產(chǎn)生的Polyfill,但它在使用時就存在使用限制或者原生CSS表現(xiàn)不一致的問題。.性能較差。JavaScriptPolyfill可能造成一定程度的性能損耗。JavaScriptPolyfill的執(zhí)行時機是在DOM和CSSOM都構建完成并且完成渲染后，通常JavaScriptPolyfill是通過給DOM元素設置內聯(lián)樣式來模擬CSS特性，這會導致頁面的重新渲染或回流。尤其是當這些Polyfill和滾動事件綁定時，會造成更加明顯的性能損耗。JSPolyfill不一定能實現(xiàn)或實現(xiàn)困難效果差或有使用限制性能較差Houdini的誕生讓CSS新特性不再依賴于瀏覽器，開發(fā)者通過直接操作CSS引擎，具有更高的自由度和性能優(yōu)勢，并且它的瀏覽器支持度在不斷提升，越來越多的API被支持，未來Houdini必然會加速走進web開發(fā)者的世界，所以現(xiàn)在對它做一些了解也是必要的。在本文，我們會介紹Houdini的APIs以及它們的使用方法，看看這些API當前的支持情況，并給出一些在生產(chǎn)環(huán)境中使用它們的建議。Houdini的名稱與一位著名美國逃脫魔術師HarryHoudini的名稱一樣，也許正是取逃脫之意，讓CSS新特性逃離瀏覽器的掌控。三、HoudiniAPIs上文提到CSSHoudini提供了很多CSS引擎相關的API,根據(jù)Houdini提供的規(guī)范說明文件，API共分為兩種類型：high-levelAPIs和low-levelAPIs.■■支持度較高■支持度一般■"支持high-levelAPIs：顧名思義是高層次的API,這些API與瀏覽器的渲染流程相關PaintAPI提供了一組與繪制(Paint)過程相關的API,我們可以通過它自定義的渲染規(guī)則，例如調整顏色(color)、邊框(border),背景(background),形狀等繪制規(guī)則。AnimationAPI提供了一組與合成(composite)渲染相關的API,我們可以通過它調整繪制層級和自定義動畫。LayoutAPI提供了一組與布局(Layout)過程相關的API,我們可以通過它自定義的布局規(guī)則，類似于實現(xiàn)諸如flex、grid等布局，自定義元素或子元素的對齊(alignment)、位置(position)等布局規(guī)則。low-levelAPIs：低層次的APL這些API是high-levelAPIs的實現(xiàn)基礎。TypedObjectModelAPICSSProperties&ValuesAPIWorkletsFontMetricsAPICSSParserAPI這些APIs的支持情況在不斷更新中，可以看到當前最新的一次更新時間是在2021年5月份，還是比較活躍的。(注：圖片來源于IsHoudinireadyyet?)

IsHoudinireadyyet?eGooQteOvomeeMicrotoftEd9toOperaoSamsungIntenwfMoMaFirdOiAppleSatan燃SpecEngineBinkGeckoWvbM*PtmtAPI(Oronw65)SNpped(E8?R)?w<l(Opera52)SMipedOnwmf<l2)UndercrnidmMwiInDmlopmeaiCamMaieAecomfr(EipUmffDemotArtldt)DeUM*Detarf*DeCaitaDetectDeUMiMailtSpecPtopcrtiMlVaiuMAPI(Chrome71)ShapedEEShipped(Open6S)Stepped(Intemfi110)UndermtMteraiMMiPvtMlMlppon(SaftrtTPiT)WodungDn(D?motArocit)Delate一D^jwltDote4sMattsTyped0M(EipUnwAdtCte)awed(OvonwM)SNppedEE(OperaS3)(Mnw<l2)UMercomideralionInOmtopmMMWoriungOnDetaMDotaiisDecaniD*t*ii*ufwiapi(CxpiwiefDemot)Panitisuppod(Cmry)UiPemaisupport(Caiwy)Pwttaisupport(Dmiopcr)Mos^rwiDvUM*UndercontiderattoftDeUitisFirttPubtocWork*AMnMfiWortdei(UptorarDernotArKlt)PartialMppod(OvomtH)DecaysParttaitupporlEEPwiiaitupport(OpmSt)PanaalMppod(MemetlOJ)MOBigMlUnderconstdtrtbonDeUntiFwtRubbcWorttPinerAPI(EiptoiMr)NOM0MlNotagMlMosiomINosignalMovgMiPropouiFontMemesAPI(Eiptenwr)NobiqmINovgntiMosi9MlNoi^rwlMosi9MlNOttQMiPtopomIMavrtimtdbySurmasowctcodftbccnw5thertpoMory。，GnHvb,tostupdatedonFn 212021Ms41GMT*€000(CoordhnMedUmrulTm)對比下圖2018年底的情況，Houdini目前得到了更廣泛的支持，我們也期待圖里更多綠色的板塊被逐漸點亮。

IsHoudinireadyyet??ce?oAppleSafariGoogleChromeMicrosoftEdgeMozillaFirefoxOperaLayoutAPI(SpecExplainer)nosignalpartially(Canary)DetailsnosignalnosignalnosignalPaintAPI(SpecDemosArticle)nosignalyes(Chrome65)Detailsnosignalintent(Servo)DetailsnosignalParserAPI(Explainer)nosignalnosignalnosignalnosignalnosignalProperties&ValuesAPI(Spec)nosignalpartially(Canary)DetailsnosignaldevelopmentDetailsnosignalAnimationWorklet(SpecExplainerDemos)nosignalpartially(Canary)DetailsnosignalnosignalnosignalTypedOM(SpecArticle)intentyes(Chrome66)nosignalintentnosignalDetailsDetailsDetailsFontMetricsAPI(Spec)nosignalnosignalnosignalnosignalnosignal大家可以訪問IsHoudinireadyyet?看到Houdini的最新支持情況。下文中，我們會著重介紹TypedObjectModelAPI>CSSProperties&ValuesAPRWorklets和PaintAPI、AnimationAPI,因為它們目前具有比其他API更好的支持度，且它們的特性已經(jīng)趨于穩(wěn)定，在未來不會有很大的變更，大家也能在了解它們之后直接將它們使用在項目中。四、TypedObjectModelAPI在Houdini出現(xiàn)以前，我們通過JavaScript操作CSSStyle的方式很簡單，先看看一段大家熟悉的代碼。//BeforeHoudiniconstsize=tatrget.stglefontsize=size+ //constii^gUrl=,https://\A/\A/\A/.exai^pe.coi^/sai^ple.p^g,tavgetstyle.hackgrouiad= +ikv\gUrl+y//“(x”(〃ttps://www.ex〃3pe.con/\/sanAp/e.piag)”targetstyIc,c^sText=牛。八t-size:'+size+'px;background：■”('+ikvxgU”+')，//“font-size30px;background：uH(kttps：//www.ex〃叫％.com/s〃叫de.p八g)”我們可以看到CSS樣式在被訪問時被解析為字符串返回，設置CSS樣式時也必須以字符串的形式傳入。開發(fā)者需要手動拼接數(shù)值、單位、格式等信息，這種方式非常原始和落后，很多開發(fā)者為了節(jié)省性能損耗，會選擇將一長串的CSSStyle字符串傳入cssText,可讀性很差，而且很容易產(chǎn)生隱蔽的語法錯誤。TypedObjectModel與TypeScript的命名類似，都增加了Type這個前綴，如果你使用過TypeScript就會了解到，TypeScript增強了類型檢查，讓代碼更穩(wěn)定也更易維護，TypedObjectModel也是如此。相比于上面晦澀的傳統(tǒng)方法,TypedObjectModel將CSS屬性值包裝為TypedJavaScriptObject,讓每個屬性值都有自己的類型，簡化了CSS屬性的操作，并且?guī)砹诵阅苌系奶嵘?。通過JavaScript對象來描述CSS值比字符串具有更好的可讀性和可維護性，通常也更快，因為可以直接操作值，然后廉價地將其轉換回底層值，而無需構建和解析CSS字符串。在TypedObjectModel中CSSStyleValue是所有CSS屬性值的基類，在它之下的子類用于描述各種CSS屬性值，例如：CSSUnitValueCSSImageValueCSSKeywordValueCSSMathValueCSSNumericValueCSSPositionValueCSSTransformValueCSSUnparsedValue其它通過它們的命名就可以看出這些不同的子類分別用于表示哪種類型的CSS屬性值，以CSSUnitValue為例，它可以用于表示帶有單位的CSS屬性值，例如font-size>width,height,它的結構很簡單，由value和unit組成。unit:”px"可以看到，通過對象來描述CSS屬性值確實比傳統(tǒng)的字符串更易讀了。要訪問和操作CSSStyleValue還需要借助兩個工具，分別是attributeStyleMap和computedStyleM叩()，前者用于處理內聯(lián)樣式，可以進行讀寫操作，后者用于處理非內聯(lián)樣式(stylesheet),只有讀操作。//獲取stglesheet樣式tairget.coMpmtedStgleMapO.getCfont-size");//{value:Z>Otunit:"px"}//設置內聯(lián)樣式target.attnbuteStyleMapset("fo^t-size,,JCSS.ewv(5));//stylesheet樣式仍然返回20Pxtairget.coMputedStgleMapO.getCfont-size");//{value：30,tm/七"px"}//內聯(lián)樣式已經(jīng)被改變target.attHbuteStg(eMap.get("font-size'1);//{value：5>un.it：當然attributeStyleMap和computedStyleM叩()還有更多可用的方法，例如clear、has、delete,append等，這些方法都為開發(fā)者提供了更便捷和清晰的CSS操作方式。五、CSSProperties&ValuesAPI根據(jù)MDN的定義，CSSProperties&ValuesAPI也是Houdini開放的一部分API,它的作用是讓開發(fā)者顯式地聲明自定義屬性(csscustomproperties),并且定義這些屬性的類型、默認值、初始值和繼承方法。--kv\y-colorred;--Mg-Ma-gi八-left:工OOpx;一?-Sox-shadow:3px&px電優(yōu)20,32,54);在被聲明之后，這些自定義屬性可以通過var。來引用，例如://在V。。力下可聲明全局自定義屬性:root{-ktay-color:red;}#container(background-color:var(--kv\y-color)了解了自定義屬性的基本概念和使用方式后，我們來考慮一個問題，我們能否通過自定義屬性來幫助我們完成一些過渡效果呢？例如，我們希望為一個div容器設置背景色的transition動畫，我們知道CSS是無法直接對background-color?transition過渡動畫的,那我們考慮將transition設置在我們自定義的屬性--my-color上，通過自定義屬性的漸變來間接完成背景的漸變效果，是否能做到呢？根據(jù)剛才的自定義屬性簡介，也許你會嘗試這么做://DOM<divid-"coiataimr">contaimr</div>//Style:root(-wy-color:red;#co八協(xié)認er(transition:--wy-color1$;background-colonvar(--kwy-color)}^co^taiMr.hovev'{-kv\y-color:blue;}這看起來是個符合邏輯的寫法，但實際上由于瀏覽器不知道該如何去解析—my-color這個變量(因為它并沒有明確的類型，只是被當做字符串處理)，所以也無法對它采用transition的效果，因此我們并不能得到一個漸變的背景色動畫。container但是，通過CSSProperties&ValuesAPI提供的CSS.registerPropertyO方法就可以做到，就像這樣:<divid="coiataiMr">co^taiMr</div>//JavaScriptCSS.registerProperty({syntax：'<color>',inherits:false,1);//Style^container(transition:--nay-colorIs；background-color：var(--kwy-color)]#co八tai八｛-kv\y-color:blue;]與上面的不同之處在于，CSS.registerPropertyO顯式定義了--my-color的類型syntax,這個syntax告訴瀏覽器把--my-color當做color去解析，因此當我們設置transition:--my-color1s時，瀏覽器由于提前被告知了該屬性的類型和解析方式，因此能夠正確地為其添加過渡效果，得到的效果如下圖所示。

覽器會給出相應的報錯inherits:告訴瀏覽器這個變量是否繼承它的父元素initialvalue:設置該變量的初始值，并且將該初始值作為fallbackCSS.registerPropertyO接受一個參數(shù)對象，參數(shù)中包含下面幾個選項覽器會給出相應的報錯inherits:告訴瀏覽器這個變量是否繼承它的父元素initialvalue:設置該變量的初始值，并且將該初始值作為fallbackCSS.registerPropertyO接受一個參數(shù)對象，參數(shù)中包含下面幾個選項syntax:告訴瀏覽器如何解析這個變量。它的可選項包含了一些預定義的name:變量的名字，不允許重復聲明或者覆蓋相同名稱的變量，否則瀏在未來，開發(fā)者不僅可以在JavaScript中顯式聲明CSS變量，也可以直接在CSS中直接聲明：container(^property--Fny-color{sg八ax:indents:Fake,i^itialValue：^coffee1j]六、FontMetricsAPI目前FontMetricsAPI還處于早期的草案階段，它的規(guī)范在未來可能會有較大的變更。在當前的specification文件中,說明了FontMetricsAPI將會提供一系列API,允許開發(fā)者干預文字的渲染過程，創(chuàng)建文字或者動態(tài)修改文字的渲染效果等。期待它能在未來被采納和支持，為開發(fā)者提供更多的可能。七、CSSParserAPI目前FontMetricsAPI也處于早期的草案階段，當前的specification文件中說明了它將會提供更多CSS解析器相關的APL用于解析任意形式的CSS描述。八、WorkletsWorklets是輕量級的WebWorkers,它提供了讓開發(fā)者接觸底層渲染機制的API,Worklets的工作線程獨立于主線程之外，適用于做一些高性能的圖形渲染工作。并且它只能被使用在HTTPS協(xié)議中（生產(chǎn)環(huán)境）或通過localhost來啟用（開發(fā)調試）。Worklets不像WebWorkers,我們不能將任何計算操作都放在Worklets中執(zhí)行,Worklets開放了特定的屬性和方法，讓我們能處理圖形渲染相關的操作。我們能使用的Worklet類型暫時有如下幾種：PaintWorklet-PaintAPILayoutWorklet-AnimationAPIAnimationWorklet-LayoutAPIAudioWorklet-AudioAPI（處于草案階段，暫不介紹）Worklets提供了唯一的方法Worklet.addModuleO，這個方法用于向Worklet添加執(zhí)行模塊，具體的使用方法，我們在后續(xù)的PaintAPLLayoutAPkAnimationAPI中介紹。九、PaintAPIPaintAPI允許開發(fā)者通過Canvas2d的方法來繪制元素的背景、邊框、內容等圖形，這在原始的CSS規(guī)則中是無法做到的。PaintAPI需要結合上述提到的PaintWorklet一起使用，簡單來說就是開發(fā)者構建一個PaintWorklet,再將它傳入PaintAPI就可以繪制相應的Canvas圖形。如果你熟悉Canvas,那PaintAPI對你來說也不會陌生。使用PaintAPI的過程簡述如下：.使用registerPaint()方法創(chuàng)建一個PaintWorklet。.將它添加到Worklet模塊中，CSS.paintWorklet.addModule().在CSS中通過paint。方法使用它registerPaint addModule paint其中registerPaint。方法用于創(chuàng)建一個PaintWorklet,在這個方法中開發(fā)者可以利用Canvas2d自定義圖形繪制?？梢酝ㄟ^GoogleChromeLabs給出的一個paintAPI案例checkboardWorklet來直觀看看它的具體使用方法，案例中利用PaintAPI為textarea繪制彩色的網(wǎng)格背景，它的代碼組成很簡單：/*checkboardWorkletjs*/cla$sCheckerboardPaiiater{paiiat(ctx,geoM,properties){constcolors=['red1,'greeia1,constsize=32.;forf/ety=C>;y<geokv\.〃eight/sZze;g++){for(letx=(2;x<geoM.width/size;x++){constcolor=colon[(x+9)%color$.letagth]；ctx.beginP〃協(xié)0；ctx.fillStyle=color)ctx.rectfx*size〉y*size〉size,size);}}}]//;id(|checkerboardregistetrPaint(,checkerboard^CheckerboardPainter);/^iiadex.htkvxl*/<scHpt〉CSS.paintWorkletaddModiAleCpatk/to/checkboardWorkletJ^)//添加cl^eckboardVJoMet至UpaintW。Me僅/sciript〉/*ii^dex.html*/<!doctypehtkn/xtextareax/text^rea><sty/e>textarea(background-iw^age,'.paiiat(checkerboard);//使用pain方法調用ckeckboard繪制背景}</sty(e>通過上述三個步驟，最終生成的textarea背景效果如圖所示:

感興趣的同學可以訪問houdini-samples查看更多官方樣例。十、AnimationAPI在過去，當我們想要對DOM元素執(zhí)行動畫時，通常只有兩個選擇：CSSTransitions和CSSAnimations。這兩者在使用上雖然簡單，也能滿足大部分的動畫需求，但是它們有兩個共同的缺點：?僅僅依賴時間來執(zhí)行動畫(time-driven)：動畫的執(zhí)行僅和時間有關。?無狀態(tài)(stateless)：開發(fā)者無法干預動畫的執(zhí)行過程，獲取不到動畫執(zhí)行的中間狀態(tài)。但是在一些場景下，我們想要開發(fā)一個非時間驅動的動畫或者想要控制動畫的執(zhí)行狀態(tài)，就很難做到。比如視差滾動(ParallaxScrolling),它是根據(jù)滾動的情況來執(zhí)行動畫的，并且每個元素根據(jù)滾動情況作出不一致的動畫效果，下面是個簡單的視差滾動效果示例，在通常情況下要實現(xiàn)更加復雜的視差滾動效果(例如beckett頁面的效果)是比較困難的。AnimationAPI卻可以幫助我們輕松做到。在功能方面，它是CSSTransitions和CSSAnimations的擴展，它允許用戶干預動畫執(zhí)行的過程，例如結合用戶的scroll、hover,click事件來控制動畫執(zhí)行，像辱為動畫增加了進度條，通過進度條控制動畫進程，從而實現(xiàn)一些更加復雜的動畫場景。在性能方面，它依賴于AnimationWorklet,運行在單獨的Worklet線程，因此具有更高的動畫幀率和流暢度，這在低端機型中尤為明顯(當然，通常低端機型中的瀏覽器內核還不支持該特性，這里只是說明AnimationAPI對動畫的視覺體驗優(yōu)化是很友好的)。AnimationAPI的使用和PaintAPI一樣，也同樣遵循Worklet的創(chuàng)建和使用流程,分為三個步驟，簡述如下：.使用registerAnimator()方法創(chuàng)建一個AnimationWorklet。.將它添加到Worklet模塊中，CSS.animationWorklet.addModuleOo.使用newWorkletAnimation(name,KeyframeEffect)倉ij建和執(zhí)行動畫。■ newaddModule workletAnima/* ie/regi$teirAnikv\atoir(,,i^yAnii^ationWorklet,,Jclass{constructor(optioias}{/*構造函數(shù)，動畫示例被創(chuàng)建時調用，可用于做一些初始化*/)//〃八沁afcurre八也effect){/*干預動畫的執(zhí)行*/)});/* */a\A/aitCSS.aiaii^atioiaWorklet.addModuleC'patk/to/i^yAnikvxationWorkletjs");;/^i^dex.kt^v\l*//*傳入kwgAe■〃七'o八Work/et,倉U建Work/etAeFw”力,。八*/newWork/etAn/Fv\at/on(^yAnii^ationWorkletj//動畫名稱八ewKegfiraMeEffect( //動畫力>v\e〃ne(對應于步驟,I1a^ikv\ate(curreiatTikv\eJeffect)1^的effect參數(shù))dociA^v\eiat.que.rySelector(,^target)}[(transform:'trav^late^oy)>(tra八sFokha：上RKis/〃teX(2OOpx)’duration:2.000,//動畫執(zhí)行時長iteratioias：Nu^ber.POSITIVEJNFINITY//動畫執(zhí)行次數(shù)）），docui^ent.tikv\eline//控制動畫執(zhí)行進程的數(shù)H（對應廣步量?111〃八泌ntT7Vv\e,effect）中的currentT/kv\e參數(shù)）“30；可以看到步驟一的animate（currentTime,effect）方法有兩個參數(shù)，就是它們讓開發(fā)者能夠干預動畫執(zhí)行過程。?currentTime：用于控制動畫執(zhí)行的數(shù)值，對應于步驟3例子中傳入的document.timeline參數(shù),通常根據(jù)它的數(shù)值來動態(tài)修改另一個參數(shù)effect,從而影響動畫執(zhí)行。例如我們可以傳入document.timeline或者傳入element.scrollTop作為這個動態(tài)數(shù)值，傳入前者表明我們只是想用時間變化來控制動畫的執(zhí)行，傳入后者表明我們想通過滾動距離來控制動畫執(zhí)行。document.timeline是每個頁面被打開后從0開始遞增的時間數(shù)值，可以簡單理解為頁面被打開的時長，初始時document.timeline===0,隨著時間不斷遞增。?effect：對應于步驟3中傳入的newKeyframeEffectQ,可通過修改它來影響動畫執(zhí)行。一個很常見的做法是，通過修改effect.localTime控制動畫的執(zhí)行,effect.localTime的作用相當于控制動畫播放的進度條，修改它的數(shù)值就相當于拖動動畫播放的進度。如果不修改effect.localTime或者設置effect.localTime=currentTime,那么動畫會隨著document.timeline正常勻速執(zhí)行，線性動畫。但是如果將effect.localTime設置為某個固定值，例如effect.localTime=1000ms,那么動畫將會定格在1000ms時對應的幀，不會繼續(xù)執(zhí)行。為了更好理解effect.localTime,可以來看看effect.localTime和動畫執(zhí)行之間的關系,假設我們創(chuàng)建了一個2000ms時長的動畫，并且動畫沒有設置delay時間。effect.localTime(2000ms時的動畫幀0ms第一幀.動畫開始執(zhí)行1000ms中間幀-動畫執(zhí)行到一半2000ms末尾帔便一快-動畫臉S束/動畫進入下Y第T53000ms中間幀-方亙執(zhí)行到一半4000ms末尾幀/第~帔-動畫執(zhí)行結束/動畫進入下一個第一帔??,???通過上面的描述，大家應該get到如何做一個簡單的滾動驅動(scroll-driven)的動畫了，實際上有個專門用于生成滾動動畫的類：ScrollTimeline,它的用法也很簡單：/**/newWork/etA八加力。八(‘MgWork/etAeVvuitiok,newK.eyfra^eEffect(docuiw.ein.t.ciuerySelector(l：^target'),{tram.sforkv\:'translateX(O)1h(trav\sforw\-.'tra^slateX(5OOpxy)L[duration.:2000,Fill:'both'})，mwScrollTiiMeliM(1scrollsource:docuw\e,v\t.(]ue.rijSe,lector{'.scroll-area'),//監(jiān)聽的滾動元素orientation:"vertical",//監(jiān)聽的滾動方向"hor出或"vertica/"tiMeRange：2.000//根據(jù)scro”的高度，傳入O-tiiweRage之間的數(shù)值，當滾動到頂端時,傳入O,當滾動到底端時，傳入2000!)加陽0；

scrollmescrollmescrollmescrollmescrollmescrollmescrollmescrollmescrollme uscrollme ,scrollme這樣一來，通過簡單的幾行代碼，一個簡單的滾動驅動的動畫就做好了，它比任何CSSAnimations或CSSTransitions都要順暢。接下來再看看最后一個同樣有潛力的API：**LayoutAPI**?H—、LayoutAPILayoutAPI允許用戶自定義新的布局規(guī)則，創(chuàng)造類似flex、grid之外的布局。

但創(chuàng)建一個完備的布局規(guī)則并不簡單，官方的flex、grid布局是充分考慮了各種邊界情況，才能確保使用時不會出錯。同時LayoutAPI使用起來也比其它API更為復雜，受限于篇幅，本文僅簡單展示相關的API和使用方式，具體細節(jié)可參考官方描述。LayoutAPI和其它兩個API相似，使用步驟同樣分為三個步驟，簡述如下：通過registerLayout。創(chuàng)建一個LayoutWorkle