Re: Animate line drawing?
Here's another example of Acorns technique. A bit heavy on graphics but easy to make.
CLICK HERE
Re: Animate line drawing?
Quote:
Originally Posted by
Egg Bramhill
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
Re: Animate line drawing?
Quote:
Originally Posted by
Egg Bramhill
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
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.
Re: Animate line drawing?
Quote:
Originally Posted by
Egg Bramhill
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