I want to do some sophisticated animations. But I only know how to animate a block of changes. Is there a way to chain animations, so that I could for example make changes A -> B -> C -> D -> E -> F (and so on), while the core-animation waits until each animation has finished and then proceeds to the next one?
In particular, I want to do this: I have an UIImageView that shows a cube.
Phase 1) Cube is flat on the floor
Phase 2) Cube rotates slightly to left, while the rotation origin is in bottom left.
Phase 3) Cube rotates slightly to right, while the rotation origin is in the bottom right.
These phases repeat 10 times, and stop at Phase 1). Also, the wiggling becomes lesser with time.
I know how to animate ONE change in a block, but how could I do such a repeating-thing with some sophisticated code in between? It's not the same thing over time. It changes, since the wiggling becomes lesser and lesser until it stops.
Assuming you're using UIView animation...
You can provide an animation 'stopped' method that gets called when an animation is actually finished (check out setAnimationDelegate). So you can have an array of animations queued up and ready to go. Set the delegate then kick off the first animation. When it ends it calls the setAnimationDidStopSelector method (making sure to check the finished flag to make sure it's really done and not just paused). You can also pass along an animation context which could be the index in your queue of animations. It can also be a data structure that contains counters so you can adjust the animation values through each cycle.
So then it's just a matter of waiting for one to be done then kicking off the next one taken off the queue.
The same method applies if you're using other types of animation. You just need to set up your data structures so it knows what to do after each one ends.
You'll need to setup an animation delegate inside of your animation blocks. See setAnimationDelegate in the UIView documentation for all the details.
In essence your delegate can be notified whenever an animation ends. Use the context parameter to determine what step in your animation is currently ending (Phase 1, Phase 2, etc)
This strategy should allow you to chain together as many animation blocks as you want.
I think the answer to your question is that you need to get more specification on what you want to do. You clearly have an idea in mind, but more specification of details will help you answer your own question.
Related
I'm just starting to play about in Scratch...
I seem to have a sprite of a cat with two 'costumes', which I guess are like frames.
I made this sequence:
...but when I click the green flag the cat moves to the right but the costumes don't switch.
If I make a simpler sequence:
...and manually change the costume in the drop-down then the costume does change.
What is the limitation here?
This is by design. By default, loops have a built-in delay of about 1/30 second. (There are ways to eliminate that delay, but that is off-topic here.) This was done to help inexperienced programmers witness the effect of a loop; possibly also to make execution speed more consistent (regardless of client's CPU power).
In your case, that means costume2 will be visible for 1/30 second before switching back to costume1.
Costume1 on the other hand, is instantly followed up by costume2.
Consequently, you will only see costume2.
There are various ways to fix that.
Change your script to repeat 5 { move 10 steps; next costume; } This gives both costumes an implicit 1/30 second delay. If this is still too short, add a delay (wait ... seconds). Note: next costume wraps around, so assuming the sprite has 2 costumes, it will flip back and forth between costume1 and costume2.
Too jerky? Use glide ... secs to ... instead of 'move and wait'.
Or just take smaller steps; swap costume once every few steps.
Make two separate scripts running in parallel, one for the movement, the other for switching costumes. That makes it easier to specify a different delay for each.
Try using a [wait] block: the change between costumes may be so fast that it seems like it is walking without changing costumes...
I need to create 2 animations,
one is of an object going from point A to point B at a constant velocity.
the other is of an object starting from point A but with a gradually decreasing velocity as it reaches point B until it comes to a stop.
I tried decreasing the animation speed every second to achieve this result with no luck.
Any ideas?
As you may have noticed when you work with animation in Unity there is no such thing as changing the velocity of an object. What you need to do is give your object an Animator and create a new Animation.
Then on the animation timeline press the red dot (record button) and then place your object on point A.
Next, on the time line you want to select the exact second that you want your object to come to a stop and after that move the object on point B.
Now, the more seconds there are in between the 2 keys, the more time it's going to take for the object to travel.
To make it gradually slower instead of it just travelling slowly:
On the animation panel you will see 2 tabs. Dopesheet and Curves. Hit Curves and play around with them till you have a satisfing result.
Documentation on using Curves
I have a Flare file with 3 animations contained within it, all in the same artboard. I understand that when switching between animations, Flare will mix the animations together by default, and that playing one animation will not reset the relevant nodes values back to what they were on frame 0 in the editor. That is the behavior I would like to achieve: when playing a new animation, I would like the previous animation to stop completely (don't mix them at all) and for the incoming animation to start at the very beginning with all its default values.
The use case is this:
Play an animation where, say, the opacity of a shape goes down to zero
Play a different animation that uses the shape from above, but in the Flare editor its opacity is 1 at the start of the animation
Desired result: the new animation resets the opacity of the shape and then begins and plays like normal
Actual result: since the previous animation changed the shape's opacity, the new animation will use the shape how it is instead of how it was created in the editor
For my question as explained on GitHub you can look at the end of the thread on this issue (has gifs): https://github.com/2d-inc/Flare-Flutter/issues/14
In the above thread, Luigi Rosso mentions "re-instancing" the artboard. Does anyone know what he means by this and how to do it? I have tried several methods of doing this such as the makeInstance methods found on classes such as FlutterActorArtboard, ActorNode and some others (there are a few variants of the makeInstance method but they are all similarly named and return a new artboard. However, I had no luck with replacing the current instance of my artboard in a FlareController implementation so far.
I have also tried to manually loop through all of the ActorNodes of the artboard and first saving their initial values and then copying the saved values to the artboard every time a new animation is played, but this seemed to break things pretty badly (the animation was unrecognizable and just didn't play correctly after that, so I must have done something wrong. Or I'm resetting the wrong values).
Any help is appreciated, thanks!
For playing a different animation on a shape and resetting its opacity, you can access the opacity of the node at runtime with:
ActorNode myNode = _artboard.getNode("nodeString");
myNode.opacity = 0.00;
As outlined here in the manual.
More simply, in the new animation, you can set a keyframe in the Rive/Flare editor for the opacity to be 1 at the start of the new animation, so that when it plays the animation from the beginning its opacity will be reset to 1.
For playing one animation, then overriding it completely when the next animation plays you can extend the FlareController and create a custom animation controller to do this in the advance method.
Here's a quick and dirty example (not best practices) to give you an idea of using advance:
https://gist.github.com/she-who-codes/85d8f0da97abfc3ecc43b1cb470e9c29
https://gist.github.com/she-who-codes/ce633204cd2d4babfe9a5b54e34ca63d
The default method of animation is to have an independent timer set to execute at the same frequency as the frame rate. This is not what I'm looking for because it provides no guarantee the event is actually executed at the right time. The lack of synchronisation with the actual frame drawing leads to occasional animation jitters. The obvious solution is to have a function run once for every frame, but I can't find a way to do that. on_draw() only runs when I press a key on the keyboard. Can I get on_draw() to run once per frame, synchronised with the frame drawing?
The way to do this is to use pyglet.clock.schedule(update), making sure vsync is enabled (which it is by default). This ensures on_draw() is run once per frame. The update function passed to pyglet.clock.schedule() doesn't even need to do anything. It can just be blank. on_draw() is now being executed once per frame draw, so there's no point in having separate functions both of which are being executed once per frame drawing. It would have been a lot nicer if there were just an option somewhere in the Window class saying on_draw() should be drawn once per second, but at least it's working now.
I'm still getting bad tearing, but that's a bug in pyglet on my platform or system. There wasn't supposed to be any tearing.
I have a game where I use a lot of SKActions to deliver the desired game logic.
For example, instead of setting the zRotation of a sprite to a value, I would use runAction(SKAction.rotateTo(/* angle here */, duration: 0.0) instead.
I make calls like this in update, and in touchesMoved. Thus this could mean hundreds of these calls, sometimes nested with groups of other actions.
Am I incurring significant overhead relative to directly setting the zRotation property?
Never use SKActions for real-time motion. Instead you should either set the zRotation directly or set the necessary angular velocity each frame. In your case the update method and touchesMoved method are both bad to use for SKActions because they can run 30-60 times a second.
SKActions do generate significant overhead. Here is a quote from Apple's documentation:
When You Shouldn’t Use Actions
Although actions are efficient, there
is a cost to creating and executing them. If you are making changes to
a node’s properties in every frame of animation and those changes need
to be recomputed in each frame, you are better off making the changes
to the node directly and not using actions to do so. For more
information on where you might do this in your game, see Advanced
Scene Processing.
Source
You can see an example of using real-time motion instead of SKActions in my answer here
You should not call a SKAction in the update method as it is called 60 times a second. Instead, use a event based trigger which in turn calls the SKAction. The touchesMoved is a good example of that. You can also use a completion method block to signal for a new SKAction upon completion of the current action.