Skip to content
This repository has been archived by the owner on Aug 10, 2024. It is now read-only.

Chaining animations

Jump to bottom
bartbutenaers edited this page Apr 9, 2022 · 1 revision

In some cases it is usefull to create a chain of animations. Which means that a second animation should start, when a first animation has ended.

In this tutorial we will first let a circle radius grow bigger, and afterwards the fill color will changed (from red to green).

  1. Add a circle to the SVG drawing (with id "my_circle"):

    image

  2. Add a first animation that will increase the circle radius (from 20 to 40) in 3 seconds:

    image

    This animation will be started by an input message, and will be repeated only 1 time.

    At the end of the animation we "freeze" the value, which means that the radius of the circle will stay 40 (which is the end value of the animation).

  3. Add a second animation that will change the fill color (from red to green) in 3 seconds:

    image

    Via the "custom trigger" option, the animation will be started when the first animation is ended!

    Note that - when you enter the name of first animation followed by a dot - you will automatically get a list of all available options:

    image

    This is standard SVG functionality, which means lots of tutorials will be available on the internet to explain these options.

  4. Inject a message to start the first animation:

    image

  5. The result will be a chain of the 2 animations in sequence:

    animation_demo

Here is the flow for this tutorial:

[{"id":"3c858c3e34cb735d","type":"ui_svg_graphics","z":"b72068aa707669b0","group":"28cdac6db4804909","order":1,"width":"10","height":"6","svgString":"<svg x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n   <circle id=\"my_circle\" cx=\"50\" cy=\"50\" r=\"20\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" />\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[{"id":"first_animation","targetId":"my_circle","classValue":"","attributeName":"r","transformType":"rotate","fromValue":"20","toValue":"40","trigger":"msg","duration":"3","durationUnit":"s","repeatCount":"1","end":"freeze","delay":"1","delayUnit":"s","custom":""},{"id":"second_animation","targetId":"my_circle","classValue":"","attributeName":"fill","transformType":"rotate","fromValue":"red","toValue":"green","trigger":"cust","duration":"3","durationUnit":"s","repeatCount":"1","end":"restore","delay":"1","delayUnit":"s","custom":"first_animation.end; "}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit;\n}","name":"","x":570,"y":580,"wires":[[]]},{"id":"bf34f5fe1650ea49","type":"inject","z":"b72068aa707669b0","name":"Start first animation","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"#first_animation\",\"action\":\"start\"}","payloadType":"json","x":350,"y":580,"wires":[["3c858c3e34cb735d"]]},{"id":"28cdac6db4804909","type":"ui_group","name":"Chained animation demo","tab":"8bbab1b47b8e87c8","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"8bbab1b47b8e87c8","type":"ui_tab","name":"SVG","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Clone this wiki locally