Animations

Ziaplot supports basic animaitons through SVG’s Synchronized Multimedia Integration Language (SMIL) attributes. Animation options include setting an SVG attribute at a specific time, sweeping an attribute from one value to another, moving an object along the path of another object, or simulating a “draw” and “erase” of paths.

Tip

The animations on this page are set to run some number of seconds after the page loads. If nothing appears to be happening, refresh the page.

The svg attribute of drawing elements contains methods for setting animations.

Setting an attribute

To set an SVG attribute at a specific time, use ziaplot.attributes.Animatable.animate_set().

with zp.Diagram():
    A = zp.Circle((0,0), .1).strokewidth(3)
    A.svg.animate_set('stroke', 'red', begin='2s', duration='2s')
_images/animate_1_0.svg

Changing an Attribute

An SVG attribute may be animated over time through a range of values using ziaplot.attributes.Animatable.animate(). Here, the stroke-width attribute is swept from 2 to 10 every 2 seconds.

with zp.Diagram():
    A = zp.Circle((0,0), .1).strokewidth(3)
    A.svg.animate('stroke-width', to='10', frm='2', begin='0s', duration='2s', repeat='indefinite')
_images/animate_2_0.svg

Showing an element

To show an element at a given time, use ziaplot.attributes.Animatable.animate_show().

with zp.Diagram():
    A = zp.Circle((0,0), .1).strokewidth(3)
    A.svg.animate_show(begin='3s')
_images/animate_3_0.svg

Simulated Drawing

To animate “drawing” an element, use ziaplot.attributes.Animatable.animate_in(), and to erase an element, ziaplot.attributes.Animatable.animate_out().

with zp.Diagram():
    A = zp.Circle((0,0), .1).strokewidth(3)
    A.svg.animate_in(begin='1s', duration='2s')
    A.svg.animate_out(begin='4s', duration='2s')
_images/animate_4_0.svg

Annimating sub-elements

Some drawing components are made of multiple SVG elements, such as text or markers. For example a Point has the circle and optional text. Animations will apply to the circle, but the text may also be animated using animation methods on the svg.text attribute.

with zp.Diagram():
    A = zp.Point((0,0)).label('A')
    A.svg.animate_set('fill', 'red', begin='2s', duration='2s')
    A.svg.text.animate_set('font-size', '32', begin='3s', duration='2s')
_images/animate_5_0.svg

Example

This real-world example demonstrates use of animations to illustrate constructing the perpendicular bisector of a line segment.

with zp.Diagram().size(400,300).xrange(-.35, 1).yrange(-.65, .65) as d:
    radius = .7  # Arbitrary compass radius
    line = zp.Segment((0,0), (1,0)).color('black')
    A = zp.Point(line.p1).label('A')
    B = zp.Point(line.p2).label('B')
    arc_a1 = zp.CompassArc(A, radius, 35, 20)
    arc_a2 = zp.CompassArc(A, radius, -55, 20)
    arc_b1 = zp.CompassArc(B, radius, 125, 20)
    arc_b2 = zp.CompassArc(B, radius, -145, 20)
    C = zp.Point.at_intersection(arc_a1, arc_b1).label('C', 'E')
    D = zp.Point.at_intersection(arc_a2, arc_b2).label('D', 'E')
    bisector = zp.Line.from_points(C, D)

    A.svg.animate_set('fill', to='red', begin='0s', duration='2s')
    arc_a1.svg.animate_in(begin='0s', duration='1s')
    arc_a2.svg.animate_in(begin='1s', duration='1s')
    B.svg.animate_set('fill', to='red', begin='2s', duration='2.25s')
    arc_b1.svg.animate_in(begin='2.25s', duration='1s')
    arc_b2.svg.animate_in(begin='3.25s', duration='1s')
    C.svg.animate_show(begin='5s')
    D.svg.animate_show(begin='5s')
    C.svg.text.animate_show(begin='5s')
    D.svg.text.animate_show(begin='5s')
    bisector.svg.animate_in(begin='5.5s', duration='0.5s')
_images/animate_6_0.svg