CSS3 アニメーション トゥイーン anime_html/css_WEB-ITnose

トゥイーンアニメーションとはアニメーションの基本的な形式の一つで、アニメーションの主要な状態、つまりキーフレームを人工的に設定することを指し、キーフレーム間の遷移処理のみを行う必要があります。コンピュータによってレンダリングされるアニメーションの一種。

タッチ スクリーン ページでは、次の一般的な形式のトゥイーン アニメーションが使用されます:

まず、CSS3 アニメーション。

アニメーション (steps() を除く時間関数) 属性を使用して、各キーフレーム間にトゥイーン アニメーションを挿入します。

2 番目、CSS3 トランジション。

アニメーションとは異なり、トランジションでは最初と最後の瞬間に 2 つのキーフレーム状態のみを設定できます。

3 番目に、JavaScript を使用してアニメーションを実装します。これには、JavaScript アニメーション ライブラリまたはフレームワーク、CreateJS スイートの 1 つである有名な TweenJS などがあります。また、Flash業界で有名なGreenSock社が立ち上げたGSAP（GreenSockAnimationPlatform）でも、新たにJavascriptアニメーションのサポートが導入されました。

4 番目、SVG アニメーション。

モバイル端末の SVG テクノロジーへのフレンドリーなサポートに基づいて、SVG テクノロジーを使用してアニメーションを実現することも実現可能なソリューションです。

トランジションを使用して実装されたアニメーションには特定の制限があります。

Ruan Yifeng 先生の記事「CSS アニメーション入門」から概要を引用します。

トランジションの利点は、シンプルで使いやすいことですが、いくつかの大きな制限があります。

(1) 遷移にはイベントトリガーが必要なため、Web ページのロード時に自動的に遷移することはできません。

(2) 遷移は 1 回限りであり、何度もトリガーされない限り繰り返し発生することはありません。

(3) 遷移では開始状態と終了状態のみを定義できますが、中間状態は定義できません。つまり、状態は 2 つだけです。

(4) 遷移ルール​​は 1 つの属性に対する変更のみを定義でき、複数の属性を含めることはできません。

このような制限により、タッチ スクリーン ページではトランジション アニメーションがほとんど見られませんが、まったくないわけではありません。たとえば、ページめくりアニメーションの実装は、次の方法で実装できます。 JavaScript スクリプトで実現する遷移および変換プロパティ。

ケースのスクリーンショットは「JD.com: 2015 JDC Explosion Incident」から引用

対応する Chrome Dev Tool コードのデバッグ スクリーンショット

したがって、CSS3 を使用してアニメーションを実現する際のハイライトは、アニメーション の使用にあります。

ただし、CSS3 アニメーションをうまく記述するには、少し手間がかかります。これは、簡単そうに見えて、実際には詳細をよく理解する必要があります。

アニメーションのプロセスは事前に計画する必要があり、頭をタップするだけで理解できるものではありません。

デザイナーとのコミュニケーション結果を解析・出力したアニメーション属性分解表になります。

『共通モーションエフェクト制作手法』より導出されたアニメーション属性分解表の例

またはコミュニケーション分析軸に基づいて計画されたアニメーション時間。

「CSS3 アニメーションの実践」から派生したアニメーション タイムライン

アニメーションは自然で堅苦しくなく、12 のルールに従う必要があります

映画やテレビのアニメーション業界でも、フロントエンドのアニメーション業界でも、すべてが同じ方程式に従い、同じテイストを追求するのが、「ディズニーの九老星」（以下、ディズニー）がまとめた12のアニメーション黄金ルールです。 「12 のルール」)、それが今日まで使用され、高く評価されているのには理由がないわけではありません。

その痕跡は、いくつかの優れたタッチ スクリーン ページのケースで追跡できます。

ケースのスクリーンショットは「Tencent: WeBank」のオートバイのデモからのものです

著者は、ホイールとバイクのハンドリングは「絞って伸ばす」の法則を体現し、凹凸のあるリアリティを引き出します。

