Homage to Egg's Recent Railway Animation
I have never much been interested in animations but Egg's train was fun.
Egg has used SVGator a lot of graft to achieve his masterpiece.
I am lazy and I have always suggested Xara license Greensock, which allows animations of any DOM, array or SVG in wizard fashion.
My attempt uses straight Xara with one JavaScript library (anime.js) that is all of 16kB.
My animation script is genuinely a first go and this is a text file edited in Notepad++ that is only 5.6kB.
Here is my attempt: https://shared.xara.com/ZNhW2YIyNJ. UPDATED: https://shared.xara.com/7WjyzQiqkw.
To publish, I have had to shoehorn in the anime.js animation library into the Website > HTML Code (head) section as the Xara site does not handle external assets.
I have found that the design cycle is a delight.
STEP 1
I have a template with anime.js included and a <script> call to my animation file.
STEP 2
All I have to do is design as normal and add a special Name of ' htmlclass="<objectClassName>" ' for every item that has an animation effect.
anime.js comes with a timeline command where you add a sequence of animation calls with start times.
STEP 3 (Partial)
My script is like this:
var story = anime.timeline({loop: true,}); //repeat when finished
story
.add(quiet) //do nothing for 5 seconds
.add(warn) // flash on & off for 500ms
...
.add(stop, '+=150') //blinks in a 500ms cycle
.add(flbDown, '-=5000') // lower a barrier
The actual animation effect is a JS object (a collection of variables & values (and functions)). For 'flbDown', we have:
var flbDown = {
targets: '.fl-barrier',
rotate: '91deg',
scale: [1, 1.02, 1.01, 0.98, 1, 0.97, 1],
duration: 5000,
easing: 'cubicBezier(1.00, 1.42, 0.84, 0.93)',
};
I have 20 animations acting across 33 stages for my engine run.
STEP 4
I change and save the animation file externally (with a <script> link) and Preview Website without ever having to resave the design file.
I will deconstruct the engine run that I've made in a separate thread.
It doesn't have to be a full length cartoon, it can be applied to rollovers with different in and out effects, something Xara has failed in to date.
Look at https://animejs.com and https://greensock.com. Both do similar.
Greensock is slick, anime.js is edgy. I think both top SVGator as the payload is minimal and readily editable, even after delivery. I am sure Egg will advise otherwise.
Acorn
Re: Homage to Egg's Recent Railway Animation
Firstly Acorn, Wow! That's great. I'm flattered.
The biggest problem I encountered was to get the barrier rails go from a vertcal position, one above the other to the closed position were they are spread across the length of the barrier but still vertical. You've nailed this.
As you're aware I have visual minded brain where you seem to love coding. For example:
Quote:
var flbDown = {
targets: '.fl-barrier',
rotate: '91deg',
scale: [1, 1.02, 1.01, 0.98, 1, 0.97, 1],
duration: 5000,
easing: 'cubicBezier(1.00, 1.42, 0.84, 0.93)',
};
would drive me to distraction. I believe I can follow the larger part of it but the multiple scaling settings and easing settings I've no idea how to grasp. (Yes I appreciate you can alter all these within your text file and see the results).
The only thing I dislike on your animation is the text is very blocky. Can't you 'convert to editable shape' type operation?
Quote:
Egg has used
SVGator a lot of graft to achieve his masterpiece.
I wouldn't call this graft. It's more akin to typing HTML to create a web page or using a WYSIWYG program like Xara Designer to create the same result.
The minor graft is SVGators inability to include one short repeating animation within a longer animation.
Re: Homage to Egg's Recent Railway Animation
Egg, I understand.
I look at the code and read it as a set of instructions:
The object 'flbDown' is affecting the shape with a ClassName label 'fl-barrier', which, on the design is vertical and is acting as the Front-Left Barrier.
Over a 5-second period rotate the barrier just over a quarter of a turn so it has a slight overshoot.
In doing so give it a slight turbulence through its arc to make it look ratchety, in need of maintenance.
Finally, try and give it some physical weight by including a bounce off the end buffer.
I started off with:
var flbDown = {
targets: '.fl-barrier',
rotate: '90deg',
duration: 5000,
};
The rest was me trying to make it more realistic and discovering what was possible.
For the Easing, I used https://cubic-bezier.com/.
The signage, I lifted as SVG, I thought, from the Govt website.
Easy to change.
I also mucked up the Sun.
I had corrected the fencing scaling but forgot I used the same function for the Sun.
I'll republish later on.
Acorn
Re: Homage to Egg's Recent Railway Animation
I see a couple of problems, but it looks really good.
Re: Homage to Egg's Recent Railway Animation
Yes Easings can be hard to follow without a visual aid. Here are SVGators base easings:
LINK
Re: Homage to Egg's Recent Railway Animation
Quote:
Originally Posted by
wizard509
I see a couple of problems, but it looks really good.
Larry, with a few small changes (https://shared.xara.com/7WjyzQiqkw), I hope they have improved things.
I got the Sun working! and extended the railway.
Acorn
Re: Homage to Egg's Recent Railway Animation
Quote:
Originally Posted by
Acorn
What bothers me is the train coming into view stopping backing up then taking another attempt at crossig the. road otherwise very well done.
Re: Homage to Egg's Recent Railway Animation
Quote:
Originally Posted by
wizard509
What bothers me is the train coming into view stopping backing up then taking another attempt at crossig the. road otherwise very well done.
Larry, it's supposed to be a joke. It's Stephenson's Rocket meeting today's technology for the first time and hesitating.
I could have made it travel across in a steady fashion, accelerate or slow down or even change into another engine.
For the life of me, there seem to be no good engine illustrations out there so I could mix them in coming and going.
Acorn
Re: Homage to Egg's Recent Railway Animation
Thanks Acorn sorry dumb ole me didn't get this as a joke however it is very well done.=D>=D>=D>
Re: Homage to Egg's Recent Railway Animation
That's a great amendment Acorn. The text now aligns with the rest of the drawing. That far right barrier looks like it's meant to chop someones head off :)