Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: YUI - Animation - To & Back

Expand Messages
  • Matt Sweeney
    Hey Jack, ... Ahh yes, good point. I forgot to unsubscribe the callback. Should do something more like: var test1 = new YAHOO.util.Anim( test1 , { width: {
    Message 1 of 14 , Aug 30, 2006
    • 0 Attachment
      Hey Jack,

      I see two things:
      1) Because of the callbacks when doing multiple animations, the default way is more prone to programmer error. For example, the code you posted creates an infinite loop. 

      Ahh yes, good point.  I forgot to unsubscribe the callback.  Should do something  more like:
      var test1 = new YAHOO.util.Anim('test1',
         {
           width: { to: 150 }, height: { to: 150 },
          top: { to: 150 }, left: { to: 150 }
          }
      );

      var fadeOut = function() {
           test1.attributes = {opacity: {to: 0}};
           setTimeout( function() {test1.animate()}, 1000);
           test1.onComplete.unsubscribe(fadeOut);
      };

      test1.onComplete.subscribe(fadeOut);

      YAHOO.util.Event.on('test1', 'click', function(){test1.animate();});


      This does highlight the need to have a simpler way to hook in a "one-time" callback.   That doesn't necessarily require more abstraction to implement though.

      2) I can look at my code and know exactly what is happening instantly. The code flows exactly like it executes. While your example is pretty easy to figure out, it does take a moment to follow the different paths. When you have alot of animations (say you are writing a game like Dave) or you need to animate a bunch of different elements along the same timeline, ! then the benefits of using my extensions are more readily apparent.
      Only because you know how your extensions work.  If I was to try and implement this with your extensions, I may end up mixing up the order of the args in "setBound", etc.  I know how "setTimeout" works, but wouldn't necessarily assume that "pause" does the same.  I'm sure the extra level of abstraction comes in handy at some point, but in this case isn't really necessary.  There are other advantages of using the callback model that you don't get with a purely declarative approach.

      I'm not trying to sell anything. All my code is open source. I only come in here to try to offer help to people who are having problems with their javascript code. If I think something I have already done will help them with what they are doing, I point them in that direction.
      I'm sure that's the case.  I'm not implying you have any ulterior motives, just answering the question "How can I do this with the YUI Animation library".  Exposing the callbacks and other animation properties is the best way to do this.  If people learn more about how javascript works along the way (using timers, scoping, etc.), that's a bonus.

      Matt

      Jack Slocum wrote:

      > the message here is that it
      > is a simple process to modify an Anim's attributes (and other
      > properties) at runtime (without 3rd party extensions).

      I agree 100%.

      But when I look at this:

      var test1 = new YAHOO.util.Anim('test1', 
       
       {
           width: { to: 150 }, height: { to: 150 },
          top: { to: 150 }, left: { to: 150 }
          }
      );
       
      test1.onComplete.subscribe(function() {
              test1.attributes = {opacity: {to: 0}};
              setTimeout( function() {test1.animate()}, 1000);
      });

      YAHOO.util.Event.on('test1', 'click', function(){
              test1.animate();
      });

      and compare it to this:

      var test1 = new YAHOO.ext.Actor('test1', null, true);
      test1.on('click', function(){
              test1.setBounds(150, 150, 150, 150, true);
              test1.pause(1);
              test1.hide(true);
              test1.play();
      });

      I see two things:
      1) Because of the callbacks when doing multiple animations, the default way is more prone to programmer error. For example, the code you posted creates an infinite loop. 

      2) I can look at my code and know exactly what is happening instantly. The code flows exactly like it executes. While your example is pretty easy to figure out, it does take a moment to follow the different paths. When you have alot of animations (say you are writing a game like Dave) or you need to animate a bunch of different elements along the same timeline, ! then the benefits of using my extensions are more readily apparent.

      I'm not trying to sell anything. All my code is open source. I only come in here to try to offer help to people who are having problems with their javascript code. If I think something I have already done will help them with what they are doing, I point them in that direction.

       ---
      Jack Slocum
      Yahoo! UI - Beyond the Examples
      http://www.jackslocum.com/yui


    Your message has been successfully submitted and would be delivered to recipients shortly.