著者の陳在鎮氏は、自分の作品はディズニーアニメーションの 12 原則に従って完全にコード化されていると説明しているため、編集者は皆さんにこの件を注意深く研究することを強くお勧めします。

しかし、残念なことに、この事件はオフラインになっています。

ただし、ディズニーの12ルールで同じ経験を持つもう一人のマスターECによる作品「Paipai Shop New Online」もお楽しみいただけます。

ケースのスクリーンショットは「Paipai Shop の新規立ち上げ」から引用

ボックスには準備動作（ANTICIPATION）が上向きに展開され、飛び散る紙吹雪を展開してスローアウト（SLOW OUT）効果があり、円弧状（ARCS）の移動軌跡でパットストアのロゴが浮かび上がります。

さらに、円弧のモーション軌跡で最も明らかな部分は、ページ切り替えのプロセスです。

ケース全体がとても鮮やかで、自然できちんとしていて、素晴らしいです。

12 のルールに準拠して実装する方法を知りたい場合は、この記事「CSS アニメーションのガイド: 原則と例」をさらに読むことができます。

さらに、12 ルールを制御するときにアニメーションをより自然にするためには、アニメーションのタイミング機能の設計が間違いなく重要な部分になります。なぜなら、アニメーションは、アニメーションに基づいた動きの進化のプロセスであると言えるからです。時間機能。アニメーションをうまくコーディングするには、イージング関数の導入に焦点を当てたこの記事「インターフェイス アニメーションをより自然にする」が役立つかもしれません。

アニメーションをコーディングしてページを作成したら、これで終わりだと思いますか?あまり甘く考えないでください。モバイル端末のパフォーマンス要件も、克服する必要があるハードルです。

Google は、記事「Animation | Web Fundamentals - Google Developers」(申し訳ありませんが、ここに壁があります) で、アニメーション パフォーマンス レンダリングの最適化について次の提案を行いました:

アニメーションを設定するときは高価なものを避けるプロパティについては、アニメーションを設定するたびに 60fps を維持するように注意する必要があります。

では、高価な属性とは何でしょうか? (以下は人気の科学セクションです。透明な子供用靴はスキップできます)。

ページのレンダリングの一般的なプロセスは、JS > CSS > レイアウト > レンダリング レイヤーの結合です。

このうち、レイアウト (再配置) とペイント (再描画) は、プロセス全体の中で最も時間がかかる 2 つのリンクであるため、この 2 つのリンクは避けるようにします。パフォーマンスの観点から見ると、理想的なレンダリング パイプラインにはレイアウトや描画リンクがなく、レンダリング レイヤーをマージするだけで済みます。

どの CSS プロパティの変更がこれら 2 つのリンクに影響するかをどうやって知ることができますか?いいえ、各 CSS プロパティとその影響間のリンクは次のとおりです。

スクリーンショットは CSS トリガーからのものです。詳細については壁を越えてください

実際のアプリケーションでは、最も簡単に注意すべき点があります重要なのは、アニメーションをトリガーするときに diaplay:none 属性値を使用しないことです。これは、Layout および Paint リンクの切り替えを引き起こすためです。これはすでに良い方法です。

// 根据类名触发动画.active {	 &.flow_away {		.mobile,		.ground,		.platform,		.words {		  -webkit-animation: flowAwayUp ease .5s forwards;		  animation: flowAwayUp ease .5s forwards;		}	}}

また、translate 属性値は上/左/右/下の切り替えを置き換え、scale 属性値は幅/高さ、および opacity 属性を置き換えます。ディスプレイ/視認性などを交換します。

なお、上に貼ったGoogle記事のリンクには、偉そうなことは書かずにまとめておきます。この側面に関連する:

この要約は @丁平丁平の「H5 アニメーション 60fps への道」から引用しています。

最終的な要約重要な点は

• 事前に計画する
• コーディングの際は 12 のルールに注意する
• レイアウト/ペイントの原因となる属性を避けることを忘れないでください

完成しました！

最後に、この記事では主に CSS3 アニメーションを推奨しているため、他の実装方法については議論の範囲外です。P、さようなら、また次回。