Animate line drawing?

[Acorn]

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:

<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