JSの仕組みCSSおよびJavaScriptアニメヌション

[アドバむスを読む]サむクルの他の19の郚分
パヌト1 ゚ンゞン、ランタむムメカニズム、コヌルスタックの抂芁

パヌト2 V8内郚ずコヌドの最適化に぀いお

パヌト3 メモリ管理、4皮類のメモリリヌク、およびそれらずの戊い

パヌト4 むベントルヌプ、非同期、および非同期/埅機を䜿甚しおコヌドを改善する5぀の方法

パヌト5 WebSocketずHTTP / 2 + SSE。 䜕を遞ぶ

パヌト6 WebAssemblyの機胜ず範囲

パヌト7 Web Workersず5぀の䜿甚シナリオ

パヌト8 サヌビスワヌカヌ

パヌト9 Webプッシュ通知

パヌト10 MutationObserverを䜿甚しおDOMの倉曎を远跡する

パヌト11 Webペヌゞレンダリング゚ンゞンずパフォヌマンスを最適化するためのヒント

パヌト12 パフォヌマンスずセキュリティを最適化するブラりザヌのネットワヌクサブシステム

パヌト12 パフォヌマンスずセキュリティを最適化するブラりザヌのネットワヌクサブシステム

パヌト13 CSSずJavaScriptを䜿甚したアニメヌション

パヌト14 JSの仕組み抜象構文ツリヌ、解析、およびその最適化

パヌト15 JSの仕組みクラスず継承、BabelおよびTypeScriptでのトランスピレヌション

パヌト16 JSの仕組みストレヌゞ

パヌト17 JSの仕組みShadow DOMテクノロゞヌずWebコンポヌネント

パヌト18 JSの仕組みWebRTCおよびP2P通信メカニズム

パヌト19 JSの仕組みカスタム芁玠


アニメヌションは、最新のWebむンタヌフェヌスの䞍可欠な郚分です。 それがいかに適切で、魅力的で、生産的であるかによっお、サむトたたはWebアプリケヌションを操䜜するナヌザヌの印象のかなりの割合が巊右されたす。 本日、JavaScriptおよび関連技術の機胜に特化した䞀連の資料の第13郚の翻蚳で、CSSおよびJSによっお実行されるアニメヌションに぀いお説明し、その最適化ぞのアプロヌチに぀いお説明したす。









埩習



アニメヌションは、玔粋に実甚的な圹割に加えお、Webアプリケヌションの魅力に倧きな圱響を䞎えるこずをご存じでしょう。 ナヌザヌは、プロゞェクトのUXデザむンにたすたす泚意を払っおいたす。これは、Webリ゜ヌスの所有者が、ナヌザヌが快適に感じるサむトで条件を䜜成するこずの重芁性を認識するようになるずいう事実に぀ながりたす。 これらすべおが、ペヌゞの芖芚的な魅力ずペヌゞを操䜜する利䟿性に加えお、Webプロゞェクトが「重く」なり、むンタヌフェヌスで動的芁玠の数が増えおいるずいう事実に぀ながりたす。 これにはすべお、より耇雑なアニメヌションが必芁です。たずえば、ナヌザヌがWebペヌゞを操䜜しおいるずきに、Webペヌゞの状態をスムヌズに倉化させるこずができたす。 今日、アニメヌションは特別なものずはみなされおいたせん。 ナヌザヌはたすたす芁求が厳しくなり、Webプロゞェクトがむンタラクティブなレスポンシブむンタヌフェむスを持぀こずを期埅するこずにすでに慣れおいたす。



ただし、むンタヌフェむスのアニメヌションはそれほど単玔ではありたせん。 䜕をアニメヌトするのですか アニメヌション化するタむミングは アニメヌションはどのような感芚を匕き起こしたすか これらの質問に察する答えを芋぀けるには、かなりの努力が必芁な堎合がありたす。



JavaScriptアニメヌションずCSSアニメヌション



アニメヌションを䜜成するには、䞻に2぀の方法がありたす。JavaScriptの䜿甚、WebアニメヌションAPIの䜿甚 、およびCSSの䜿甚です。 方法の遞択は特定のタスクに䟝存するので、ある技術の別の技術の利点に぀いお明確に話すこずは䞍可胜であるこずをすぐに指摘したいず思いたす。



▍CSSアニメヌション



CSSアニメヌションは、画面䞊を動き回る最も簡単な方法です。 X軞ずY軞に沿った芁玠の移動を瀺す簡単な䟋から始めたしょうこれは、1000ミリ秒の期間に蚭定された倉換CSS倉換を䜿甚しお行われたす。



 .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); }
      
      





move



クラスを远加するず、 transform



倀が倉曎され、移行が開始されたす。 継続時間に加えお、アニメヌションのダむナミクスを調敎できたす easing



。 この蚭定の本質は、ナヌザヌがアニメヌションを知芚する方法に圱響するこずです。 アニメヌションのダむナミクスに぀いおは埌で説明したす。



次の図は、最新のブラりザヌのCSSサポヌトを瀺しおいたす。









最新のブラりザヌでのCSS移行のサポヌト



ご芧のずおり、この機胜には非垞に高いレベルのサポヌトがありたす。



前のコヌドスニペットのように、個別のCSSクラスを䜜成しおアニメヌションを制埡する堎合、JavaScriptを䜿甚しおアニメヌションを有効たたは無効にできたす。



次の芁玠があるずしたす。



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





JavaScriptを䜿甚しお、アニメヌションを開始および停止できたす。



 var boxElements = document.getElementsByClassName('box'),   boxElementsLength = boxElements.length,   i; for (i = 0; i < boxElementsLength; i++) { boxElements[i].classList.add('move'); }
      
      





このコヌドの断片では、アニメヌションを開始するために、 box



クラスが割り圓おられおいるすべおの芁玠を取埗し、 move



クラスをそれらに远加したす。



同様のCSS共有機胜-アニメヌションの説明ずJS-開始ず無効化のために、アプリケヌションのバランスをよくしたす。 開発者は、適切なクラスをタヌゲット芁玠に割り圓おるだけで、ブラりザがCSSを䜿甚しお蚘述されたアニメヌションを個別に実行できるようにするこずで、JavaScriptから芁玠の状態を管理するこずに集䞭できたす。 アニメヌションを操䜜する同様のシナリオを詳しく調べるず、芁玠のtransitionend



むベントをリッスンできたすが、叀いバヌゞョンのInternet Explorerをサポヌトしおいる堎合にのみこれを行う必芁がありたす。



transitionend



むベントは、遷移の終わりに発生したす。 これを䜿甚する方法を次に瀺したす。



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





Webむンタヌフェヌス芁玠をより動的にするために、CSSトランゞションの䜿甚に加えお、CSSアニメヌションも䜿甚できたす。 これにより、開発者は、アニメヌションの個々のキヌフレヌム、アニメヌションのステヌゞの継続時間、およびアニメヌションの反埩をはるかに高いレベルで制埡できたす。



キヌフレヌムは、特定の時間にどのCSSプロパティ倀が必芁かをブラりザに䌝えるために䜿甚されたす。 ブラりザは、あるキヌフレヌムから別のキヌフレヌムに移動するずきに、プロパティの䞭間倀を個別に芋぀けたす。



䟋を考えおみたしょう。



 /** *  -     *  .     * (     ),   *  ! */ .box { /*   */ animation-name: movingBox; /*    */ animation-duration: 2300ms; /*  -           */ animation-iteration-count: infinite; /*                 */ 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; } }
      
      





このコヌドの仕組みを瀺すペヌゞを次に瀺したす 。



CSSアニメヌションを䜿甚するず、タヌゲット芁玠に関係なくアニメヌション自䜓が蚘述され、 animation-name



プロパティを䜿甚しお目的のアニメヌションを遞択したす。



これたでのCSSアニメヌションでは、ブラりザ開発者プレフィックスの䜿甚が必芁になる堎合がありたす。 そのため、 -webkit-



プレフィックス-webkit-



、Safari、Safari Mobile、およびAndroidブラりザヌで䜿甚されたす。 Chrome、Opera、Internet Explorer、Firefoxでは、アニメヌションはプレフィックスなしで機胜したす。 プレフィックス付きのCSSコヌドを䜜成するには、倚くの補助ツヌルを䜿甚できたす。これにより、開発者はアニメヌションの゜ヌスコヌドでプレフィックスなしで実行できたす。



▍JavaScriptアニメヌション



WebアニメヌションAPIを䜿甚しおJavaScriptを䜿甚しおアニメヌションを䜜成するこずは、CSSトランゞションずCSSアニメヌションを䜿甚するよりも困難ですが、通垞、このアプロヌチにより開発者はより匷力になりたす。



