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
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
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
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Fantastic!
It's also a great way to show directions/maps/paths etc.
DEMO
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
That's a nice application, Egg! How difficult was it to code this animation?
Great stuff.
Gary W. Priester
Mr. Moderator Emeritus Dude, Sir
gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
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
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Bookmarks