JavaScriptを使用してアニメーションをスケーリングする際の不安定なテキスト

Question

スケーリングを使用してテキストを含むHTML要素のサイズを変更すると、JavaScriptライブラリでアニメーション化されている場合のみ、

ジッタは、アニメーションが遅く、テキストが小さい場合に最もよく見えます。私はそれを引き起こす原因やそれを取り除く方法を理解できないようです。

このジッタは、CSSアニメーションや新しいJavaScript WebアニメーションAPIを使用したアニメーションでは発生しません。また、一部のブラウザでは発生していないようです。 （私のiPhoneで）

要素のスケーリングをアニメーション化するさまざまな方法とその表示方法を簡単に比較するために、便宜のためにCodePenを作成しました。それをチェックアウトする前に、これらの点に注意してください。

1. すべてのアニメーションは、アニメーションのためのCSSプロパティtransform: scale(num);のいくつかのフォームまたは模倣を使用して、彼らはより簡単に比較できるように、同じ緩和と持続時間を持っています。
2. ジッタがmacOSにも現れますが、高解像度のために網膜スクリーンを持つMacではほとんど見ることができません。
3. 私が得た結果は、Google Chrome 59のWindows 10マシンでのアニメーションの外観を反映していますが、私にとってはMicrosoft Edgeも同じ結果を示しました。

私の質問は次のとおりです。JavaScriptでスケールプロパティをアニメーション化するときに、テキストがジッタを起こしたりぼやけるのを防ぐにはどうすればよいですか？ JavaScriptスケールのアニメーションのテキストを、CSSを使用した場合と同じように滑らかに表示するにはどうすればよいですか？

なぜ私はCSSを使用しないのか疑問に思うかもしれません。その答えは、限られたCSSアニメーションがいかに難しいかに悩まされているからです。単純なベジエ曲線（Robert Pennerのバウンスやエラスティック関数など）の機能を超えて高度なイージング関数を使用し、マウスが要素に入り、要素を出るときには、さまざまなイージングをマウスで使用したいと考えています。これは完全に私自身の意見ですが、これまでに私が見つけた痛みのない唯一の方法はJavaScriptライブラリです。イージングに関連する機能に加えて、ほとんどのものは、アニメーション化をもっと楽にする他の多くの機能を提供するようです。あなたが私が必要とするすべての機能を得るためのよりよい方法を知っていれば教えてください！

Answer 1

あなたが遭遇しているのは、ブラウザのレイヤ化戦略の違いです。すべての例がFirefoxで滑らかに見えることがわかります。これは、Firefoxがレイヤーを使用してアニメーション化できるプロパティをスクリプトが変更していることを検出し、レイヤーをレスポンスで作成するためです。

宣言的なアニメーション（CSSアニメーション、CSSトランジション、WebアニメーションAPIアニメーション、場合によってはSVG SMILアニメーションも必要です）ではすべてのブラウザでレイヤーが作成されますが、すべてのブラウザでJavascriptアニメーションに使用されるわけではありません。したがって、これらのブラウザでは、ブラウザをトリックしてレイヤーを作成する必要があります（または、ブラウザにバグを記録することもできます）。

最近まで、will-change: transformを使用して、ブラウザにレイヤーを作成させることを推奨しました。しかし、Chromeはレンダリング戦略を変更しました。現在、will-change: transformはChromeでスケールアニメーションで非常にぼやけた結果を生成する可能性があります。 Chromeを最初に高解像度でレイヤ化し、要素を縮小してからアニメーション化することに成功した人もいます。これは本当に残念ですが、これを解決するためにChromeに申し立てることをお勧めします。

また、「with HA」を使用した例は正確ではありません。 （1）のCSSアニメーションも、私が知っているすべてのブラウザでハードウェアアクセラレーションを使用します。パースペクティブを追加する必要はありません。残念ながら、この領域には多くの誤解を招く情報があります。 GPUですが、それは単に真実ではありません）。自己昇進の危険にさらされると、an article I wrote on this last yearが役に立つかもしれません。