I have an sprite animation that I would like to play once, finish, and hold on the last frame. I've tried changing the iteration count to 1 and added forward to the fill mode but neither worked. Any information or ideas would help.
I'm using this css3 sprite method. http://jsfiddle.net/simurai/CGmCe/light/
-webkit-animation: crouch 1.2s steps(2, end) 1;
This is what the Fill Mode is for. Add the both keyword to your animation definition and, when the animation stops, it should "freeze" at the last frame and stay that way.
EDIT: Ah, I see what's going on. The animation in that example is actually going one frame too far. You need to change the to keyframe to -450px and lower the number of steps to 9, as well as adding the both keyword.
Note that -ms-animation has never existed, and neither -o-animation or -moz-animation are neede anymore. It's just animation and -webkit-animation.
There is no way to stop the animation on the last frame without some javascript (or you could simply use a sprite animation toolkit.
You need to use javascript to:
Test if style applied to element background-position == 500px. This may or may not be straight forward. Can we fire an event on attribute changed using javascript? If not then you will have to test it repeatedly using a timer
Set the animation-play-state:paused on the above condition using javascript.
OR:
You can find some sprite animation scripts out there which will no doubt allow far more control over the animation.
UPDATE:
To make the tesing of the attribute easier (without the use of setInterval - it uses some nice tricks - you can use a plugin for jQuery.
There is a SO question about mutation events here
Related
I got an iron-ajax call who retrieves x amount of elements that are displayed with a dom-repeat. I would like to for example run scale up animation on each of the elements but I want to do this sequential, i.e wait for the element to finish its animation before drawing the next on.
How do I achieve this in Polymer?
Two ways in which i think this can be achieved using neon-animation are
Use timing object to set delay and duration
Manually play the animations using playAnimation function
I am a beginner with AS3 and I'm having a problem with MovieClip class.
I have a character that move through a simple script that handles collision, sound etc. Everything was working seemlessly so far but when I started adding animation, the character would stop at the end of the animation cycle.
Does someone comfortable with AS3 knows what's wrong here ?
Thanks in advance =)
Inside the Flash IDE, try clicking the instance of your character that's not looping the way you want it to (and this should be from outside the animation itself; from the container of your character), then look inside the Properties tab/window. Near the bottom, there will be a LOOPING header, and inside there you can modify the behaviour.
In case you have any problems with this, or otherwise want to have more control over the animation playhead, you can include script in the form of e.g. gotoAndPlay(1); which you might add at the last frame of your animation cycle to tell Flash to play from the start again. The frame number parameter doesn't have to be 1 of course. You could for example set up a series of animation sequences on a single timeline, and use gotoAndPlay() to have them loop internally, until an event occurs and you direct the playhead to another animation loop inside the same MovieClip.
Usually when play(); is called, an animation is being repeated all the time.
You should seek in your code for stop(); that essentially makes an animation stop, and remove it.
I have an animation that AutoReverses and am interested in getting an event half-way before it completes (I am trying to simulate flipping of a coin, and at half-way point I need to change image from heads to tails). Is there any way to do this?
For general solution to get an event half way would be to put something like an ObjectAnimationUsingKeyFrames and in a DiscreteObjectKeyFrame switch the value of a property like IsGoingUp, then in IsGoingUp property changed handler - react to that change - perhaps by raising an event.
For your specific problem - you can use two ObjectAnimationUsingKeyFrames with DiscreteObjectKeyFrame and just set the Visibility of one image to Collapsed in one of the animations and to Visible in the other one.
Just wondering can you apply some animation on the StageWebView, for example slide in and slide out, i have apply with TweenLite.to() but i don't it accept StageWebView? Is it possible or i just have to be appear visible show and hide?
No it's not possible. You can create the StageWebView, capture a snapshot of the contents and tween this snapshot into place, then once the tween has completed, replace the snapshot with the actual StageWebView.
The function required to do this is
drawViewPortToBitmapData(bitmap:BitmapData):void
I have a problem with the stop function when combined with fadeIn.
My fadeIn is set to 2000 ms, and I introduced the stop() so the animation doesn't build up. However, the problem is that when I use stop(true, true), it skips to the end of the animation. If I use just stop() the effect doesn't work 100% of the time when hovering the target multiple times. ie. if there are two div's with this effect next to each other, and I move the cursor over each really fast, the hover effect doesn't initiate.
Here is the code.
$('#menu li').hover(
//Mousein
function() {
$(this).children('div').stop(true, true).fadeIn(2000);
},
//Mouseout
function() {
$(this).children('div').stop(true, true).fadeOut(2000);
});
Is there a way to make the animation stop/start properly without making it skip to the end?
You don't specify exactly what you mean by "doesn't work 100% of the time." However, if you are using a version of jQuery earlier that 1.7, you might be seeing this known defect:
As of jQuery 1.7, stopping a toggled animation prematurely with .stop() will trigger jQuery's internal effects tracking. In previous versions, calling the .stop() method before a toggled animation was completed would cause the animation to lose track of its state (if jumpToEnd was false). Any subsequent animations would start at a new "half-way" state, sometimes resulting in the element disappearing.
See "Toggling Animations" at .stop() - jQuery API.
Here's what I cooked up. Not really a solution, just a conversation starter. Seems to work OK as long as the mouse is inside the window viewport.
http://jsfiddle.net/mcritz/AwzQ7/