CSS Secret Garden: フレーム単位のアニメーション_html/css_WEB-ITnose

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

問題

通常、CSS トランジションを使用して実現するのは困難または不可能なアニメーション効果が必要です。たとえば、漫画の動きや複雑な進行状況バーなどです。この場合、画像ベースのフレームごとのアニメーションは完璧ですが、この効果を実現するのは困難です。

この時点で、アニメーション GIF を使用できないのではないかと思われるかもしれません。多くの場合、答えは「はい」です。アニメーション GIF は完璧です。ただし、いくつかの欠点もあり、場所によっては機能しない場合があります。

• すべてのフレームは 256 色のパレットに制限されています
• 透明度を持たせることができません。これは大きな問題です質問。たとえば、以下に示すような効果は非常に一般的です。
• 時間、繰り返し、一時停止など、一部の要素は CSS で変更できません。 gif ファイルが生成されると、すべてがファイルに保存され、画像エディターを使用するか、別のファイルを生成することによってのみ変更できます。

上の画像は半透明の進行状況インジケーター (dabblet.com) で、Gif 画像では実現できない効果です。

2004 年の時点で、Mozilla チームは最初の 2 つの問題を解決し、PNG ファイルをフレームごとにアニメーション化して、同様の静的手法またはアニメーション GIF ファイルを実現しました。彼らはこのデザインをAPNGと呼んでいます。しかし、現在に至るまで、APNG をサポートするブラウザや描画ソフトウェアは非常に限られています。

開発者は、スプライトを使用し、JavaScript を使用して背景の位置の値を動的に変更することで、柔軟なフレームごとのアニメーションをブラウザーに実装しました。それを行うための小さなライブラリも見つけることができますが、CSS を使用してこの効果を実現する簡単な方法はあるでしょうか?

解決策

すべてのフレーム アニメーションで使用されるスプライトの PNG 画像が次のとおりであると仮定します。

ロード アニメーションを作成する要素があります。 (アクセシビリティを向上させるために、要素内にテキストを入れることを忘れないでください。) 要素のサイズは、単一フレーム アニメーションのサイズです:

<div class="loader">Loading...</div>.loader {    width: 100px;    height: 100px;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);    text-indent: 999px;    overflow: hidden;    background: url(http://www.w3cplus.com/sites/default/files/blogs/2015/1507/loader.png) 0 0;}

現在の結果は以下のようになります:

最初のフレームが表示されますが、アニメーション効果はありません。背景位置を別の値 (-100px,0 は 2 番目のフレーム、-200px 0 は 3 番目のフレームなど) に設定すると、したがって、最初に頭に浮かぶのはアニメーションかもしれません:

@keyframes loader {    to { background-position: -800px 0; }}.loader {    animation: loader 1s infinite linear;    /*省略其他样式*/}

ただし、以下の画像 (167 ミリ秒ごと) でわかるように、これは実際には望ましい効果ではありません:

フレームごとのアニメーションの最初の試みは、キーフレーム間の補間が必要なかったために失敗しました。

フレームごとのアニメーションはまだ実装されていませんが、実際には解決策に非常に近づいています。ここでの秘密は、前に紹介した「ベジェベース」時間関数の代わりに、steps() 時間関数を使用することです。

これは何時の関数ですか?と疑問に思われるかもしれません。前のセクションで紹介したように、これまで見てきたのは、キーフレーム間のスムーズな移行を制御する「ベジェ ベースの」時間関数についてです。通常の状況では、トランジションとアニメーションの両方でスムーズなトランジションを実現できます。ただし、この場合、このスムーズ トランジション タイム関数は、スプライトを使用して作成したアニメーションを直接破壊します。

Steps() 時間関数は、「ベジェベース」とは大きく異なり、アニメーション全体のキーフレーム ステップに基づいてステップ数を指定し、補間のオンとオフを設定できます。 CSS では、steps() についてはあまり議論されていません。 CSS の時間関数関数としては、「ベジェベース」は実母の産物で非常に人気がありますが、steps() は継母の産物であり、常に不評でした。ただし、この場合、steps() がまさに必要なものです。これを読み込みアニメーションに適用すると、アニメーションは通常になり、必要な効果が得られます。

animation: loader 1s infinite steps(8);

覚えておいてください、steps() は 2 番目のパラメーターも受け入れることができ、このパラメーターはオプションです。 start または end (デフォルト)。以下に示すように、各時間間隔のスイッチを設定するために使用されます。

1 つのステップのみが必要な場合は、step-start および step -end ショートカットを使用することもできます。キー。steps(1,start) およびsteps(1,end) に相当します。

ヒント: Simrai は、スプライト アニメーション用の step() テクニックを提供します。