animateMotion
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
SVG の <animateMotion>
要素は、ある要素がモーションパスに沿って移動する方法を定義します。
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path
fill="none"
stroke="lightgrey"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion
dur="10s"
repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
</svg>
使用場面
属性
keyPoints
-
この属性は [0,1] の範囲で、それぞれの
keyTimes
に関連付けられた値に対して、パスに沿ってオブジェクトがどのくらいの距離にあるかを示します。 値の型: <number>*; Default value: none; Animatable: no path
-
この属性は、
d
属性と同じ構文を使用して、モーションパスを定義します。 値の型: <string>; Default value: none; Animatable: no rotate
-
この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。 値の型: <number>|
auto
|auto-reverse
; Default value:0
; Animatable: no
メモ: <animateMotion>
においては、 calcMode
属性の既定値は paced
です。
アニメーション属性
- アニメーションタイミング属性
begin
,dur
,end
,min
,max
,restart
,repeatCount
,repeatDur
,fill
- アニメーション値属性
calcMode
,values
,keyTimes
,keySplines
,from
,to
,by
- 他のアニメーション属性
-
特に重要なもの:
attributeName
,additive
,accumulate
- アニメーションイベント属性
グローバル属性
使用上の注意
この要素は SVGAnimateMotionElement
インターフェイスを実装しています。
仕様書
Specification |
---|
SVG Animations Level 2 # AnimateMotionElement |
ブラウザーの互換性
BCD tables only load in the browser