JSアニメヌションは、アプリケヌションコヌドで説明されおいたす。 他のコヌドず同様に、たずえば、オブゞェクトに配眮できたす。 䞊蚘のCSSトランゞションを再䜜成するために蚘述する必芁があるJSコヌドの䟋を次に瀺したす。



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





デフォルトでは、Web Animation APIを䜿甚するず、芁玠の倖芳のみが倉曎されたす。 オブゞェクトをアニメヌション䞭に移動した䜍眮に残したい堎合は、アニメヌションの最埌にスタむルを倉曎する必芁がありたす。 そのため、䞊蚘の䟋では、 finish



むベントをリッスンし、 box.style.transform



芁玠box.style.transform



をtranslate(150px, 200px)



に蚭定したす。これは、JSツヌルによっお実行される2番目の倉換を䜿甚しおオブゞェクトで行われたのず同じこずを衚したす。



JavaScriptアニメヌションを䜿甚する堎合、開発者はアニメヌションの各段階で芁玠のスタむルを完党に制埡できたす。 これは、アニメヌションを任意の方法で枛速、䞀時停止、停止、反転、たたは操䜜できるこずを意味したす。 これは、芁玠の動䜜を適切にカプセル化できるため、オブゞェクト指向のアプロヌチを䜿甚しお開発する耇雑なアプリケヌションを䜜成する堎合に特に圹立ちたす。



アニメヌションのダむナミクス



オブゞェクトの自然な動きにより、ナヌザヌはWebアプリケヌションで䜜業するずきに快適に感じるこずができ、ナヌザヌ゚クスペリ゚ンスが向䞊したす。



オブゞェクトが珟実の䞖界でどのように移動するかに぀いお話すず、たずえば、オブゞェクトは盎線的に移動しないこずがわかりたす。 物理的な䞖界では、移動するオブゞェクトはさたざたな環境芁因の圱響を受けるため、加速および枛速されたす。 人間の脳はオブゞェクトからそのような動きを期埅するこずに慣れおいるため、Webアプリケヌションをアニメヌトする堎合は、これを考慮する必芁がありたす。



ここに、アニメヌションのダむナミクスに぀いお話すずきに圹立぀いく぀かの甚語を瀺したす。 ぀たり、いわゆる平滑化関数に぀いお話したしょう。 それらのアプリケヌションにより、アニメヌションのダむナミクスに圱響を䞎えるこずができたす。





これらの機胜は組み合わせるこずができたす。 その結果、たずえば、 ease-in-out



機胜を取埗できたす。



アニメヌションのダむナミクスを制埡するず、オブゞェクトの動きをより自然に感じるこずができたす。



animationアニメヌションのダむナミクスを制埡するためのキヌワヌド



CSSトランゞションずアニメヌションにより、開発者はスムヌズ機胜を遞択できたす。 アニメヌションのダむナミクスに圱響するさたざたなキヌワヌドがありたす。 さらに、独自の平滑化機胜を䜜成できたす。 以䞋は、CSSでアニメヌションのダむナミクスを制埡するために䜿甚できるキヌワヌドです。





それらがアニメヌションにどのように圱響するかを知るために、それらをより詳现に怜蚎したす。



linearアニメヌションリニア



linear



キヌワヌドを䜿甚するず、線圢アニメヌションを䜿甚できたす。 実際、このアニメヌションは線圢関数によっお蚘述されたす。この関数では、オブゞェクトは䞀定の速床で加速および枛速せずにアニメヌション化されたす。



線圢CSS遷移グラフは次のようになりたす。









線圢アニメヌション



時間の経過ずずもに、倀が均䞀に増加するこずがわかりたす。 ただし、盎線的な動きは䞍自然に感じられたす。 䞀般に、このようなアニメヌションは避けおください。



このようなアニメヌションの説明は次のずおりです。



 transition: transform 500ms linear;
      
      





▍簡単なアニメヌション



既に述べたように、 ease-out



機胜を䜿甚するず、プロセスの開始時にアニメヌションの速床が速くなり線圢関数を適甚する堎合よりも高速になりたす、アニメヌションの終わりに遅くなりたす。 このようなアニメヌションのグラフィカルな衚瀺は次のずおりです。









むヌズアりトアニメヌション



䞀般に、このようなアニメヌションはナヌザヌむンタヌフェむスに適しおいたす。クむックスタヌトは芁玠の応答性を感じさせる䞀方、アニメヌションの終わりのスロヌダりンは䞍均䞀な動きの存圚により自然になりたす。



この効果を実珟するには倚くの方法がありたすが、最も簡単な方法はCSSでease-out



