Re: anime.js - Line Drawing
Hey Acorn,
that's just great. I love it. I'll put it in one of my next web projects.
Can i change the order lines are drawn?
http://flysolo.de/xara_ani_js/line_drawing/
bb,
fly
Quote:
Originally Posted by
Acorn
As this requires Shapes as SVG, only XPro+ is currently available for building the Animation.
Attachment 132065
Again, this is just a taster but clearly several of you are on top of tweaking and improving my offerings.
Here is a demo:
https://shared.xara.com/NS0CTtqJ2B
Have fun!
Acorn
Re: anime.js - Line Drawing
Quote:
Originally Posted by
FLySOLO
FLy, nice graphic.
There are several ways:
- In the Animation script, change direction: 'alternate', to direction: 'reverse',
- For each shape, change its stacking order in the Page & Layer gallery (Shift+Ctrl+F & Shift+Ctrl+B)
- For each shape, use the Shape Tool and click the Reverse Path icon
- Split shapes at different nodes, delete, move, add and recombine
- Use Inkscape to create your SVG as you can manipulate the SVG DOM easily
- Use Boxy SVG (I have a paid licence but it I think it is has a free mode - click Elements at the bottom to see the SVG DOM)
Acorn
Re: anime.js - Line Drawing
Re: anime.js - Line Drawing
Thank you,
FLy
Quote:
Originally Posted by
Acorn
FLy, nice graphic.
There are several ways:
- In the Animation script, change direction: 'alternate', to direction: 'reverse',
- For each shape, change its stacking order in the Page & Layer gallery (Shift+Ctrl+F & Shift+Ctrl+B)
- For each shape, use the Shape Tool and click the Reverse Path icon
- Split shapes at different nodes, delete, move, add and recombine
- Use Inkscape to create your SVG as you can manipulate the SVG DOM easily
- Use Boxy SVG (I have a paid licence but it I think it is has a free mode - click Elements at the bottom to see the SVG DOM)
Acorn
Re: anime.js - Line Drawing
It's also a great way to show directions/maps/paths etc.
DEMO
Re: anime.js - Line Drawing
That's a nice application, Egg! How difficult was it to code this animation?
Re: anime.js - Line Drawing
Re: anime.js - Line Drawing
Quote:
Originally Posted by
Boy
That's a nice application, Egg! How difficult was it to code this animation?
Boy, the concept is very simple as it its implementation.
You add anime.js CDN to the website head.
You draw a line or shape with your XDA.
You Name it with a ClassName.
Path animations require SVG-rendering, which only XPro+v21 at the moment does. You can create SVGs elsewhere and add as a Placeholder.
You need an animation script.
For this example, I created a Line Named htmlclass="spiral".
I gave the Line 0px Line width, closed it into a shape with no Fill so it is a closed loop (a shape a stroke, rather than a line; Egg's was a Line).
(I added another spiral underneath as a static marker of where the spiral is).
I included a ball named htmlclass="ball".
The ball is positioned top left corner of the spiral bounding box.
The animation script is a simple:
<script>
var path = anime.path('.spiral svg path');
anime({
targets: '.ball',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'cubicBezier(0.5, 0, 1, 1)',
duration: 60000,
loop: true
});
</script>
The result: https://shared.xara.com/GdJszcwcZi
Now if you create a number of identical balls (and a teddy bear) all with Name htmlclass="ball", then all will gyrate down the spiral.
To get them to run down the visible spiral, they have to be all together.
This is a waste as they all more together.
anime.js has a solution - stagger them.
You just include a delay: anime.stagger(2000), and you will see up to 30 shapes all sliding down the same slope, one being the occasional teddy.
This is a case of moving along a shape's stoke as opposed to Egg's revealing a stroke.
Both are equally simple.
In Egg's case, I would not have used the direction statement so the line would always draw North to South.
Acorn
Re: anime.js - Line Drawing
Quote:
Originally Posted by
Acorn
In Egg's case, I would not have used the direction statement so the line would always draw North to South.
Thanks for the extensive explanations, Acorn. What I like about Egg's approach is that it goes 'all over the place' as this is very useful for animating trips and explorations on a map, something often used in videos.