Class AnimateMotionElement

java.lang.Object

com.vaadin.flow.dom.Node<com.vaadin.flow.dom.Element>

com.vaadin.flow.dom.Element

org.vaadin.firitin.element.svg.SvgElement

org.vaadin.firitin.element.svg.AnimateMotionElement

All Implemented Interfaces:

Serializable

public class AnimateMotionElement
extends SvgElement

A typed Java API for the SVG <animateMotion> element.

The <animateMotion> element causes a referenced element to move along a motion path.

To use, create an AnimateMotionElement and append it as a child of the element you want to animate.

Example - Linear motion:

CircleElement circle = new CircleElement().center(0, 50).r(15);
circle.appendChild(new AnimateMotionElement()
    .path("M 0 0 H 300 Z")
    .dur(Duration.ofSeconds(3))
    .repeatIndefinitely());

Example - Curved motion with auto-rotation:

RectElement rect = new RectElement().size(20, 20);
rect.appendChild(new AnimateMotionElement()
    .path("M 50,50 Q 100,0 150,50 T 250,50")
    .dur(Duration.ofSeconds(3))
    .rotateAuto()
    .repeatIndefinitely());

See Also:

• MDN: animateMotion element
• Serialized Form

Nested Class Summary

Nested Classes

Modifier and Type	Class	Description
static enum	AnimateMotionElement.CalcMode	Calc mode options for animation interpolation.
static enum	AnimateMotionElement.FillMode	Fill mode options for what happens after the animation ends.
static class	AnimateMotionElement.MPathElement	The mpath element provides the ability to reference an external path as the definition of a motion path.
static enum	AnimateMotionElement.RotateMode	Rotation mode options for motion path animation.

Nested classes/interfaces inherited from class SvgElement

SvgElement.PreserveAspectRatio

Constructor Summary

Constructors

Constructor	Description
AnimateMotionElement()

Method Summary

Modifier and Type	Method	Description
AnimateMotionElement	begin(String begin)	Sets the begin time for the animation.
AnimateMotionElement	beginElement()	Starts the animation.
AnimateMotionElement	calcMode(AnimateMotionElement.CalcMode calcMode)	Sets the calculation mode for interpolation.
AnimateMotionElement	dur(String dur)	Sets the duration of the animation.
AnimateMotionElement	dur(Duration dur)	Sets the duration of the animation using a Duration object.
AnimateMotionElement	end(String end)	Sets the end time for the animation.
AnimateMotionElement	endElement()	Ends the animation.
AnimateMotionElement	fill(AnimateMotionElement.FillMode fill)	Sets what happens after the animation ends.
AnimateMotionElement	freeze()	Sets the animation to freeze at the end position after completion.
AnimateMotionElement	keyPoints(double... keyPoints)	Sets the key points along the motion path.
AnimateMotionElement	keyPoints(String keyPoints)	Sets the key points along the motion path.
AnimateMotionElement	keySplines(String keySplines)	Sets the bezier control points for spline interpolation.
AnimateMotionElement	keyTimes(double... keyTimes)	Sets the key times for keyframe animations.
AnimateMotionElement	keyTimes(String keyTimes)	Sets the key times for keyframe animations.
AnimateMotionElement	path(String path)	Sets the motion path using SVG path syntax.
AnimateMotionElement	path(Consumer<PathBuilder> pathConfigurator)	Sets the motion path using a lambda expression that configures a PathBuilder.
AnimateMotionElement	path(PathElement pathElement)	Sets the motion path using a PathElement reference.
AnimateMotionElement	repeatCount(int repeatCount)	Sets the repeat count for the animation.
AnimateMotionElement	repeatCount(String repeatCount)	Sets the repeat count for the animation.
AnimateMotionElement	repeatDur(String repeatDur)	Sets the repeat duration for the animation.
AnimateMotionElement	repeatIndefinitely()	Sets the animation to repeat indefinitely.
AnimateMotionElement	rotate(double angle)	Sets a fixed rotation angle for the animated element.
AnimateMotionElement	rotate(AnimateMotionElement.RotateMode rotate)	Sets the rotation mode for the animated element.
AnimateMotionElement	rotateAuto()	Sets the element to automatically rotate to follow the path tangent.
AnimateMotionElement	rotateAutoReverse()	Sets the element to automatically rotate opposite to the path tangent.

