Discuss Scratch
- Discussion Forums
- » Help with Scripts
- » Easing
![[RSS Feed]](//cdn.scratch.mit.edu/scratchr2/static/__35b9adb704d6d778f00a893a1b104339__//djangobb_forum/img/feed-icon-small.png "[RSS Feed]")
![[RSS Feed]](http://cdn.scratch.mit.edu/scratchr2/static/__35b9adb704d6d778f00a893a1b104339__//djangobb_forum/img/feed-icon-small.png "[RSS Feed]"){kind=icon}
- CameronProjects
-
Scratcher
12 posts
Easing
I need ease blocks such as this.
Easy:
Medium:
Hard:
Easing makes it easier for scratch animators like me!
And this
And this
And This!!!
How to use:
Easy:
Medium:
Hard:
Easing makes it easier for scratch animators like me!
Last edited by CameronProjects (Aug. 28, 2022 21:33:30)
- RT_Borg
-
Scratcher
1000+ posts
Easing
Hi CameronProjects,
Interesting. I generally knew about the idea of easing in and out, but have read a little more after seeing your message.
Are you saying you've already written the custom blocks to do this, and would like Scratch Team to adopt them?
Or was the post originally in Help with Scripts because you hoped someone might be able to help with these blocks (and the possibility that Scratch Team might add them as built-in blocks is secondary)?
Please let me know if you already have written custom blocks for these effects, so I don't duplicate the effort unnecessarily.
If you'd like custom blocks to do this type of easing for animations, but don't have them… I'm feeling inspired. I have some things to take care of, but I'll probably take a stab at this later in my evening. Once I get some easing curves set up, I think I can adapt the smooth rotation tool I've already written to use them as well.
I might have some questions about how it would be most convenient to use these capabilities.
– RT_Borg
Interesting. I generally knew about the idea of easing in and out, but have read a little more after seeing your message.
Are you saying you've already written the custom blocks to do this, and would like Scratch Team to adopt them?
Or was the post originally in Help with Scripts because you hoped someone might be able to help with these blocks (and the possibility that Scratch Team might add them as built-in blocks is secondary)?
Please let me know if you already have written custom blocks for these effects, so I don't duplicate the effort unnecessarily.
If you'd like custom blocks to do this type of easing for animations, but don't have them… I'm feeling inspired. I have some things to take care of, but I'll probably take a stab at this later in my evening. Once I get some easing curves set up, I think I can adapt the smooth rotation tool I've already written to use them as well.
I might have some questions about how it would be most convenient to use these capabilities.
– RT_Borg
- CameronProjects
-
Scratcher
12 posts
Easing
I didn't actually make them. I wanted those blocks in to help with animators.
- RT_Borg
-
Scratcher
1000+ posts
Easing
I see this got moved back to Help with Scripts. Thank you Scratch Team!
Hi CameronProjects,
I started an Animation Easing Library last night and it's shaping up nicely. (Ease In Out Quint is looking great, for one variable!)
I'm putting a lot of effort into making it really flexible, but still easy to use. (This means a lot of extra complication in the library, to make it better for the library user.)
Later today or tomorrow, I think it will be looking really good. I'll keep you updated here.
By the way, I watched your Match Show Intro. Very cool! The code inside shows me why an Animation Easing Library would be so valuable.
CameronProjects, Can you edit your original post to remove:
It's not unreasonable to want animation to be supported with built in blocks (it would be slightly easier to use than what can be done in a project like this). I doubt it would be included, since it can be done without built-in blocks, but maybe they would consider an Animation Extension. Either way, though, maybe hold off on the Suggestion until we see what can be done without changing Scratch itself.
– RT_Borg
Hi CameronProjects,
I started an Animation Easing Library last night and it's shaping up nicely. (Ease In Out Quint is looking great, for one variable!)
I'm putting a lot of effort into making it really flexible, but still easy to use. (This means a lot of extra complication in the library, to make it better for the library user.)
Later today or tomorrow, I think it will be looking really good. I'll keep you updated here.
By the way, I watched your Match Show Intro. Very cool! The code inside shows me why an Animation Easing Library would be so valuable.
CameronProjects, Can you edit your original post to remove:
So sad that we need to make our own easing ourselves without any blocks to help.I think that's what made Scratch Team move your topic temporarily to the Suggestions forum.
So PLEASE DO ADD THESE BLOCKS SCRATCHTEAM! I WILL FOLLOW YOU, AND WILL NEVER UNFOLLOW!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
It's not unreasonable to want animation to be supported with built in blocks (it would be slightly easier to use than what can be done in a project like this). I doubt it would be included, since it can be done without built-in blocks, but maybe they would consider an Animation Extension. Either way, though, maybe hold off on the Suggestion until we see what can be done without changing Scratch itself.
– RT_Borg
Last edited by RT_Borg (Aug. 26, 2022 22:30:51)
- RT_Borg
-
Scratcher
1000+ posts
Easing
Update
Good progress today!
I can now:
An animation looks like:
Over 4 seconds, it will shift linear across the screen (X), while moving vertically according to the In Out Back curve (Y). That moves the sprite smoothly along what looks like a graph of the standard In Out Back curve, with time as the x axis. I threw in the size animating in lockstep with Y to show a third aspect being animated (and because it looks nice).
I'll probably make a convenience block to prepare x,y together (if they use the same ease curve). But with the flexibility to animate several aspects of the sprite together, I don't think I'll bundle rotation into the same block, as in CameronProjects' original request. It would be handled like SIZE is above, with a Prepare Animation block configuring how you want ROTATE to animate.
The first slot in the custom block is an Animation ID # that acts similarly to a clone-id, to identify what animation you're running. Two animations running at the same time (say in different sprites) need to use distinct Animation ID #s. But multiple aspects of a sprite that you want to start and stop together in a sprite can share an Animation ID # (and use different curves, as shown above).
The Animate block pauses a script during its animation, so you can easily string animations together. For example, if you'd like the sprite above to also reverse everything and finish back at its origin (but returning in 1 second instead of 4) you can do a second animation back to the original values:
Note: We can reuse Animation ID# 1 for the second Animate, because the first is complete before we prepare the second.
Some things I'm thinking about, if you'd like to weigh in…
Rotation
Rotation is a little tricky, because there are two directions. I think animators might sometimes want to specify which direction to turn (CLOCKWISE, COUNTER CLOCKWISE). Maybe there's a default (ROTATE) that turns in the shortest direction to reach the “to” value. But I imagine some animations might want to take the long way around. For that matter, might some rotation animations want to spin more than a complete circle? If so, would it seem natural to supply a large number? Scratch's odd -180 to 180 range isn't set in stone (eg 270 is still the same as -90) so I'm thinking of numbers outside that range meaning you want to rotate more around the circle and end at your equivalent spot in the -180 to 180 range. Any thoughts about how to show this to a user without it being too confusing?
Effects
I've already implemented SIZE and I know I want GHOST, to do fade in/out on a curve. I think BRIGHTNESS and COLOR might be useful too. I'm not sure if anyone would want FISHEYE, WHIRL, PIXELATE, or MOSAIC on an ease curve.
I'll also support VOLUME, since it would be nice to fade music in and out along with the backdrop in a scene change. (I don't see a use for PITCH, but if someone would find it useful, it would be easy to add.)
It would also be pretty easy to add COSTUMES (animate between costumes on a curve) but I'm not sure whether this would be useful to animators on Scratch. (But maybe. I'm picturing an animation of a person running, and X changes with a nice In Cubic to speed up as they get going. The costumes could switch faster with the same In Cubic, so it appears they're running faster as they move across the screen more quickly.)
Pausing vs Non-pausing?
Right now (see the above example) once you prepare the aspects of an animation and say Animate, the script pauses on the Animate block while the animation takes place (like the way glide blocks work). I think that's the right way to handle it (it took extra work to do that) but are there times animators need to not pause, and just continue the script? (A non-pausing Animate block)
Duration
When I was first playing with this, I tried a couple things where one aspect had a duration that was shorter than another. It seemed useful for effects like getting to an x,y destination a little earlier than you finish changing size or rotating or ghosting in/out. But I'm not an animator, so I'm not sure. The other option would be to tie all the durations together and specify the uniform duration in the final Animate block.
To Do
If nothing unexpected comes up, I'll probably do a preview release in another day or so.
– RT_Borg
Good progress today!
I can now:
- Choose from a (small) selection of easing curves.
- Apply animation curves to multiple sprites/clones simultaneously.
- Apply different curves to different aspects of a sprite (x, y, size).
An animation looks like:
Over 4 seconds, it will shift linear across the screen (X), while moving vertically according to the In Out Back curve (Y). That moves the sprite smoothly along what looks like a graph of the standard In Out Back curve, with time as the x axis. I threw in the size animating in lockstep with Y to show a third aspect being animated (and because it looks nice).
I'll probably make a convenience block to prepare x,y together (if they use the same ease curve). But with the flexibility to animate several aspects of the sprite together, I don't think I'll bundle rotation into the same block, as in CameronProjects' original request. It would be handled like SIZE is above, with a Prepare Animation block configuring how you want ROTATE to animate.
The first slot in the custom block is an Animation ID # that acts similarly to a clone-id, to identify what animation you're running. Two animations running at the same time (say in different sprites) need to use distinct Animation ID #s. But multiple aspects of a sprite that you want to start and stop together in a sprite can share an Animation ID # (and use different curves, as shown above).
The Animate block pauses a script during its animation, so you can easily string animations together. For example, if you'd like the sprite above to also reverse everything and finish back at its origin (but returning in 1 second instead of 4) you can do a second animation back to the original values:
Note: We can reuse Animation ID# 1 for the second Animate, because the first is complete before we prepare the second.
Some things I'm thinking about, if you'd like to weigh in…
Rotation
Rotation is a little tricky, because there are two directions. I think animators might sometimes want to specify which direction to turn (CLOCKWISE, COUNTER CLOCKWISE). Maybe there's a default (ROTATE) that turns in the shortest direction to reach the “to” value. But I imagine some animations might want to take the long way around. For that matter, might some rotation animations want to spin more than a complete circle? If so, would it seem natural to supply a large number? Scratch's odd -180 to 180 range isn't set in stone (eg 270 is still the same as -90) so I'm thinking of numbers outside that range meaning you want to rotate more around the circle and end at your equivalent spot in the -180 to 180 range. Any thoughts about how to show this to a user without it being too confusing?
Effects
I've already implemented SIZE and I know I want GHOST, to do fade in/out on a curve. I think BRIGHTNESS and COLOR might be useful too. I'm not sure if anyone would want FISHEYE, WHIRL, PIXELATE, or MOSAIC on an ease curve.
I'll also support VOLUME, since it would be nice to fade music in and out along with the backdrop in a scene change. (I don't see a use for PITCH, but if someone would find it useful, it would be easy to add.)
It would also be pretty easy to add COSTUMES (animate between costumes on a curve) but I'm not sure whether this would be useful to animators on Scratch. (But maybe. I'm picturing an animation of a person running, and X changes with a nice In Cubic to speed up as they get going. The costumes could switch faster with the same In Cubic, so it appears they're running faster as they move across the screen more quickly.)
Pausing vs Non-pausing?
Right now (see the above example) once you prepare the aspects of an animation and say Animate, the script pauses on the Animate block while the animation takes place (like the way glide blocks work). I think that's the right way to handle it (it took extra work to do that) but are there times animators need to not pause, and just continue the script? (A non-pausing Animate block)
Duration
When I was first playing with this, I tried a couple things where one aspect had a duration that was shorter than another. It seemed useful for effects like getting to an x,y destination a little earlier than you finish changing size or rotating or ghosting in/out. But I'm not an animator, so I'm not sure. The other option would be to tie all the durations together and specify the uniform duration in the final Animate block.
To Do
- More easing curves. I just switched from closed form hard-coded curve equations to solving cubic bézier curves. What that means in practical terms is it will be very quick to extend the easing toolkit to the whole standard range of easing curves.
- Other curves. Bounces and elastics are a little different, but shouldn't be hard.
- More effects. As I mentioned above, including ROTATION, which was in the initial request.
- Cleanup. Wiping a little “work in progress” grime off some internal naming choices, no longer used blocks/variables, etc. Also collapsing/inlining a couple scripts that need to be dragged into each animated sprite. They're better understood split into separate custom blocks, but it will be easier for users to drag custom 3 blocks into a sprite than 5.
If nothing unexpected comes up, I'll probably do a preview release in another day or so.
– RT_Borg
Last edited by RT_Borg (Aug. 28, 2022 20:32:53)
- RT_Borg
-
Scratcher
1000+ posts
Easing
A preview version of the Animation Toolkit is pretty much ready, with all the standard ease curves, except bounce and elastic (which will be added shortly). Rotation is working nicely for clockwise and counterclockwise turns. I haven't done “shortest turn” rotation yet (and not sure if it's needed).
Since I haven't heard back yet, I'll take another day and put a little demo together. (But still interested in feedback on what I wrote before that.)
– RT_Borg
Since I haven't heard back yet, I'll take another day and put a little demo together. (But still interested in feedback on what I wrote before that.)
– RT_Borg
- CameronProjects
-
Scratcher
12 posts
Easing
The back is kinda like this.
https://scratch.mit.edu/projects/726049464/
I added some more easings including a custom one
https://scratch.mit.edu/projects/726049464/
I added some more easings including a custom one
Last edited by CameronProjects (Aug. 29, 2022 15:43:04)
- RT_Borg
-
Scratcher
1000+ posts
Easing
Update
Here's an early preview:
PREVIEW Animation Ease Toolkit v0.1
https://scratch.mit.edu/projects/726326806/
Please do not distribute this yet. The user blocks will still change at least a little, so let's not have old versions floating around causing confusion.
CameronProjects, if you hit the green flag, it'll play a 5-part demo. The first part shows exactly the “Hard” item in your original post.
The Animator sprite runs the show. An animation project needs one animation sprite (which the user probably won't need to touch). The sprites being animated need a few custom blocks copied in (currently 5, but it will be 3).
To see how the demos work, ignore the custom blocks in the demo sprites and look for the ones started by “when I receive Demo…” scripts.
To Do
– RT_Borg
- Preview and simple demo ready.
- Added bounce curves. (Elastic still to come.)
- Several new effects (as I needed them for the demos) including color and pen color.
Here's an early preview:
PREVIEW Animation Ease Toolkit v0.1
https://scratch.mit.edu/projects/726326806/
Please do not distribute this yet. The user blocks will still change at least a little, so let's not have old versions floating around causing confusion.
CameronProjects, if you hit the green flag, it'll play a 5-part demo. The first part shows exactly the “Hard” item in your original post.
The Animator sprite runs the show. An animation project needs one animation sprite (which the user probably won't need to touch). The sprites being animated need a few custom blocks copied in (currently 5, but it will be 3).
To see how the demos work, ignore the custom blocks in the demo sprites and look for the ones started by “when I receive Demo…” scripts.
To Do
- Final Interface. Pretty convenient, even without extra convenience blocks. But still maybe some changes to come (eg., the question of separate durations per aspect in an animation vs extra animations.) Internally this could lead to a change in the table format. Should be more tolerant on curve names (user should be able to write “In Out Exp”, “InOutExp”, “Exp In Out”, “ExpInOut”.
- Other curves. Elastics, at least. Support custom bezier curves. Reverse curves.
- Custom Tickers. For animating things that aren't just built in (like motion and effects). Eg., using a non-linear curve to ramp up difficulty in a game over time.
- More effects. As I mentioned above, including ROTATION, which was in the initial request.
- Better Async. Clones work pretty well. Broadcast/receive for parallel animations within a sprite can currently steps on shared variables during prepare phase. Also need at least a good idiomatic way to await asynchronous animations completing.
- Animation Interactions. At least things like "Stop Animation when touching x.
- Cleanup. Wiping a little “work in progress” grime off. Haven't done most of this.
- Studio. For projects based on the toolkit.
- Tutorial. It's easy to use, but not obvious without being shown.
– RT_Borg
- Zapfast
-
Scratcher
18 posts
Easing
I get the way that the custom blocks are going to be made, but what about the defines???
Btw griffpatch actually made an easing effect.
Btw griffpatch actually made an easing effect.
Last edited by Zapfast (Oct. 16, 2023 20:48:03)
- blotre
-
Scratcher
33 posts
Easing
I get the way that the custom blocks are going to be made, but what about the defines???Wouldn't that look like this?:
Btw griffpatch actually made an easing effect.
- Zapfast
-
Scratcher
18 posts
Easing
I get the way that the custom blocks are going to be made, but what about the defines???I know, I'm kinda dog poop at making scratchblocks in forums.
Btw griffpatch actually made an easing effect.
Wouldn't that look like this?:
- Discussion Forums
- » Help with Scripts
-
» Easing