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

    Lightbulb anime.js - Line Drawing

    As this requires Shapes as SVG, only XPro+ is currently available for building the Animation.

    anime.js -Line Drawing.xar

    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
    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
    Oct 2000
    Location
    Wiesbaden, Germany
    Posts
    419

    Default 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 View Post
    As this requires Shapes as SVG, only XPro+ is currently available for building the Animation.

    anime.js -Line Drawing.xar

    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

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

    Lightbulb Re: anime.js - Line Drawing

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

  4. #4

    Default Re: anime.js - Line Drawing

    Fantastic!

  5. #5
    Join Date
    Oct 2000
    Location
    Wiesbaden, Germany
    Posts
    419

    Default Re: anime.js - Line Drawing

    Thank you,

    FLy

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

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

    Default Re: anime.js - Line Drawing

    It's also a great way to show directions/maps/paths etc.

    DEMO
    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

  7. #7
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: anime.js - Line Drawing

    That's a nice application, Egg! How difficult was it to code this animation?

  8. #8
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: anime.js - Line Drawing

    Great stuff.

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: anime.js - Line Drawing

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

  10. #10
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: anime.js - Line Drawing

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

 

 

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
  •