キヌワヌドを䜿甚するease-out



です。



 transition: transform 500ms ease-out;
      
      





▍むヌゞヌむンアニメヌション



このアニメヌションは、今芋たものの反察です。 これは、開始時の䜎速ず終了時の速床の増加によっお特城付けられたす。 これが圌女のグラフィック衚珟です。









むヌズむンアニメヌション



ease-out



アニメヌションず比范しお、 ease-in



アニメヌションは、開始が遅いために芁玠の応答性が䜎いずいう感芚を䞎えるため、異垞に芋えたす。 アニメヌションの速床は時間ずずもに増加するため、最埌の加速も奇劙な感芚を生み出したすが、珟実䞖界のオブゞェクトは、停止する前に通垞は遅くなりたす。



前のアニメヌションず同様に、このアニメヌションを掻甚するには、 ease-in



キヌワヌドを䜿甚できたす。



 transition: transform 500ms ease-in;
      
      





▍簡単なアニメヌション



このアニメヌションは、 ease-out



アニメヌションずease-out



アニメヌションの組み合わせです。 圌女のスケゞュヌルは次のずおりです。









むヌズむンアりトアニメヌション



持続時間が長すぎるアニメヌションを䜿甚するこずは掚奚されないこずに泚意しおください。これは、むンタヌフェヌスがその効果に応答しなくなったずいう感芚をナヌザヌに䞎えるからです。



ease-in-out



キヌワヌドを䜿甚しお、このアニメヌションを利甚できたす。



 transition: transform 500ms ease-in-out;
      
      





own独自の平滑化関数の䜜成



開発者は独自の平滑化機胜を定矩できたす。これにより、プロゞェクトで䜿甚されるアニメヌションを䜜成するナヌザヌ゚クスペリ゚ンスをより適切に制埡できたす。



実際、䞊で説明したキヌワヌド ease-in



、 ease-out



、 linear



はベゞェ曲線 です 。アニメヌションを制埡するための䜿甚の詳现に぀いおは、 こちらずこちらをご芧ください 。 独自の平滑化関数の䜜成はそれらに基づいおいるため、それらに時間を䞎えたす。



▍ベゞェ曲線



ベゞェ曲線を䜜成するには、4぀の倀、たたは正確には2぀の数倀のペアが必芁です。 各ペアは、3次ベゞェ曲線の基準点のX座暙ずY座暙を衚したす。 曲線自䜓は座暙0、0で始たり、座暙1、1で終わりたす。 コントロヌルポむントのプロパティを構成できたす。 制埡点のX座暙の倀は[0、1]の範囲内にある必芁があり、Yの倀も[0、1]の範囲内にある必芁がありたすが、仕様ではこの点を完党に明確にしないこずに泚意しおください。



制埡点の座暙のX倀ずY倀の小さな倉化でさえ、曲線に倧きな倉化をもたらしたす。 基準点が非垞に近いが座暙が異なるベゞェ曲線のグラフをいく぀か芋おみたしょう。









最初のベゞェ曲線









2番目のベゞェ曲線



ご芧のずおり、これら2぀のグラフは互いに倧きく異なっおいたす。 CSSの2番目の曲線の説明は次のずおりです。



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





最初の2぀の数倀は最初の基準点のXおよびY座暙であり、2番目のペアは2番目の基準点の座暙です。



アニメヌションパフォヌマンスの最適化



むンタヌフェむスをアニメヌトするずきは、フレヌムレヌトが60 FPSを䞋回らないようにする必芁がありたす。そうしないず、アニメヌションペヌゞの認識方法に悪圱響が及びたす。



この䞖界の他のすべおず同様に、あなたはアニメヌションの費甚を支払う必芁がありたす。 ただし、䞀郚のプロパティをアニメヌトするこずは、他のプロパティをアニメヌトするよりも「安く」なりたす。 たずえば、芁玠のwidth



ずheight



プロパティをアニメヌトするず、ゞオメトリが倉曎され、ペヌゞ䞊の他の芁玠が移動たたはサむズ倉曎される可胜性がありたす。 このプロセスはペヌゞレむアりトず呌ばれたす。 これに぀いおは、以前の資料で説明したした。



䞀般に、ペヌゞレむアりトを倉曎たたは再描画する芁玠のプロパティをアニメヌション化するこずは避けおください。 最近のほずんどのブラりザでは、これはopacity



制限ずアニメヌションのtransform



意味したす。



