Class AnimateTransformElement

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
org.vaadin.firitin.element.svg.AnimateTransformElement
All Implemented Interfaces:
Serializable
public class AnimateTransformElement extends AnimateElement
A typed Java API for the SVG <animateTransform> element.

The <animateTransform> element animates a transformation attribute on a target element, allowing for animated translations, rotations, scaling, and skewing.

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

Example - Rotating animation:

GElement arrow = new GElement();
arrow.add(new PathElement().d("M0,-40 L5,0 L-5,0 Z"));
arrow.appendChild(new AnimateTransformElement()
    .rotateFromTo(0, 360, 50, 50)  // rotate around center (50,50)
    .dur(Duration.ofSeconds(2))
    .repeatIndefinitely());
See Also:

  • Constructor Details

    • AnimateTransformElement

      public AnimateTransformElement()

  • Method Details

    • type

      public AnimateTransformElement type(AnimateTransformElement.Type type)
      Sets the type of transformation to animate.
      Parameters:
      type - the transform type
      Returns:
      this element for method chaining

    • from

      public AnimateTransformElement from(String from)
      Description copied from class: AnimateElement
      Sets the starting value for the animation.
      Overrides:
      from in class AnimateElement
      Parameters:
      from - the starting value
      Returns:
      this element for method chaining

    • from

      public AnimateTransformElement from(double from)
      Description copied from class: AnimateElement
      Sets the starting value for the animation (numeric).
      Overrides:
      from in class AnimateElement
      Parameters:
      from - the starting value
      Returns:
      this element for method chaining

    • to

      public AnimateTransformElement to(String to)
      Description copied from class: AnimateElement
      Sets the ending value for the animation.
      Overrides:
      to in class AnimateElement
      Parameters:
      to - the ending value
      Returns:
      this element for method chaining

    • to

      public AnimateTransformElement to(double to)
      Description copied from class: AnimateElement
      Sets the ending value for the animation (numeric).
      Overrides:
      to in class AnimateElement
      Parameters:
      to - the ending value
      Returns:
      this element for method chaining

    • by

      public AnimateTransformElement by(String by)
      Description copied from class: AnimateElement
      Sets the change in value for relative animations.
      Overrides:
      by in class AnimateElement
      Parameters:
      by - the value change
      Returns:
      this element for method chaining

    • by

      public AnimateTransformElement by(double by)
      Description copied from class: AnimateElement
      Sets the change in value for relative animations (numeric).
      Overrides:
      by in class AnimateElement
      Parameters:
      by - the value change
      Returns:
      this element for method chaining

    • values

      public AnimateTransformElement values(String values)
      Description copied from class: AnimateElement
      Sets multiple values for keyframe animation.

      The values are semicolon-separated.

      Overrides:
      values in class AnimateElement
      Parameters:
      values - the keyframe values (e.g., "0;50;100;50;0")
      Returns:
      this element for method chaining

    • values

      public AnimateTransformElement values(double... values)
      Description copied from class: AnimateElement
      Sets multiple values for keyframe animation.
      Overrides:
      values in class AnimateElement
      Parameters:
      values - the keyframe values
      Returns:
      this element for method chaining

    • dur

      public AnimateTransformElement dur(String dur)
      Description copied from class: AnimateElement
      Sets the duration of the animation.
      Overrides:
      dur in class AnimateElement
      Parameters:
      dur - the duration (e.g., "1s", "500ms", "indefinite")
      Returns:
      this element for method chaining

    • dur

      public AnimateTransformElement dur(Duration dur)
      Description copied from class: AnimateElement
      Sets the duration of the animation using a Duration object.

      The duration is converted to milliseconds for SVG.

      Overrides:
      dur in class AnimateElement
      Parameters:
      dur - the duration
      Returns:
      this element for method chaining

    • begin

      public AnimateTransformElement begin(String begin)
      Description copied from class: AnimateElement
      Sets the begin time for the animation.
      Overrides:
      begin in class AnimateElement
      Parameters:
      begin - the begin time (e.g., "0s", "2s", "click", "mouseenter")
      Returns:
      this element for method chaining

    • end

      public AnimateTransformElement end(String end)
      Description copied from class: AnimateElement
      Sets the end time for the animation.
      Overrides:
      end in class AnimateElement
      Parameters:
      end - the end time
      Returns:
      this element for method chaining

    • repeatCount

      public AnimateTransformElement repeatCount(String repeatCount)
      Description copied from class: AnimateElement
      Sets the repeat count for the animation.
      Overrides:
      repeatCount in class AnimateElement
      Parameters:
      repeatCount - the number of repeats or "indefinite"
      Returns:
      this element for method chaining

    • repeatCount

      public AnimateTransformElement repeatCount(int repeatCount)
      Description copied from class: AnimateElement
      Sets the repeat count for the animation.
      Overrides:
      repeatCount in class AnimateElement
      Parameters:
      repeatCount - the number of repeats
      Returns:
      this element for method chaining

    • repeatIndefinitely

      public AnimateTransformElement repeatIndefinitely()
      Description copied from class: AnimateElement
      Sets the animation to repeat indefinitely.
      Overrides:
      repeatIndefinitely in class AnimateElement
      Returns:
      this element for method chaining

    • repeatDur

      public AnimateTransformElement repeatDur(String repeatDur)
      Description copied from class: AnimateElement
      Sets the repeat duration for the animation.
      Overrides:
      repeatDur in class AnimateElement
      Parameters:
      repeatDur - the repeat duration (e.g., "10s", "indefinite")
      Returns:
      this element for method chaining

    • fill

      public AnimateTransformElement fill(AnimateElement.FillMode fill)
      Description copied from class: AnimateElement
      Sets what happens after the animation ends.
      Overrides:
      fill in class AnimateElement
      Parameters:
      fill - the fill mode (REMOVE or FREEZE)
      Returns:
      this element for method chaining

    • freeze

      public AnimateTransformElement freeze()
      Description copied from class: AnimateElement
      Sets the animation to freeze at the end value after completion.
      Overrides:
      freeze in class AnimateElement
      Returns:
      this element for method chaining

    • calcMode

      public AnimateTransformElement calcMode(AnimateElement.CalcMode calcMode)
      Description copied from class: AnimateElement
      Sets the calculation mode for interpolation.
      Overrides:
      calcMode in class AnimateElement
      Parameters:
      calcMode - the calculation mode
      Returns:
      this element for method chaining

    • keyTimes

      public AnimateTransformElement keyTimes(String keyTimes)
      Description copied from class: AnimateElement
      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.

      Overrides:
      keyTimes in class AnimateElement
      Parameters:
      keyTimes - the key times (e.g., "0;0.25;0.5;0.75;1")
      Returns:
      this element for method chaining

    • keyTimes

      public AnimateTransformElement keyTimes(double... keyTimes)
      Description copied from class: AnimateElement
      Sets the key times for keyframe animations.
      Overrides:
      keyTimes in class AnimateElement
      Parameters:
      keyTimes - the key times (values between 0 and 1)
      Returns:
      this element for method chaining

    • keySplines

      public AnimateTransformElement keySplines(String keySplines)
      Description copied from class: AnimateElement
      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.

      Overrides:
      keySplines in class AnimateElement
      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 AnimateTransformElement keySplines(double x1, double y1, double x2, double y2)
      Description copied from class: AnimateElement
      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
      Overrides:
      keySplines in class AnimateElement
      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 AnimateTransformElement easeInOut()
      Description copied from class: AnimateElement
      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.

      Overrides:
      easeInOut in class AnimateElement
      Returns:
      this element for method chaining

    • easeOut

      public AnimateTransformElement easeOut()
      Description copied from class: AnimateElement
      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).

      Overrides:
      easeOut in class AnimateElement
      Returns:
      this element for method chaining

    • easeIn

      public AnimateTransformElement easeIn()
      Description copied from class: AnimateElement
      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).

      Overrides:
      easeIn in class AnimateElement
      Returns:
      this element for method chaining

    • additive

      public AnimateTransformElement additive(AnimateElement.Additive additive)
      Description copied from class: AnimateElement
      Sets how the animation combines with the base value.
      Overrides:
      additive in class AnimateElement
      Parameters:
      additive - the additive mode
      Returns:
      this element for method chaining

    • accumulate

      public AnimateTransformElement accumulate(AnimateElement.Accumulate accumulate)
      Description copied from class: AnimateElement
      Sets how repeated animations accumulate.
      Overrides:
      accumulate in class AnimateElement
      Parameters:
      accumulate - the accumulate mode
      Returns:
      this element for method chaining

    • restart

      public AnimateTransformElement restart(AnimateElement.Restart restart)
      Description copied from class: AnimateElement
      Sets the restart behavior for the animation.
      Overrides:
      restart in class AnimateElement
      Parameters:
      restart - the restart mode
      Returns:
      this element for method chaining

    • beginElement

      public AnimateTransformElement beginElement()
      Description copied from class: AnimateElement
      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.

      Overrides:
      beginElement in class AnimateElement
      Returns:
      this element for method chaining

    • endElement

      public AnimateTransformElement endElement()
      Description copied from class: AnimateElement
      Ends the animation.

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

      Overrides:
      endElement in class AnimateElement
      Returns:
      this element for method chaining

    • rotateFromTo

      public AnimateTransformElement rotateFromTo(double fromAngle, double toAngle)
      Sets up a rotation animation from one angle to another, rotating around the origin.
      Parameters:
      fromAngle - the starting angle in degrees
      toAngle - the ending angle in degrees
      Returns:
      this element for method chaining

    • rotateFromTo

      public AnimateTransformElement rotateFromTo(double fromAngle, double toAngle, double cx, double cy)
      Sets up a rotation animation from one angle to another, rotating around a specified center.
      Parameters:
      fromAngle - the starting angle in degrees
      toAngle - the ending angle in degrees
      cx - the x coordinate of the rotation center
      cy - the y coordinate of the rotation center
      Returns:
      this element for method chaining

    • rotateValues

      public AnimateTransformElement rotateValues(String... angles)
      Sets up a rotation animation through multiple angles, rotating around a specified center.

      This is useful for animating to a new angle when the starting angle might differ. The values should include the rotation center coordinates.

      Parameters:
      angles - the angles to animate through (each as "angle cx cy")
      Returns:
      this element for method chaining

    • translateFromTo

      public AnimateTransformElement translateFromTo(double fromX, double fromY, double toX, double toY)
      Sets up a translation animation.
      Parameters:
      fromX - starting X position
      fromY - starting Y position
      toX - ending X position
      toY - ending Y position
      Returns:
      this element for method chaining

    • scaleFromTo

      public AnimateTransformElement scaleFromTo(double fromScale, double toScale)
      Sets up a uniform scale animation.
      Parameters:
      fromScale - starting scale factor
      toScale - ending scale factor
      Returns:
      this element for method chaining

    • scaleFromTo

      public AnimateTransformElement scaleFromTo(double fromSx, double fromSy, double toSx, double toSy)
      Sets up a non-uniform scale animation.
      Parameters:
      fromSx - starting X scale
      fromSy - starting Y scale
      toSx - ending X scale
      toSy - ending Y scale
      Returns:
      this element for method chaining