アトムのアニメーションスキームを作成しようとしています。電子のアニメーションを実現しましたが、常に Path 要素の最初のポイントでアニメーションを開始します。
ここで例を参照してください: http://localhostr.com/3CVziiftCJmm
パス カーブに沿ってランダムなポイントからアニメーションを開始するにはどうすればよいですか? 別の解決策も受け入れられます: パス カーブの回転。とにかく、このアトムスキームをもっとリアルにしたい。
アトムのアニメーションスキームを作成しようとしています。電子のアニメーションを実現しましたが、常に Path 要素の最初のポイントでアニメーションを開始します。
ここで例を参照してください: http://localhostr.com/3CVziiftCJmm
パス カーブに沿ってランダムなポイントからアニメーションを開始するにはどうすればよいですか? 別の解決策も受け入れられます: パス カーブの回転。とにかく、このアトムスキームをもっとリアルにしたい。
提案されていますが、svg にはまだ宣言的なランダム性はありません。提供されている例を見ると、svg で宣言的なランダム性を使用できるようにする JavaScript ライブラリが見つかります (ただし、動作させるには JavaScript が必要であることに注意してください)。
ランダム性が必要な場合の別のオプションは、javascript を使用して必要なパス オフセットを生成することです。たとえば、 <motionPath> 要素の属性keyTimes
と属性を微調整します。keyPoints
完全に JavaScript 駆動のアニメーションを行う方がおそらく互換性が高くなりますが、webkit には動的に変更されたアニメーション要素に関する問題があります。