Animation

Animate creates an SVG <animate> element. Append it to a shape, text, path, or group to animate one SVG attribute over time.

Import

import pydreamplet as dp

Signature

dp.Animate(attr: str, **kwargs)

The first argument is the SVG attribute name to animate. The constructor writes that name to the generated attributeName attribute.

svg = dp.SVG(360, 180)
svg.append(dp.Line(90, 90, 270, 90, stroke="currentColor", stroke_width=3, stroke_dasharray="8 8", opacity=0.35))

circle = dp.Circle(
    cx=90,
    cy=90,
    r=24,
    fill="currentColor",
    opacity=0.7,
    stroke="currentColor",
    stroke_width=4,
)

circle.append(
    dp.Animate("cx", values=[90, 270, 90], dur="3s"),
    dp.Animate("r", values=[24, 38, 24], dur="3s"),
    dp.Animate("opacity", values=[0.45, 1, 0.45], dur="3s"),
)

svg.append(circle)

Constructor Parameters

ParameterTypeDefaultDescription
attrstrrequiredSVG attribute name written to attributeName.
repeatCountint | str"indefinite"SVG repeat count. Use this exact camelCase keyword.
valueslist[Any]NoneKeyframe values joined with semicolons. Non-list values are ignored.
durstr"2s"SVG duration.
**kwargsAnynoneAdditional attributes for the <animate> element.

Animate always sets:

AttributeValue
attributeType"XML"
attributeNamethe attr argument
durprovided dur, or "2s"
repeatCountprovided repeatCount, or "indefinite"
anim = dp.Animate("opacity")

print(str(anim))
# <animate xmlns="http://www.w3.org/2000/svg" dur="2s" attributeType="XML" attributeName="opacity" repeatCount="indefinite" />

Values

If values is a list, pyDreamplet stores the list on the instance and writes the SVG values attribute by joining items with ;.

anim = dp.Animate("opacity", values=[0, 1, 0.5], dur="3s")

print(anim.values)
# [0, 1, 0.5]

print(anim.element.get("values"))
# 0;1;0.5

The current source annotates the getter as list[str], while the setter accepts list[Any]. At runtime, the original list values are preserved on the Python object and converted to strings only for the SVG attribute.

Non-list constructor values are ignored.

anim = dp.Animate("opacity", values="0;1;0")

print(anim.values)
# []

print(anim.has_attr("values"))
# False

Properties

repeat_count

anim.repeat_count -> int | str
anim.repeat_count = value

Reads and writes the SVG repeatCount attribute.

anim = dp.Animate("opacity")
anim.repeat_count = "5"

print(anim.element.get("repeatCount"))
# 5

values

anim.values -> list[str]
anim.values = value: list[Any]

Reads and writes the keyframe list. Setting it updates the SVG values attribute.

anim = dp.Animate("r")
anim.values = [8, 24, 8]

print(anim.element.get("values"))
# 8;24;8

Attribute Names

Use SVG attribute names for attr, such as "cx", "r", "fill", "opacity", or "stroke-dashoffset".

For additional constructor keyword arguments, pyDreamplet applies the normal SvgElement attribute-name normalization. That means key_splines becomes key-splines.

SVG attributes that are not Python identifiers can be set after construction with attrs().

anim = dp.Animate("opacity", values=[0, 1, 0], dur="2s")
anim.attrs({"calcMode": "spline", "keySplines": "0.4 0 0.2 1;0.4 0 0.2 1"})