Methods inherited from class SvgElement

emptySvgRoot, flushPendingAttributes, getOuterHTML, getPendingOrAttribute, getStyle, height, height, id, preserveAspectRatio, preserveAspectRatio, scheduleBeforeClientResponse, setAttribute, setWriteOnlyAttribute, size, size, viewBox, width, width

Methods inherited from class com.vaadin.flow.dom.Element

addAttachListener, addDetachListener, addEventListener, addPropertyChangeListener, addPropertyChangeListener, as, attachShadow, bindAttribute, bindProperty, bindText, callJsFunction, callJsFunction, createText, executeJs, executeJs, get, get, getAttribute, getAttributeNames, getChild, getChildCount, getChildren, getClassList, getComponent, getParent, getProperty, getProperty, getProperty, getProperty, getProperty, getPropertyBean, getPropertyBean, getPropertyNames, getPropertyRaw, getSelf, getShadowRoot, getTag, getText, getTextRecursively, getThemeList, hasAttribute, hasProperty, isEnabled, isTextNode, isVisible, removeAttribute, removeFromParent, removeFromTree, removeFromTree, removeProperty, scrollIntoView, scrollIntoView, setAttribute, setAttribute, setAttribute, setEnabled, setProperty, setProperty, setProperty, setPropertyBean, setPropertyJson, setPropertyList, setPropertyMap, setText, setVisible, toString

Methods inherited from class com.vaadin.flow.dom.Node

accept, appendChild, appendChild, appendVirtualChild, appendVirtualChild, ensureChildHasParent, equals, getNode, getParentNode, getStateProvider, hashCode, indexOfChild, insertChild, insertChild, isVirtualChild, removeAllChildren, removeChild, removeChild, removeChild, removeVirtualChild, removeVirtualChild, setChild

Methods inherited from class Object

clone, finalize, getClass, notify, notifyAll, wait, wait, wait

Constructor Details

AnimateMotionElement

public AnimateMotionElement()

Method Details

path

public AnimateMotionElement path(String path)

Sets the motion path using SVG path syntax.

Common path commands:

• M x,y - Move to
• L x,y - Line to
• H x - Horizontal line to
• V y - Vertical line to
• Q cx,cy x,y - Quadratic Bezier curve
• C cx1,cy1 cx2,cy2 x,y - Cubic Bezier curve
• A rx,ry rotation large-arc sweep x,y - Arc
• Z - Close path

Parameters:

path - the SVG path definition

Returns:

this element for method chaining

path

public AnimateMotionElement path(Consumer<PathBuilder> pathConfigurator)

Sets the motion path using a lambda expression that configures a PathBuilder.

Example usage:

rect.animateMotion()
    .path(p -> p
        .moveTo(50, 80)
        .horizontalLineTo(250)
        .quadraticBezierTo(280, 80, 280, 60)
        .quadraticBezierTo(280, 40, 250, 40)
        .horizontalLineTo(50)
        .closePath())
    .dur(Duration.ofSeconds(3))
    .rotateAuto()
    .repeatIndefinitely();

Parameters:

pathConfigurator - a consumer that configures the path builder

Returns:

this element for method chaining

path

public AnimateMotionElement path(PathElement pathElement)

Sets the motion path using a PathElement reference.

The referenced path element must have an id attribute set.

Parameters:

pathElement - the path element to follow

Returns:

this element for method chaining

dur

public AnimateMotionElement dur(String dur)

Sets the duration of the animation.

Parameters:

dur - the duration (e.g., "3s", "500ms")

