1

アニメーション SVG ドーナツ チャートを作成しています。今のところ私のベスト トライはここにあります。しかし、これはまさに私が望むものではありません。要素が最初に表示され、別の要素が画面に表示される前にフェードアウトし、他のすべての要素が表示されてフェードアウトするのを待ってから、最初の要素からこのサイクルを再開します。ご覧のように、要素が一緒にフェード イン/フェード アウトしていますが、アニメーションの開始時間のみが異なります。別の tryで values/keyTimes 属性を試しました。しかし、私が知っているブラウザではアニメーションが機能しません。

最初の SVG の問題コードは次のとおりです。

<animate
    attributeName="opacity"
    begin="0ms" //This is for the first element, for anothers it differs
    //I wish there is `pause` attribute, to pause animation repiting...
    dur="3000ms"
    from="0.7"
    to="0"
    repeatCount="indefinite"/>

ここに別のコードサンプルがあります

<animate
    attributeName="opacity"
    begin="0ms"
    keyTimes="0,0.2,1"
    values="0.7,0,0"
    dur="15000ms"
    repeatCount="indefinite"/>

ご覧のとおり、アニメーションの持続時間を延ばそうとしましたが、今回は要素のフェードを 20% (フェードする要素が 5 つありました) で終了させました。しかし、うまくいきません。

fromandtoを使用して属性の並べ替えを試みましたが、効果はkeyTimesありdurませんでした。ここには何か狡猾なトリックがあるに違いない...

PSこれはほとんど私が欲しいものですが、アニメーションを繰り返す必要があります.

4

1 に答える 1

2

問題はコンマkeyTimesとvalue属性です - セミコロンを使用し、ドキュメントを 2 回読む必要があります。

于 2012-07-05T05:59:13.717 に答える