Re: [Dynapi-Help] Chaining animations

[Richard :o]

hi, Regarding  Chained Path Animation and Timelines   Obviously there is no standard for this yet , so I'll tell you how I do it.   Firstly I had to adapt pathanim.js, cause you couldn't start a new animation from it's own eventlistener, because "this.playing = false;" came after the "invokeEvent("pathstop")", so the animation was still playing when we call the new one. after swapping these lines I added the function "stopAnimationNow()", which stops the animation without invoking onpathstop, so the next sequence doesn't start playing automatically. The adapted pathanim.js file is attached. Regarding animation, basically, 1) one object (block1) can have many paths (block1 & path1(line1); path1(line2), path1(line3) etc), 2) or more objects can have their own paths (block1 & path1(line1);  block2 & path2(line2) etc), 3) or more objects can share a path (block1, block2, block3 use path1(line1), path2(line1), path3(line1)). So you must remember if you have several objects using different paths to name the paths, but also the "lines" uniquely.   To chain the first type you can either just add the paths together like Dan suggested, or use the eventlistener set on path1 to check a global variable which is updated on each 'onpathstop'.i.e.:       var passes=0;     var listener1 = new EventListener();     listener.onpathstop = function(e) {         switch(passes){             case 0:             path.playAnimation(linegenerated);passes=1;             break;             case 1:             path.playAnimation(linesquiggle);passes=2;             break;             case 2:            path.playAnimation(circlepath,true);passes=0;             break;        };  };  block.addEventListener(listener);   So when you start the animation, it will play the new line on each "onpathstop". Rotating through 4 animations. Note the animated object is the same one as that the eventlistener is attached to, we are calling ourselves. (which is why the changes in pathanim.js were necessary)   To add the second Type is quite easy, we simply slip in a call to another pathanim object in our sequence, remembering that a "slideTo" is also a pathanim object, we'll add a few of those to keep the layout clear (assume our first object is "block", the second is "block1") :       var passes=0     var listener1 = new EventListener();     listener.onpathstop = function(e) {         switch(passes){             case 0:             path.playAnimation(linegenerated);passes=1             break;             case 1:             path.playAnimation(linesquiggle);passes=2             block1.slideTo(500,300)             break;             case 2:             path.playAnimation(circlepath,true);passes=0             block1.slideTo(300,250)             break;        }  }  block.addEventListener(listener);   So "block1" will slide around in time with "block". Of course "block1" could be a complicated pathanimation as well.   Now these two objects could also share an animation, like this:         var passes=0     var listener1 = new EventListener();     listener.onpathstop = function(e) {         switch(passes){             case 0:             path.playAnimation(linegenerated);passes=1             path1.playAnimation(linesquiggle)             break;             case 1:             path.playAnimation(linesquiggle);passes=2             block1.slideTo(500,300)             break;             case 2:             path.playAnimation(circlepath,true);passes=0             block1.slideTo(300,250)             break;        }  }  block.addEventListener(listener);   As you see "path1"is playing an animation belonging to "path". This animation has not been defined for path1 separately, Basically "block" was attached to "path", which had four animations added, then "block1" was attached to "path1", and automatically has access to the animations defined for "path". Weather this is by design or not I don't know, but as long as you remember to give all "lines" unique names it's quite handy.   another technique is to use the "onpathrun' listener of one object to change another object in step with itself. The advantage is that both animations are perfectly synched, the disadvantage is that you don't let "thread.js" handle memory (or processor speed) allocation anymore, so it's best used for short animations like moving something somewhere, or giving it a certain size, i.e.:       var listener = new EventListener();     listener.onpathrun = function(e) {         if(block1.w<200){              block1.moveBy(10,0);              block1.setWidth(block1.w+10);              }else{              path.stopAnimationNow();        }    }    block.addEventListener(listener);   Here We move and resize "block1" in synch with an animation being done by "block". When "block1" reaches a width of 200 the animations of "path1" AND "path" are stopped. We need the new function stopAnimationNow() here, because the normal stopAnimation() would call the "onpathstop" event, which would start the next animation.   Those were a few ideas using eventlisteners, so the animations are strung together, nicely starting when the last one stops. Another approach is of course the timeline,which fires events after x seconds have passed. DynAPI2 doesn't as yet contain a timeline, but in the meantime you can use something simple like this:       var counter=0     setInterval('callTimeLine()',1000)          function callTimeLine(){         counter++         switch(counter){             case 1:                 block.setBgColor("pink")                 break;             case 5:                 block.setBgColor("red")                 break;             case 30:                 status='You\'ve been here 30 seconds'                 break;         }   }   So "block" changes color after 1 and 5 seconds, and a status message after 30 seconds. I think if you keep the milliseconds reasonably high (i.e. 1000) in setInterval, your memory & processor usage should be reasonable, but I'm not sure about this. Apparently you can do this with a custom Thread object as well, but I haven't used this yet.   I've put up an example of all this here: http://examples.richardinfo.com   I started out replying to a question and ended up with a book,now i'm probably off the mark here and there,so maybe if you guys add your ideas/experiences/improvements we can edit this into a mini tutorial??   Anyway, hope it helps somebody,   Cheers Richard :o     ----- Original Message ----- From: "John Sturgeon" <[EMAIL PROTECTED]> To: <[EMAIL PROTECTED]> Sent: Monday, December 11, 2000 11:56 PM Subject: [Dynapi-Help] Chaining animations > Hello everybody. > > I'm new to the list, and I'm just catching up to all of the capabilities of > DynAPI II.  I have a question about pathanim.js. > > I would like to chain one animation after another to create a sequence of > animations, and I can't seem to figure it out. > > I have looked at the example for pathanim.js, and I figured I could just add > my second animation sequence somewhere in the 'onpathstop' event, but it > doesn't seem to work as expected. > > -- > John Sturgeon <>< > [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> > > > _______________________________________________ > Dynapi-Help mailing list > [EMAIL PROTECTED] > http://lists.sourceforge.net/mailman/listinfo/dynapi-help > ____________________________________________________________ > Get your FREE personal .com domain name and                 > NAMEzero Personal Portal at: http://www.namezero.com.       > For customer service, mailto:[EMAIL PROTECTED]. > >

pathanim.js