Class AnimateElement

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.AnimateElement

All Implemented Interfaces:

Serializable

Direct Known Subclasses:

AnimateTransformElement

public class AnimateElement
extends SvgElement

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

The <animate> element provides a way to animate an attribute of an element over time. It is part of SVG's SMIL (Synchronized Multimedia Integration Language) animation support.

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

Example:

CircleElement circle = new CircleElement().cx(50).cy(50).r(20);
circle.appendChild(new AnimateElement()
    .attributeName("r")
    .from(20)
    .to(40)
    .dur("1s")
    .repeatCount("indefinite"));

See Also:

• MDN: animate element
• Serialized Form

Nested Class Summary

Nested Classes

Modifier and Type	Class	Description
static enum	AnimateElement.Accumulate	Accumulate mode options for repeated animations.
static enum	AnimateElement.Additive	Additive mode options for how the animation combines with the base value.
static enum	AnimateElement.CalcMode	Calc mode options for animation interpolation.
static enum	AnimateElement.FillMode	Fill mode options for what happens after the animation ends.
static enum	AnimateElement.Restart	Restart behavior options for animations.

Nested classes/interfaces inherited from class SvgElement

SvgElement.PreserveAspectRatio

Constructor Summary

Constructors

Modifier	Constructor	Description
	AnimateElement()
protected	AnimateElement(String tag)

Method Summary

Modifier and Type	Method	Description
AnimateElement	accumulate(AnimateElement.Accumulate accumulate)	Sets how repeated animations accumulate.
AnimateElement	additive(AnimateElement.Additive additive)	Sets how the animation combines with the base value.
AnimateElement	attributeName(String attributeName)	Sets the name of the attribute to animate.
AnimateElement	begin(String begin)	Sets the begin time for the animation.
AnimateElement	beginElement()	Starts the animation.
AnimateElement	by(double by)	Sets the change in value for relative animations (numeric).
AnimateElement	by(String by)	Sets the change in value for relative animations.
AnimateElement	calcMode(AnimateElement.CalcMode calcMode)	Sets the calculation mode for interpolation.
AnimateElement	dur(String dur)	Sets the duration of the animation.
AnimateElement	dur(Duration dur)	Sets the duration of the animation using a Duration object.
AnimateElement	easeIn()	Sets up ease-in spline interpolation for smooth acceleration.
AnimateElement	easeInOut()	Sets up ease-in-out spline interpolation for smooth animations.
AnimateElement	easeOut()	Sets up ease-out spline interpolation for smooth deceleration.
AnimateElement	end(String end)	Sets the end time for the animation.
AnimateElement	endElement()	Ends the animation.
AnimateElement	fill(AnimateElement.FillMode fill)	Sets what happens after the animation ends.
AnimateElement	freeze()	Sets the animation to freeze at the end value after completion.
AnimateElement	from(double from)	Sets the starting value for the animation (numeric).
AnimateElement	from(String from)	Sets the starting value for the animation.
AnimateElement	keySplines(double x1, double y1, double x2, double y2)	Sets the bezier control points for spline interpolation (single spline).
AnimateElement	keySplines(String keySplines)	Sets the bezier control points for spline interpolation.
AnimateElement	keyTimes(double... keyTimes)	Sets the key times for keyframe animations.
AnimateElement	keyTimes(String keyTimes)	Sets the key times for keyframe animations.
AnimateElement	max(String max)	Sets the maximum duration for the animation.
AnimateElement	min(String min)	Sets the minimum duration for the animation.
AnimateElement	repeatCount(int repeatCount)	Sets the repeat count for the animation.
AnimateElement	repeatCount(String repeatCount)	Sets the repeat count for the animation.
AnimateElement	repeatDur(String repeatDur)	Sets the repeat duration for the animation.
AnimateElement	repeatIndefinitely()	Sets the animation to repeat indefinitely.
AnimateElement	restart(AnimateElement.Restart restart)	Sets the restart behavior for the animation.
AnimateElement	to(double to)	Sets the ending value for the animation (numeric).
AnimateElement	to(String to)	Sets the ending value for the animation.
AnimateElement	values(double... values)	Sets multiple values for keyframe animation.
AnimateElement	values(String values)	Sets multiple values for keyframe animation.

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

AnimateElement

public AnimateElement()

AnimateElement

protected AnimateElement(String tag)

Method Details

attributeName

public AnimateElement attributeName(String attributeName)

Sets the name of the attribute to animate.

Parameters:

attributeName - the attribute name (e.g., "cx", "fill", "opacity")

Returns:

this element for method chaining

from

public AnimateElement from(String from)

Sets the starting value for the animation.

Parameters:

from - the starting value

Returns:

this element for method chaining

from

public AnimateElement from(double from)

Sets the starting value for the animation (numeric).

Parameters:

from - the starting value

Returns:

this element for method chaining

to

public AnimateElement to(String to)

Sets the ending value for the animation.

Parameters:

to - the ending value

Returns:

this element for method chaining

to

public AnimateElement to(double to)

Sets the ending value for the animation (numeric).

Parameters:

to - the ending value

Returns:

this element for method chaining

by

public AnimateElement by(String by)

Sets the change in value for relative animations.

Parameters:

by - the value change

Returns:

this element for method chaining

by

public AnimateElement by(double by)

Sets the change in value for relative animations (numeric).

Parameters:

by - the value change

