問題タブ [web-animations]

プロジェクトにvelocity.jsライブラリを含めて、アニメーションをよりスムーズにする方法を知りたいです。ありがとう！

index.html

script.js

webanimations ポリフィルをロードする必要がないように、ブラウザーが webanimation API をサポートしているかどうかを確認する方法はありますか?

github のドキュメントでは、Element.animate と Playback Control について説明しています。要素の $0.animate を確認できますが、再生コントロールを確認する方法がわかりません。これは、ポリフィルが必要かどうかを確認する正確な方法ですか?

マテリアル デザイン ガイドラインに従っていくつかのアニメーションを作成していたので、曲線のモーション パスを作成中に行き詰まりました。

まず第一に、Polymer を使用して可能な限り多くのプロジェクトをビルドしています。このビデオのようなアニメーションを実装したいと考えています。アニメーションは要素のグリッド上で実行する必要があり、クリックすると画面いっぱいに拡大されます。この効果は、次のビデオで最もよく示されました。

私はネオンアニメーション要素でいくつかのことを試してきましたが、これを簡単に行う方法が見つかりませんでした.

Web Animations API と、それを使用してモーション パスを実装する方法については調べましたが、これを Polymer で構築されたアニメーションと連携させる方法を見つけることができませんでした。

別の可能な解決策は、ネオン アニメーションで構築されたカスタム アニメーションに多くのキーポイントを設定することでした。カーブ上に十分な数のポイントを設定することで、カーブを思いどおりに発生させることができます。

私の質問は、グリッドのランダムな要素をクリックしたときに曲線モーション パス アニメーションを作成する最も簡単で最良の方法は何でしょうか?

ある部分が終了すると別の部分が開始されるアニメーションがあり、非常に長いキューになる可能性があります。

ここにコードを入れます: https://jsfiddle.net/homa/qub7ejd1/

キューがあることがわかるように、次のコードがあります。

私のコードは、徐々に長くなるにつれて、本当に醜くなります。また、他の場合に特定のアニメーションをキューで実行する必要がある場合でも、ほとんど読み取れません。

この問題を解決するための提案はありますか?

オンライン サービスを使用して SVG ベースの読み込みインジケーターを生成しましたが、それを使用するページが読み込まれるたびに Chrome から警告が表示され、SMIL アニメーションが非推奨になっていることが通知され、かなり不快です。それを取り除くために、<animate>タグを Web アニメーションに置き換えることを検討することにしました。以下は元の SVG です。

そして、これが私が最終的に得たものです：

私はなんとかそれを機能させることができたことに本当に興奮しようとしていましたが、全く同じ SVGbackground-imageが CSS で として使用された場合、アニメーション化をまったく拒否することに気づいた途端、笑顔が凍りつきました (以下のデモ; 注記)。ここではデータ URI を使用して SVG をインライン化しましたが、通常の URL を使用して SVG をロードした場合も同じことが起こります)。

警告を無視して SMIL を使用するべきですか、それとも Web アニメーションを SVG 内で動作させる方法はありますか?

私は最近Ng2をいじり始めたばかりで、現在ionic2でアプリを開発しています。初めてアニメーションの部分を掘り下げて、いくつかの問題に遭遇しました。

基本的に異なる幅で s を繰り返す ngFor があります。配列内の各要素には、コンポーネントの onInit メソッドで計算される独自の div の幅の値があります。アニメーションの前に、 で幅をバインドしていました[style.width]="expresson"。ドキュメントには、「*」を使用してアニメーションの終了状態スタイルを定義できると書かれています。これは、計算されたスタイルから正しい値を取得することを意味しますが、自分で幅をプログラムで設定している場合は機能しません。

問題は、幅を変更したときにアニメーションをトリガーするか、終了状態の値を動的に設定するようにアニメーションに指示するにはどうすればよいかということです。ありがとう！

編集: これはplunkrの例です。アニメーション後に最終的な幅を 50% に設定しましたが、最終的な幅をコンポーネントの配列で定義された値に設定するのに問題があります。取得したい最終結果を確認するには、html の @animation を削除するだけです。

http://jsfiddle.net/zm5p9LLe/に記載されているように、d3js 液体塗りつぶしの視覚化を構築しています。この例では、1 つの液体充填ゲージを示しています。ループして複数のゲージを作成しています。ただし、アニメーションはループの最後の繰り返しでのみ機能します。これはトランジションの共通の div id によるものですか? すべてのゲージでアニメーションを機能させるための代替手段はありますか?

HTML

CSS

ジャバスクリプト