Animation Challenge - Forum

Forum Navigation
Climate strike banner
You need to log in to create posts and topics.

Animation Challenge

With the new VisualNEO Web version we have added improved support for SVG graphics and also included neoAnimation a new animation plugin to allow you create complex animations even over SVG images and Draw objects.
As it's not easy to fully understand the full potential at first, I will be sharing some tips here.

Let's start with a simple but very nice zoom-in and zoom-out animation.

Take a look at this app:
https://www.visualneo.com/tutorials/viewboxanimation

It's just an animation over the viewBox SVG property (click here for more information about this property)

Steps:
1) We need a SVG image of Europe.
2) Open the SVG file in Notepad or any other plain text editor.
3) Look for the <svg> tag at the beginning and add id="europe" so it has a name we can reference later.

<svg id="europe" ... >

4) Add a Container object to your app, right click and click on Edit "html" property.
5) Copy all the svg file code from Notepad and paste it here. Press OK and you will see the map (note you can resize it)
6) Now add a button and doublke click it to enter this code:

CreateEmptyObject [myproperties]
SetVar [myproperties("viewBox")] "0 244 130 100"
neoAnimateDrawTo "europe" [myproperties] 2 0 "none" "easeout"

If you test your app you will see a nice animation over Spain when the button is pressed.

Let's see what we have done:
We have created an empty object whose name is [myproperties]
In an object I can store many atributtes and it's values just like this:

SetVar [myobject("attributeName")] "attributeValue"

This time we have stored just one: (but it's possible to animate many at the same time)

SetVar [myproperties("viewBox")] "0 244 130 100"

viewBox property allows as to trim the image: 0 and 244 are the upper left corner coordinates and 130 and 100 the width and height (Full image has a viewBox of "0 0 464 339")

Finally we use the new neoAnimation plugin to animate SVG properties:

neoAnimateDrawTo "europe" [myproperties] 2 0 "none" "easeout"

"europe" is the SVG name
[myproperties] stores the final values after the animation
The animation will be 2 seconds long with 0 delay
"easeOut" means slower at the end.

Would you like to try adding additional buttons?
Let me know if you have any questions.
Next step, will be designing a whole user interface in SVG.

I have attached europe.svg with the id already set.

Uploaded files:
  • You need to login to have access to uploads.

Beautiful and very interesting.  Thanks!