4

ラファエルの形を同時に回転させようとしています。これが私が試したことです（100,100はキャンバスの中心です）：

var revolve = Raphael.animation({transform: 'r360,100,100'},1000,"easein")
var rotate = Raphael.animation({transform: 'r360'},1000,"linear")
var ec = paper.ellipse(100,50,10,5).attr({
    fill: 'none',
    stroke: 'blue'
})

そして、私がアニメーションを呼び出そうとしたさまざまな方法で、それぞれが記述された結果を生成します:

  1. 2 番目のアニメーションが最初のアニメーションをオーバーライドしています:

    ec.animate(revolve).animate(rotate)

  2. 正常に動作しますが、いくつかの問題があります（以下に記載）：

    ec.animate({
    transform: 'r360,100,100r360'
}, 1000, "easein")

  3. 2 番目のアニメーションが最初のアニメーションをオーバーライドしています。

    ec.animate({
    transform: 'r360,100,100'
}, 1000, "easein")
.animate({
    transform: 'r360'
}, 1000, "easein")

* 2 番目のバリエーションの問題は、回転と回転のイージング関数を個別に変更できないことです。さらに、transform:'...r360'が機能していません (最初のアニメーションを上書きしています)。

jsFiddle で動作するデモを次に示します。

4

3 に答える 3

2

どうやらそれを達成する方法はありません。それを証明するために、2 番目の遅延を使用しながら両方のアニメーションをチェーンし、1000 前後のさまざまな値 (上下) で渡すことができます。アニメーション レンダラーがシリアルであることがわかります。

ec.animate(revolve)
ec.animate(rotate.delay(/*200*/1000));

それらが同時に機能するためには、両方のトランジションを 1 つのトランジション文字列に合わせて、1 つのアニメーション オブジェクトに渡す必要があります。アニメーションごとに異なるイージングを定義するという制限に加えて):

var revolveAndRotate = Raphael.animation({
    transform: 'r360,100,100r360'
}, 1000, "easein")

ec.animate(revolveAndRotate);​

これを示すために更新された jsFiddleを次に示します。

于 2012-05-04T21:23:07.127 に答える
0

これはあなたが探しているものですか？回転アニメーションに 2 番目の回転を追加し、反対方向に 360 度回転させました。2 番目のアニメーションである回転は廃止されました。

var revolve = Raphael.animation({transform:'r360,100,100 r-360'},1000,"easein")
于 2012-05-02T10:36:07.330 に答える
0

それを行う良い方法があり、それをはるかに超えています。

ラファエルはパスと階層がすべてであることを忘れないでください。3D ソフトウェアに関しては、可能な限り複雑なアニメーションを作成し、階層レベルごとに 1 つの「変換」機能を維持するために、パスが続く階層の最高レベルを維持することがすべてです。

このような連鎖アニメーションを実現し、最初のアニメーション階層として最初の階層アニメーション ( transform ) を維持するために、3D ワールドで使用される優れたトリックは、パス「ダミー」を使用することです。

あなたの場合、回転を達成するためのダミーは、半径がゼロの円パスです。

  • レベル 1 : 楕円には独自の変換アニメーションがあります。
  • レベル 2 : 楕円は、半径がゼロの円パスの周りを 360 回転します (自身の周りを回転します) + ダミーは独自の変換を行うことができます。
  • レベル 3 : ダミーは回転機能を使用するか、半径 100 の別の円ダミー パス (および彼自身の変換) をたどります。

トランジション文字列を中間階層レベルとして使用することに加えて、「ダミー」をパスとして使用すると、階層レベルごとに 1 つのプリミティブ変換関数を保持しながら、任意の種類のアニメーションを連鎖させることができます。

半径ゼロの円パスは、最もよく使用されるダミーの 3D ワールドです。

ダミー アニメーションをチェーンしたら、各ダミーのタイミング関数で各アニメーションをトリガーします。これは、キーフレーム ソフトウェアとまったく同じ方法で行われます。

于 2012-05-29T12:57:46.680 に答える