1

javascript でキーフレームを使用して css3 変換を処理したい。これは、どこにも有利な答えが得られたことがない質問です。例が

@-webkit-keyframes move{
    from{
        -webkit-transform:translate(0px,0px);
    }
    to{
        -webkit-transform:translate(0px,-100px);
    }
}

javascript を使用してこれらの値を動的に翻訳するにはどうすればよいですか。

4

2 に答える 2

1

css でも宣言されていないアニメーションを明示的に割り当てることができないため、シナリオは少し複雑です。つまり、サンプルでは「移動」アニメーションを宣言しています。

そうは言っても、実行時にスタイルシートを生成できます。次の CSS ルールを生成するのはかなり簡単です。

@-webkit-keyframes moveA{/*keyframes*/}
#smokeA {-webkit-animation: moveA 5s infinite; }
@-webkit-keyframes moveB{/*keyframes*/}
#smokeB {-webkit-animation: moveB 5s infinite; }
...

headそして、次のようにドキュメントに追加できます。

$('head').append('<style type="text/css">/*css rules here*/</style>');

概念実証(ページ読み込みの 5 秒後にかなりひどいスタイルが追加されます)

注意: GPU アクセラレーションを有効にすると、Chrome で FPS カウンターがトリガーされることに気付きました。これは、jQuery アニメーションと比較して、実際にはこれがより優れたパフォーマンスのアプローチであると推測することにつながります。

アップデート：

数秒ごとにスタイルの値を変更しようとしている Katti のコメントを見てください。固定されたアニメーションのサブセットのみを生成することでうまくいく可能性があります。このシナリオでは、蝉の原則が非常に当てはまります。記事を読むときは、グラフィカルなパターンではなく動きを考えてください。真にランダムなアニメーションは、非常に大量の小さなパーティクルに適用しない限り (ブラウザを殺す可能性があります)、リアルに見えません。

于 2012-05-27T22:47:22.177 に答える
-1

height|を増やすのと同じように、javascriptを使用していくつかの要素をアニメーション化する必要があると思います。width.. ここから始めるのがよいでしょう..

チュートリアル

于 2012-05-27T21:59:10.233 に答える