how to reverse animation in IMPACTJS - javascript

i am using ImpactJS to create a game on HTML5 and JS, when a animation is running, is it possble at any frame to reverse the animation frame flow (not flipping) ? I used rewind(), it only gets back to the first frame, is there any reverse()?

If you don't mind being a bit hacky something like this should, in theory, work:
animation.sequence = animation.sequence.reverse(); //Reverse the animation
animation.gotoFrame(animation.length - animation.frame - 1); //Set the frame to be the same frame as it was before.
Basically the sequence property of the ig.Animation() class is what determines the order the frames are run, the update just iterates over them based on a timer. Reverse that and you reverse the animation. You can just use the same code again when you want to reset the animation to be forward.
You may need to also do animation.rewind() instead of gotoFrame() if you want the full reversed animation to play out.
Otherwise you could use 2 animations and use gotoFrame() when switching animations to start the correct frame. Also of note the code above will duplicate one frame of animation, you'd want to remove the -1 (looking at the source I think this will be okay in the case where frame = 0).

No, but you could easily write your own using the plugin system.
Or just create a new animation starting with the enetity.currentAnim.frame and then working backwards through entity.sequence.Then setting the current animation to the new one.

No there isn't reverse that i knew of
but instead you could just create new animation that has reversed sequence
then switch to that animation wherever needed

Related

Pause Velocity animation in the middle

I am trying out Velocity (https://github.com/julianshapiro/velocity) to power some animations (not using CSS animation because I need some more control over it). Say I am translating a block using:
$element.velocity({
translateX: "100vh"
});
Is there are way to stop the animation in the middle of transition in its current position? Thanks!
Since version 1.4 VelocityJS has had pause/resume abilities, the documentation hasn't been updated to match, but simply use "pause" or "resume" as arguments on an element list -
$element.velocity("pause");
and later -
$element.velocity("resume");

Safely disposing stage element in EaselJS (CreateJS)

I have an app with a little animation class. The animation class creates a canvas (using jQuery), creates a createjs.Stage element that uses this canvas, and then this stage element is used to do some animations for a short period of time.
When the animation is done, I want to clean up everything so that a new animation can do the same thing.
When using the Stage class, it's necessary to add some listeners, for instance createjs.Ticker.addEventListener(stage), and you might want to add a DOMEventlistener.
I have tried to figure out how to safely remove the stage and canvas, and so far I have found some information saying that it is necessary to set the stage canvas to null(stage.canvas = null) before setting the stage to null
I also found a method on the stage class:
.removeAllEventListeners()
So here are my questions:
If the canvas and stage is only added in the animation class, is it sufficient to just do like this:
var animation = new Animation();
// do some stuff, call some methods on the animation object, and then:
animation = null;
You will have to manually remove the canvas from the body using jQuery.remove() or something to get rid of the canvas, I guess.
If the above method is not the correct way, will the .removeAllEventListeners() be sufficient to call, when animation is done before setting the stage to null?
I am generally not sure how to make sure that everything is garbage collected, so any advice is welcome!

How to make a "playback" slider with tickmarks html5?

I would like to do something like this in HTML5 where I have something like:
I want to be able to make it so that when I click on the Start button, the tickmark gradually moves to the next tick and increments by 1 per second, clicking on stop stops the behavior, and clicking on start again resumes from the current spot. The box at the top just shows the number of seconds corresponding to the red tracker bar. Assuming the user can specify the number of tickmarks (i.e. could be 20 seconds/tickmarks wide ro 10 seconds/tickmarks wide).
I have seen the JQuery UI Slider http://jqueryui.com/demos/slider/ though it has no tickmarks and am unsure if it really is the best way to go about doing what I described or if there is some better way.
What is the best javascript, jquery, html approach of doing this?
Try this - I felt like doing an exercise!
http://jsfiddle.net/zBKJk/
Only quirk is that the ticks along the bottom don't align exactly with different values of TICKS_ON_BAR. Probably a minor CSS/math issue.
You can change these variables
var TICKS_ON_BAR = 10; // Number of seconds to show on the bar
var TICK_RATE_MS = 100; // Interval to tick at (in milliseconds)
Also added a handy callback function
function timerComplete(){
// Do something further when the timer hits the end of the bar
}
​
Edit: If you want this to run smoothly, you could make the interval lower or (since you specified HTML5) use a linear CSS3 transition to make the changes animate:
http://jsfiddle.net/zBKJk/1/ (a bit glitchy, I just dumped in the example css from w3schools)
Animating this as is with jQuery is glitchy also: http://jsfiddle.net/zBKJk/2/

How to create a smooth animation that eases toward the target

How can I create a smooth animation that eases in toward a target as it changes position?
As this jsFiddle shows, the animation stops or gets blocked during moveTarget() instead of continuing toward the new target coordinates.
What would be the ideal implementation / structure to achieve the desired effect?
Ok, answering my own question here in case anyone else has this problem.
Instead of calculating change (change = finish - begin) each time moveTarget() fires, it is constantly being calculated in onEnterFrame(). So moveTarget() only responsible for getting the new X and Y positions.
This allows the values to ease toward the target.
I also permanently set the time value of the easing function to always be 1:
easeIn(1, begin, change, duration);
The example answer is in this revision jsFiddle: http://jsfiddle.net/dannygarcia/LqP2R/45/

jQuery: No cueing on animation - not working on slideDown or Fades

I'm working on a project with several animations; fades, slides, and regular pixelanimation.
My client hates that jQuery "remembers" how many times you have activated a animation, and therefore continues animating (cueing) when you leave (unHover ..if that's even a word :-P).
I've found a solution, that only works on the pixelanimations, and not on the slideDowns, and fades. It is to set stop() before animation. "stop().animation".
Is there a solution that works everywhere?
Thank you!
.stop() will work, just pass it arguments for those other cases (or in all cases), like this:
.stop(true, true).animate(/* options */);
The second true tells it to jump to the end of the animation, which fixes issues like a slide remembering a half-way-down height and such.

Categories