「JavaScript Webアニメーションデザイン」読書メモ_html/css_WEB-ITnose

ここ 2 日間で「JavaScript Web アニメーション デザイン」を読み始めました。要約は次のとおりです。以前このライブラリを使用したことがありますが、非常に便利でスムーズです。ただし、第 4 章のアニメーション ワークフローと第 7 章のアニメーション パフォーマンスを除いて、すべて Velocity ライブラリを紹介しています。おそらく、「Velocity アニメーション デザイン」と呼ぶのが適切でしょう。

ここに記録しておき、久しぶりに「Webアニメ」の話題をまとめていきます。

第 1 章 JavaScript アニメーションと CSS アニメーション

JS アニメーションのパフォーマンスは問題ではありません

• ホバー状態に適した CSS アニメーション
• JS アニメーションは CSS アニメーションと同じくらい高速です
• JS と jQuery を混同しないでください
• 速度。js

JSアニメーションのユニークな機能

• ページスクロール: ページが特定の要素までスクロールします
• アニメーション反転: アニメーション形式の要素が前のアニメーションが開始される前の値に戻ります
• 物理的なモーション効果: 摩擦

第 2 章 Velocity.js を使用してアニメーションを実装する

アニメーションの種類:

• CSS アニメーション: トランジション / アニメーション
• JS アニメーション: GSAP、Velocity.js
• キャンバス アニメーション: Fabric.js
• SVGアニメーション: Snap.js、SVG.js
• WebGLアニメーション: Three.js

詳細はこちら

イージング方程式

第3章 モーションデザイン理論

この章は理論の話ですよね。間違った本を購入しましたか？

第 4 章 アニメーション ワークフロー

CSS アニメーション ワークフロー

UI アニメーション ワークフローをより適切に管理するために、開発者は JS を放棄して CSS を使用することがあります。ただし、アニメーションの複雑さが中程度以上のレベルに達すると、CSS アニメーションを使用すると、JS を使用する場合よりもワークフローが大幅に悪化することがよくあります。

CSS の問題

CSS は、複雑なアニメーション シーケンスを実装するためにキー フレームを使用します:

@keyframes myAnimation{    0%{opacity:0;transform:scale(0,0)}    25%{opacity:1;transform:scale(1,1)}    50%{transform:translate(100px,0)}    100%{transform:translate(100px,100px)}}#box{animation:myAnimation 2.75s}

不透明度のアニメーションの継続時間を 1 秒増やし、他の属性のアニメーションの継続時間を変更しない場合は、パーセンテージを調整できるように再計算する必要があります。どこでも属性値は 1 秒ずつ増分された期間と一致します。

いつ CSS を使用するか

ユーザーが要素上にマウスを置くと簡単なスタイルの変更がトリガーされ、トランジションを使用します

コーディングのヒント: スタイルをロジックから分離する

一般的なアプローチ

jQuery には、主に 2 種類のアニメーションがあります メソッド:

• スタイルを切り替えるには addClass() と RemoveClass() を使用します
• animate() を使用します: $ele.animate({opacity:1,top:50},1000)

最初の方法の方が推奨されます。スタイルを変えたらCSSを変え、ロジックを変えたらJSを変える、というように明確に整理されています。

最適化の実践

JS オブジェクトを定義します。その内容は、設定する CSS プロパティです。次に、それを Velocity または jQuery に渡します。

//style.jsvar fadeIn = {    p: {        opacity: 1,        top: "50px"     },    o: {        duration: 1000,        easing: "linear"        }}//main.js$element.velocity(fadeIn.p,fadeIn.o);

このように style.js を使用すると、アニメーション オプションを定義するというユニークな機能が得られます。

コーディングのヒント: アニメーションの並べ替えを整理する

Velocity には、UI アニメーションのワークフローを最適化できる UI パックと呼ばれるプラグインがあります。

$element    .velocity({translateX:100})    .velocity({translateY;100})

コーディング スキル: パッケージング エフェクト

$.Velocity.RegisterEffect("growIn",{    defaultDuration: duration,    calls: [        [ {opacity:1,scale:1},0.4 ],        [ {boxShadowBlur:50},0.6 ]    ]})$element.velocity("growIn")

第 5 章 テキスト アニメーション

テキスト アニメーションは Web ページではほとんど使用されません。テキスト アニメーションの退屈な側面を回避し、効率的なワークフローを提供するのに役立つツールをいくつか紹介します。

Blast.js

Blast はページ上のテキストを分割できます

Velocity.js および Velocity-ui と組み合わせる

第 6 章 SVG 入門

Snap.svg

SVG アニメーション、本来は画像を使用する必要があります次の用途に使用します。

• ユーザーがマウスをホバーまたはクリックしたときにトリガーされる複雑なアニメーション シーケンスを持つボタン
• 古い GIF を置き換えるために使用できるユニークな読み込みステータス グラフィック
• 会社のロゴ、ページ 読み込み時に、ロゴは一緒にアニメーション化できます

