問題タブ [web-animations]

以下に示すようなパス上の要素の翻訳をアニメーション化する必要があります。

現在、 De CasteljaurequestAnimationFrame曲線上の位置を計算し、インライン CSS を介して要素の位置を設定するコールバックを使用しています。 これは機能しますが、CSS アニメーションと比較するとパフォーマンスが低下し、非常に冗長になります。translate3d()

Web アニメーションは、目的地が実行時にしかわからない場合に要素をアニメーション化するための優れた新しいオプションのように思えますが、開始点と終了点の間でアニメーションを変更するものは何も見つかりません。

を使用して上記を実行することは可能ですelement.animate()か、それとも CSS アニメーションよりもカスタマイズ可能ですか?

Web Animations は w3c の新しい仕様です。これは、私たちが話していることを明確にするためです。いずれにせよ、特定の要素までスムーズにスクロールしたかったのです。jQuery のAnimate機能を使用すると、これは常に簡単に実行できますが、Web アニメーションではそれほど単純ではないようです。Web アニメーションのタイミング関数を使用して DOM プロパティに適用する方法はありますか ( scrollTop)。私が尋ねている理由は、アプリケーションの残りの部分で別のテクノロジ/ライブラリを使用しながら、補間関数を使用するためだけに (余分な) ライブラリ全体をロードしたくないからです。

次のように機能する Web エフェクトを作成しようとしています。

(実際にはカードとは何の関係もありません。カードを類推として使用するだけです。実際には画像になります。また、カードの「スタック」はなく、ブラウザ ウィンドウ内の固定位置にすぎません。)

任意に配置されるカードがあり、「スタック」の位置があります。

カードにカーソルを合わせると、カードが反転し (rotateX 360deg)、「スタック」位置に変換されます。

マウスがどこにでも移動している間、そこにとどまります。

マウスが別のカードの上にある場合、スタック上のカードは元の場所に反転し、新しいカードはスタック位置に反転します。

等々...

私は Chrome 39 を使用していますが、可能な限り Web Animations API を使用してこれを行いたいと考えています。そうでない場合は、Chrome 39 が簡単にサポートできる解決策: CSS、JQuery、JavaScript、Dart、QML など。

このぎこちない小さなアニメーションは、私が持っているすべてです:

どんな助けにも感謝します！

この種のアニメーション効果を実現するにはどうすればよいですか (以下のリンクを参照)、どこから学習を開始する必要がありますか? css、html5、またはプラグインなどのこの部分は..

css や html5 のスタートアップの知識はありますが、効果を得る方法がわかりません。

http://www.terredevenements.com/en/

*私が言及している効果は、マウスがホバリングし、背景を静的に維持している間の前景画像の動きです

Web Animations APIを発見したばかりで、これらのアニメーションにコールバック関数を導入する方法を見つけようとしています..次を使用してみました

このセクションの w3c 仕様を見て、onfinishプロパティを使用する必要があると思いましたが、何も起こりません。

また、jQuery コールバック構文を使用してみました。

しかし、もちろんこれもうまくいきません。どんなアイデアでも、それは単純なものだと確信しています。まだ情報を見つけることができませんでした。

SVG/SMIL を使用して説明線のアニメーションを開発していますが、Firefox でアニメーションを表示すると CPU 負荷が高くなります。CPU パフォーマンスに関して、SVG 自体と宣言型アニメーションのベスト プラクティスはありますか? ビューアーやブラウザーが異なれば結果も異なるため、一般的な経験則を探しています。これを Web アニメーション API に変換できるようにしたいと考えています。

JavaScript アニメーション フレームワークを探しています。私はいくつか見つけました：

http://www.pixijs.com/

http://phaser.io/

http://paperjs.org/

これらはすべて良いです。

しかし、移動、スケール、およびフレーム アニメーションを作成できるように、GUI ベースのアニメーション クリエーター フレームワークが必要です。これにより、多くのコードを書かなくても基本的なアニメーションを簡単に作成できます。

cocos2d の cocos studioのようなもの。

どなたか、そのようなフレームワークをご存知でしたら教えてください。ありがとう。