How to create an animation in Sketchware?

Here I have used the example of battery charging images to show how we can create a simple animation in Sketchware.

Here is a video of the process:

Step 1.
Download Sketchware App.

Step 2.
Start a new project. Drag and drop a linear and an imageview block in the View area.

Step 3.
Use Image manager to add the images you want to use in animation. I have added seven different images of battery charging icon in this project.

Step 4.
Now in the Logic area add a new timer component. I have added a timer component named animate.

Step 5.
Now in the Logic area, click on onCreate event and add a new block. I have added a block named repeats.

Step 6.
In onCreate activity add:
TimerTask(animate) after 0 ms

Inside TimerTask add
repeats    (The new block you added)

Now select the imageview name and the first image you want to display.

Step 7.
Now define the new block you added. In my project it is repeats.
In the repeats defineFunction event use following blocks:

TimerTask​ (animate) after 400 ms
**TimerTask​ (animate) after 400 ms
****TimerTask​ (animate) after 400 ms
******TimerTask​ (animate) after 400 ms

Use as many TimerTasks and Imageview.. setImage as the number of images you want to add in your animation. And set the images in the sequence you want them to appear in your animation.
Note that it is important to cancel the timer task, either on onStop event (activity no longer visible) or on back pressed. Also, in some instances it may be better to start the timer in onStart event instead of onCreate event.

Step 8.
Save it and run the project. Your new app will show the images you added in the sequence you selected them and keep repeating the process. Thus your animation is ready.


Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Enable Fullscreen for Youtube videos in WebView

Creating a Drawing View in Sketchware

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware