Welcome to TalkGraphics.com
Page 3 of 3 FirstFirst 123
Results 21 to 25 of 25
  1. #21
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Animate line drawing?

    Here's another example of Acorns technique. A bit heavy on graphics but easy to make.

    CLICK HERE
    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

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

    Default Re: Animate line drawing?

    Quote Originally Posted by Egg Bramhill View Post
    Here's another example of Acorns technique. A bit heavy on graphics but easy to make.

    CLICK HERE
    Egg, I am honoured for your creation of my own animated Avatar.

    I'll come to you for advice in future.

    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

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

    Default Re: Animate line drawing?

    Quote Originally Posted by Egg Bramhill View Post
    No Feklee, for the line animation I wanted to smooth out Acorns example (no criticism, I just thought the example "jaggy" and wanted to see if it could be smoothed).

    I created a very short line (rounded ends and fairly large line width). Cloned, moved and applied a blend. Next created another curvy line. Selected both & fitted blend to curve.

    Arrange/Convert to editable shapes/Ungroup. Deleted the blend curve. With all still selected, as per Acorns instructions, named them all htmlclass=animate.

    This gave a very smooth animation. The donkey one was done in exactly the same manner but it just auto animated unlike Acorns version that required a button press.

    Perhaps Acorn could expand on this?

    I must admit it's fun to play around with but unfortunately my brain won't remember how I did it myself tomorrow!
    To alter the code to autorun (and remove the button trigger), use:
    Code:
    <script type="text/javascript">// <![CDATA[$(document).ready(function(){
    
    
    $('.animate').hide();
    
    
    //$("#button").click(function(){
    
    
    var drawingRate = 20;
    var renderTime = 10;
    
    
    $('.animate').hide();
    $('.animate').each(function(index) {
      $(this).attr('id','step-'+index);
    });
    
    
    $('.animate').each(function(index) {
      setTimeout(function () {
        $("#step-"+index).fadeIn(renderTime);
    }, drawingRate*index);
    });
    
    
    //});
    });
    // ]]>
    </script>
    I have simply remmed (commented) out the button trigger wrapper.

    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. #24
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Animate line drawing?

    Cheers Acorn. Instead of a blend I used a brush in this one & converted the line to shape / ungrouped amd named all the shapes htmlclass=animate as per your instructions.
    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

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

    Default Re: Animate line drawing?

    Quote Originally Posted by Egg Bramhill View Post
    Cheers Acorn. Instead of a blend I used a brush in this one & converted the line to shape / ungrouped amd named all the shapes htmlclass=animate as per your instructions.
    Egg, your use of brushes for us with XDP is a perfect complement to the method.
    Thank you for uncovering it.

    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

 

 

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
  •