This website is not actively maintained anymore. Information might be outdated or incorrect.

For more and newer tutorials, check out the Tutorials section of the Scratch Wiki in your preferred language.

All the content of this website can be reused under specific conditions, as specified by the license at the bottom of each post. Please do reuse, improve and share it! Please notify locness3@e.email if you do so, so I can add a link to it. You may also reach out for any question regarding the website and reuse (no Scratch questions, please - ask on Discuss Scratch or another Scratch-related thing instead)

How to make smooth animations in Scratch, post image

How to make smooth animations in Scratch

TutorialsTutorials/Polishing and Small Touches
Easy
smoothanimationtransitionmovementuiuser interface
delnyn
May 6, 2020

Introduction

In Scratch, the most common way to grow a sprite is using change size.

change size by ()

And the most common way to move a sprite is using glide.

glide () secs to x:() y:()

Using these methods for animations like clicking a button or showing a logo is not really good.
Here, i use another method, that I call “smooth animation”.
In short, a “smooth animation” is when the sprite’s movement speed varies in the animation, which is better than one of the “animating” methods showed before. Here we’ll see how to make a smooth animation for changing the size of a sprite.

Explaining by an example : changing size

First, let’s set the beginning size.
Then, we open a loop where, at each iteration, we make our sprite grow by the size you want to get minus your current size, divided by your speed.

repeat (100)
change size by (((endSize) - (size)) * (speed)) 
end

Important :

  • The lower is the speed, the more you have to repeat the loop.
  • The speed should be a number between 0 and 1.

Why do we do this ?
Doing the current size minus the wanted size will do the difference between these two. Knowing that difference, we multiply it by a non integer number, so we divide it, to split the difference in mutliple parts, who get smaller as the animation moves on; that’s what makes the “smooth” effect.

Here is an example :

set size to (50)%
repeat (100)
change size by (((200) - (size)) * (0.3)) 
end

Do what you want !

You can now change that code to use it for something else, like the position.

go to x: (beginX) y: (beginY)
repeat (100)
change x by (((endX) - (x position)) * (speed)) 
change Y by (((endY) - (y position)) * (speed)) 
end

Now have fun with that !
Thank you for reading this article :3

Article written by delnyn.

Creative Commons License
How to make smooth animations in Scratch by delnyn is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.