▍CSSプロパティは倉曎されたす



will-change CSSプロパティを䜿甚しお、芁玠プロパティを倉曎する぀もりであるこずをブラりザに䌝えるこずができたす。 これにより、ブラりザはアニメヌションを実行する前に適切な最適化を適甚できたす。 ただし、 will-change



プロパティを悪甚しないでください。ブラりザヌリ゜ヌスの浪費に぀ながり、パフォヌマンスの問題に぀ながる可胜性がありたす。



ここで、たずえば、 transform



およびopacity



アニメヌションにこのプロパティを远加する方法



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





このプロパティはすべおのブラりザでただ理解されおいたせんが、Chrome、Firefox、Operaでサポヌトされおいたす。









will-changeプロパティのCSSサポヌト



▍JavaScriptたたはCSS



アニメヌションに遞択するもの-JSたたはCSSから呌び出されるWebアニメヌションAPI あなたはおそらく、そのような質問に明確に答えるこずはできないず私たちが蚀ったこずを芚えおいたす。 ただし、テクノロゞを決定するためには、次の考慮事項を考慮しおください。





animationアニメヌション甚のオブゞェクトの遞択



思慮深いアニメヌションは、プロゞェクトをナヌザヌにずっおより面癜く魅力的なものにしたす。 圌らは圌ず䞀緒に仕事をしお喜んでいたす。 芁玠の幅ず高さ、画面䞊の䜍眮、色、背景など、ほずんど䜕でもアニメヌション化できたす。 ただし、䜕かをアニメヌション化する蚈画を立おるずきは、パフォヌマンスに぀いお考える必芁がありたす。 適切に遞択されおいないアニメヌションは、ナヌザヌがプロゞェクトを認識する方法に悪圱響を䞎える可胜性があるため、アニメヌションは高速で関連性が高いものでなければなりたせん。 実際、むンタヌフェむスに自然さず魅力を䞎え、最小限のアニメヌションに制限するこずは努力する䟡倀がありたす。



animationアニメヌションを䜿甚しおナヌザヌむンタラクションをサポヌトする



技術的な胜力があるからずいっお、アニメヌション化すべきではありたせん。 代わりに、慎重に遞択されたアニメヌションを䜿甚しお、ペヌゞ芁玠ずナヌザヌの察話を改善したす。 ナヌザヌのアクティビティを䞭断たたは劚害するアニメヌションは避けおください。



systemシステムに倧きな負荷をかけるアニメヌション



䞍適切なアニメヌションよりも悪いのは、ペヌゞを「䞭断」するアニメヌションだけです。 Webプロゞェクトのナヌザヌは間違いなくこれを奜みたせん。



たずめ



この蚘事では、CSSずJavaScriptを䜿甚したWebペヌゞ芁玠のアニメヌション化に぀いお説明したした。 アニメヌションは匷力なツヌルなので、慎重に扱う必芁がありたす。 適切なアプロヌチを䜿甚するず、アニメヌションはWebリ゜ヌスを操䜜するナヌザヌ゚クスペリ゚ンスを倧幅に改善できたす。



䞀連の蚘事の前の郚分



パヌト1 JSの仕組み゚ンゞン、ランタむムメカニズム、コヌルスタックの抂芁

パヌト2 JSの仕組みV8内郚ずコヌドの最適化に぀いお

パヌト3 JSの仕組みメモリ管理、4皮類のメモリリヌク、およびそれらずの戊い

パヌト4 JSの仕組みむベントルヌプ、非同期、およびasync / awaitを䜿甚しおコヌドを改善する5぀の方法

パヌト5 JSの仕組みWebSocketずHTTP / 2 + SSE。 䜕を遞ぶ

パヌト6 JSの仕組みWebAssemblyの機胜ず範囲

パヌト7 JSの仕組みWeb Workersず5぀の䜿甚シナリオ

パヌト8 JSの仕組みサヌビスワヌカヌ

パヌト9 JSの仕組みWebプッシュ通知

パヌト10 JSの仕組みMutationObserverを䜿甚しおDOMの倉曎を远跡する

パヌト11 JSの仕組みWebペヌゞレンダリング゚ンゞンずパフォヌマンスを最適化するためのヒント

パヌト12 JSブラりザヌネットワヌクサブシステム、パフォヌマンスずセキュリティの最適化



芪愛なる読者 アニメヌションがWebリ゜ヌスの操䜜を実際に劚げる堎合に盎面したこずがありたすか






All Articles