第 7 章 アニメーションのパフォーマンス

レイアウト バンプ

要素の CSS プロパティの設定 (set) とクエリ (get) は、パフォーマンスのオーバーヘッドを引き起こす 2 つのコア ブラウザです プロセッサ プロセス (およびグラフィックス レンダリング) 。

要素に新しい属性を設定した後、ブラウザは変更によるその後の影響を計算する必要があります。たとえば、要素の幅を変更すると連鎖反応が発生し、その親要素、兄弟要素、子要素の幅もそれぞれの CSS プロパティに従って調整されます。

スタイルの設定と取得を交互に行うことによって引き起こされる UI のパフォーマンスの低下は、レイアウト スラッシング と呼ばれます。

ブラウザはページ レイアウトの再計算のために高度に最適化されていますが、レイアウトの乱れにより、最適化の効果は大幅に減少します。

たとえば、ブラウザーは最初のフェッチ後のページの状態をキャッシュし、後続の各フェッチ操作でその状態を参照できるため、ブラウザーはすでに同時フェッチ操作を 1 つのスムーズな操作に最適化できます。ただし、get と set を繰り返し実行すると、設定を変更するとキャッシュが継続的に無効になるため、ブラウザーに多くの重労働を要求することになります。

布局颠簸在动画循环中出现的话，对性能更是雪上加霜，最后就是让动画变得卡顿。

解决办法

把DOM的设置和获取的操作分别集合在一起批量操作

//糟糕的做法var currentTop = $('element').css('top'); //get$('element').style.top = currentTop + 1; //setvar currentLeft = $('element').css('left'); //get$('element').style.left = currentLeft + 1; //set

如果把查询放在一起，把设置放在一起，那么浏览器就可以打包相应操作，减少代码造成的布局颠簸的影响：

var currentTop = $('element').css('top'); //getvar currentLeft = $('element').css('left'); //get$('element').style.top = currentTop + 1; //set$('element').style.left = currentLeft + 1; //set

比如，点击按钮切换 none 和 block ，可能会先要检查侧边菜单的 display 属性是设置成 none 还是 block ，然后再相应地进行值得替换。检查是一次『获取』，之后无论设置成什么是一次『设置』。

想要优化的话，可以在设置一个变量，每当按钮点击的时候，这个变量跟着更新，然后在切换可见性之前，查询这个变量就可以得知菜单的当前状态了。『获取』的过程就可以省掉了。

避免影响临近的元素

有很多CSS属性，一经改变，就会造成临近元素尺寸或位置的调整，其中包括 top、right、bottom、left，margin、padding，border，以及width、height

解决办法

尽可能设置CSS的transform属性（translate、scale、rotate）的动画。transform属性的特殊之处在于它们将目标元素提升至一个单独的层，这个层可以独立于页面其他内容单独渲染（通过GPU加速提升性能），因此相邻的元素不会受到影响。

优先考虑 opacity胜于 color

opacity是另一个可以让GPU渲染加速的CSS属性，因为它不影响元素的位置。

比如，当用户鼠标悬停在元素上时color属性会改变，那么请考虑使用opacity动画来替代。如果最终效果和设置颜色的动画效果差不多，那么留用设置opacity动画吧。

请查看 CSSTrigger.com 上的内容，了解每个CSS属性如何影响浏览器性能。

不用持续响应scroll和resize事件

浏览器的scroll和resize是两个触发频率非常频繁的事件类型：每当用户调整或滚动浏览器窗口时，浏览器都会在每秒内触发多次与这些事件相关的回调函数。窗口scroll或resize的时候会多次触发事件，如果其中有布局颠簸，那么会给浏览器带来巨大负担。

解决办法

定义一个时间间隔，在此事件间隔期间，事件回调仅会被调用一次。这就是所谓的『反跳』。

例如定义了一个250毫秒的反跳间隔，而用户滚动页面时间为1000毫秒，这时候，事件回调仅仅会触发四次。

• undersocre的 debounce 函数就是这个作用

• flexible中是用的定时器：

  win.addEventListener('resize', function() {    clearTimeout(tid);    tid = setTimeout(refreshRem, 300);}, false);

  减少图片渲染

  图片的形式：

  2. gradient
  3. box-shadow / text-shadow

  视频、图片是多媒体元素类型，浏览器必须要加倍渲染才行。多媒体元素中包含上千万的像素数据，要改变它们的大小、尺寸或重新合成对浏览器计算开销很大。

  另外，滚动页面几乎可以视为设置整个页面的动画（可以把滚动页面视为设置页面的top属性的动画），在移动设备中，多媒体元素会造成滚动性能的巨幅下降。

  解决办法

  尽可能少地加载图片