Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Lightbulb 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
    Last edited by Acorn; 15 May 2022 at 08:03 PM.
    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

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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:

    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?

    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.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default 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
    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

  4. #4
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Homage to Egg's Recent Railway Animation

    I see a couple of problems, but it looks really good.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Homage to Egg's Recent Railway Animation

    Quote Originally Posted by wizard509 View Post
    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
    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

  7. #7
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Homage to Egg's Recent Railway Animation

    Quote Originally Posted by Acorn View Post
    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
    What bothers me is the train coming into view stopping backing up then taking another attempt at crossig the. road otherwise very well done.
    Last edited by wizard509; 15 May 2022 at 09:21 PM.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Homage to Egg's Recent Railway Animation

    Quote Originally Posted by wizard509 View Post
    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
    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

  9. #9
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default 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.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  10. #10
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •