10 Replies Latest reply on Apr 4, 2017 1:46 PM by Colin Holgate

    Play reverse animation in animate cc

    yvesg76647516

      Hello,

       

      There is in Animate cc a javascript method to play reverse the animation like playReverse() method in edge Animate ?

        • 2. Re: Play reverse animation in animate cc
          nikkisCallaghan Level 1

          I have the same questions. I'm trying to animate an image - one button moves it forwards a step, another button moves it back. I've got the forward steps working, and now I'm trying the reverse steps.

           

          Do I set an event handler on the ticker and in the event listener call this.gotoAndStop(); using the previous frame number each tick?

          Do i need a separate timeline that goes the other way and control which one we're seeing with .hide and .show?

           

          Is there a better way?

          • 3. Re: Play reverse animation in animate cc
            Nipun Asthana Adobe Employee

            Yes, you can listen to the 'tick' event and control the playback as desired.

            Here's a rough example of forward and rewind button operations in a canvas document:

             

             

            if(!this.flag)

            {

              this.flag=1;

              this.stop();

              this.fwd_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

             

              function fl_MouseClickHandler() {

              this.on("tick", ffwd.bind(this));

              }

             

              this.rew_btn.addEventListener("click", fl_MouseClickHandler_2.bind(this));

             

              function fl_MouseClickHandler_2() {

              this.on("tick", rewind.bind(this));

              }

             

              function ffwd(e) {

              this.gotoAndStop(this.currentFrame + 1);

              }

             

              function rewind(e) {

              this.gotoAndStop((this.currentFrame + this.getDuration() - 1) % this.getDuration());

              }

            }

            • 4. Re: Play reverse animation in animate cc
              nikkisCallaghan Level 1

              Thank you!

               

              Would you mind explaining what the .getDuration() bit does?

              • 5. Re: Play reverse animation in animate cc
                Nipun Asthana Adobe Employee

                It just returns the total number of frames on the timeline.

                • 6. Re: Play reverse animation in animate cc
                  nikkisCallaghan Level 1

                  I see! Great. Thank you so much.

                  • 7. Re: Play reverse animation in animate cc
                    Aaron_Sky

                    I have an animation playing and reversing fine using the tick. My issue is I have a button that will bring the timeline to a certain frame. I believe the createjs.Ticker.removeAllEventListeners(); is preventing my button from working. The whole banner seems to freeze. Any ideas?

                    • 8. Re: Play reverse animation in animate cc
                      Colin Holgate MVP & Adobe Community Professional

                      Ticker most likely has a lot of listeners on it that CreateJS is using. Only remove listeners that you added.

                      1 person found this helpful
                      • 9. Re: Play reverse animation in animate cc
                        Aaron_Sky Level 1

                        You happen to have an example of that? I'm basically using the same code above.

                        • 10. Re: Play reverse animation in animate cc
                          Colin Holgate MVP & Adobe Community Professional

                          Nipun's example seemed to be about stepping back a frame. Animating backwards is different.

                           

                          Digressing for a moment, there are times you want to take control of playing forward. In particular, when trying to sync animation to Event sound. The general case is this:

                           

                          • set a listener

                          • in the listener function calculate what frame you should be on

                          • go to and stop on that frame

                           

                          The Javascript for going forward or backward to every frame would be like:

                           

                          var self = this;

                          var goingforward = true

                          var maxframe = 100; // hard coded maximum frame number;

                          var minframe = 10; // hard coded minimum frame number;

                          createjs.Ticker.addEventListener("tick", forwardorbackward);

                          function forwardorbackward() {

                            if (goingfroward) {

                            self.gotoAndStop(Math.min(maxframe, self.currentFrame + 1));

                            } else {

                            self.gotoAndStop(Math.max(minframe, self.currentFrame - 1));

                            }

                          }

                           

                          If you set goingforward to false it would animate backwards.

                           

                          For cases where you want to calculate what frame it should have reached, you could change to this:

                           

                          var self = this;

                          var goingforward = true

                          var maxframe = 100; // hard coded maximum frame number;

                          var minframe = 10; // hard coded minimum frame number;

                          createjs.Ticker.setFPS(24);

                          createjs.Ticker.addEventListener("tick", forwardorbackward);

                          function forwardorbackward() {

                           

                          var now = createjs.Ticker.getTime();

                            var now = createjs.Ticker.getTime();

                            var f = Math.max(minframe,Math.min(maxframe,Math.floor((now - starttime) / 1000 * 24 + minframe)));

                            if (goingfroward) {

                            self.gotoAndStop(Math.min(maxframe, f+1));

                            } else {

                            self.gotoAndStop(Math.max(minframe, f - 1));

                            }

                          }

                           

                          I don't know that anyone has a simple demo example. It would be best if you understood the approach enough to apply it to your own code.

                          1 person found this helpful