Returns:

this element for method chaining

values

public AnimateElement values(String values)

Sets multiple values for keyframe animation.

The values are semicolon-separated.

Parameters:

values - the keyframe values (e.g., "0;50;100;50;0")

Returns:

this element for method chaining

values

public AnimateElement values(double... values)

Sets multiple values for keyframe animation.

Parameters:

values - the keyframe values

Returns:

this element for method chaining

dur

public AnimateElement dur(String dur)

Sets the duration of the animation.

Parameters:

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

Returns:

this element for method chaining

dur

public AnimateElement dur(Duration dur)

Sets the duration of the animation using a Duration object.

The duration is converted to milliseconds for SVG.

Parameters:

dur - the duration

Returns:

this element for method chaining

begin

public AnimateElement begin(String begin)

Sets the begin time for the animation.

Parameters:

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

Returns:

this element for method chaining

end

public AnimateElement end(String end)

Sets the end time for the animation.

Parameters:

end - the end time

Returns:

this element for method chaining

min

public AnimateElement min(String min)

Sets the minimum duration for the animation.

Parameters:

min - the minimum duration

Returns:

this element for method chaining

max

public AnimateElement max(String max)

Sets the maximum duration for the animation.

Parameters:

max - the maximum duration

Returns:

this element for method chaining

repeatCount

public AnimateElement 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 AnimateElement repeatCount(int repeatCount)

Sets the repeat count for the animation.

Parameters:

repeatCount - the number of repeats

Returns:

this element for method chaining

repeatIndefinitely

public AnimateElement repeatIndefinitely()

Sets the animation to repeat indefinitely.

Returns:

this element for method chaining

repeatDur

public AnimateElement 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 AnimateElement fill(AnimateElement.FillMode fill)

Sets what happens after the animation ends.

Parameters:

fill - the fill mode (REMOVE or FREEZE)

Returns:

this element for method chaining

freeze

public AnimateElement freeze()

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

Returns:

this element for method chaining

calcMode

public AnimateElement calcMode(AnimateElement.CalcMode calcMode)

Sets the calculation mode for interpolation.

Parameters:

calcMode - the calculation mode

Returns:

this element for method chaining

keyTimes

public AnimateElement keyTimes(String keyTimes)

Sets the key times for keyframe animations.

Values should be between 0 and 1, semicolon-separated. The number of key times must match the number of values.

Parameters:

keyTimes - the key times (e.g., "0;0.25;0.5;0.75;1")

Returns:

this element for method chaining

keyTimes

public AnimateElement 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 AnimateElement keySplines(String keySplines)

Sets the bezier control points for spline interpolation.

Each set of control points is four numbers (x1 y1 x2 y2) for a cubic bezier. Sets are separated by semicolons. Number of sets = number of values - 1.

Parameters:

keySplines - the key splines (e.g., "0.5 0 0.5 1; 0.5 0 0.5 1")

Returns:

this element for method chaining

keySplines

public AnimateElement keySplines(double x1,
 double y1,
 double x2,
 double y2)

Sets the bezier control points for spline interpolation (single spline).

The four values define a cubic bezier curve: (x1, y1) is the first control point and (x2, y2) is the second control point. Values should be between 0 and 1.

Common easing curves:

• Ease: 0.25, 0.1, 0.25, 1.0
• Ease-in: 0.42, 0, 1.0, 1.0
• Ease-out: 0, 0, 0.58, 1.0
• Ease-in-out: 0.42, 0, 0.58, 1.0

Parameters:

x1 - x coordinate of first control point (0-1)

y1 - y coordinate of first control point (0-1)

x2 - x coordinate of second control point (0-1)

y2 - y coordinate of second control point (0-1)

Returns:

this element for method chaining

easeInOut

public AnimateElement easeInOut()

Sets up ease-in-out spline interpolation for smooth animations.

This is a convenience method that sets calcMode to SPLINE and applies an ease-in-out bezier curve.

Returns:

this element for method chaining

easeOut

public AnimateElement easeOut()

Sets up ease-out spline interpolation for smooth deceleration.

This is a convenience method that sets calcMode to SPLINE and applies an ease-out bezier curve (starts fast, ends slow).

Returns:

this element for method chaining

easeIn

public AnimateElement easeIn()

Sets up ease-in spline interpolation for smooth acceleration.

This is a convenience method that sets calcMode to SPLINE and applies an ease-in bezier curve (starts slow, ends fast).

Returns:

this element for method chaining

additive

public AnimateElement additive(AnimateElement.Additive additive)

Sets how the animation combines with the base value.

Parameters:

additive - the additive mode

Returns:

this element for method chaining

accumulate

public AnimateElement accumulate(AnimateElement.Accumulate accumulate)

Sets how repeated animations accumulate.

Parameters:

accumulate - the accumulate mode

Returns:

this element for method chaining

restart

public AnimateElement restart(AnimateElement.Restart restart)

Sets the restart behavior for the animation.

Parameters:

restart - the restart mode

Returns:

this element for method chaining

beginElement

public AnimateElement beginElement()

Starts the animation.

This is particularly useful for dynamically added animations, which don't auto-start in browsers. Call this method after appending the animation element to its target element.

Returns:

this element for method chaining

endElement

public AnimateElement endElement()

Ends the animation.

Causes the animation to end immediately, as if the end time had been reached.

Returns:

this element for method chaining