Returns:

this element for method chaining

dur

public AnimateMotionElement dur(Duration dur)

Sets the duration of the animation using a Duration object.

Parameters:

dur - the duration

Returns:

this element for method chaining

begin

public AnimateMotionElement begin(String begin)

Sets the begin time for the animation.

Parameters:

begin - the begin time (e.g., "0s", "2s", "click")

Returns:

this element for method chaining

end

public AnimateMotionElement end(String end)

Sets the end time for the animation.

Parameters:

end - the end time

Returns:

this element for method chaining

repeatCount

public AnimateMotionElement repeatCount(String repeatCount)

Sets the repeat count for the animation.

Parameters:

repeatCount - the number of repeats or "indefinite"

Returns:

this element for method chaining

repeatCount

public AnimateMotionElement repeatCount(int repeatCount)

Sets the repeat count for the animation.

Parameters:

repeatCount - the number of repeats

Returns:

this element for method chaining

repeatIndefinitely

public AnimateMotionElement repeatIndefinitely()

Sets the animation to repeat indefinitely.

Returns:

this element for method chaining

repeatDur

public AnimateMotionElement repeatDur(String repeatDur)

Sets the repeat duration for the animation.

Parameters:

repeatDur - the repeat duration (e.g., "10s", "indefinite")

Returns:

this element for method chaining

fill

public AnimateMotionElement fill(AnimateMotionElement.FillMode fill)

Sets what happens after the animation ends.

Parameters:

fill - the fill mode

Returns:

this element for method chaining

freeze

public AnimateMotionElement freeze()

Sets the animation to freeze at the end position after completion.

Returns:

this element for method chaining

rotate

public AnimateMotionElement rotate(AnimateMotionElement.RotateMode rotate)

Sets the rotation mode for the animated element.

Parameters:

rotate - the rotation mode

Returns:

this element for method chaining

rotate

public AnimateMotionElement rotate(double angle)

Sets a fixed rotation angle for the animated element.

Parameters:

angle - the rotation angle in degrees

Returns:

this element for method chaining

rotateAuto

public AnimateMotionElement rotateAuto()

Sets the element to automatically rotate to follow the path tangent.

Returns:

this element for method chaining

rotateAutoReverse

public AnimateMotionElement rotateAutoReverse()

Sets the element to automatically rotate opposite to the path tangent.

Returns:

this element for method chaining

calcMode

public AnimateMotionElement calcMode(AnimateMotionElement.CalcMode calcMode)

Sets the calculation mode for interpolation.

Parameters:

calcMode - the calculation mode

Returns:

this element for method chaining

keyPoints

public AnimateMotionElement keyPoints(String keyPoints)

Sets the key points along the motion path.

Values should be between 0 and 1, semicolon-separated.

Parameters:

keyPoints - the key points (e.g., "0;0.5;1")

Returns:

this element for method chaining

keyPoints

public AnimateMotionElement keyPoints(double... keyPoints)

Sets the key points along the motion path.

Parameters:

keyPoints - the key points (values between 0 and 1)

Returns:

this element for method chaining

keyTimes

public AnimateMotionElement keyTimes(String keyTimes)

Sets the key times for keyframe animations.

Values should be between 0 and 1, semicolon-separated.

Parameters:

keyTimes - the key times

Returns:

this element for method chaining

keyTimes

public AnimateMotionElement keyTimes(double... keyTimes)

Sets the key times for keyframe animations.

Parameters:

keyTimes - the key times (values between 0 and 1)

Returns:

this element for method chaining

keySplines

public AnimateMotionElement keySplines(String keySplines)

Sets the bezier control points for spline interpolation.

Parameters:

keySplines - the key splines

Returns:

this element for method chaining

beginElement

public AnimateMotionElement beginElement()

Starts the animation.

Returns:

this element for method chaining

endElement

public AnimateMotionElement endElement()

Ends the animation.

Returns:

this element for method chaining