Transition Animations in Sketchware Pro

Transition animations? What are they? 

They are animations that play when 'transitioning' between two activities. Or in simple words, when you go from one activity to another, then animation or movement that will take place to reveal the second activity you are locating to. 

The default Transition Animation used in sketchware is the 'slide left' animation.

Let's get started. 

The First step to do is to go to this Link right now and download the dependancy to the library that we will use to make the transition animations.

You should find something like this 

dependencies {

         implementation 'com.github.mohammadatif:Animatoo:master'

}

Copy it an then open your Sketchware application. Go to your Project where you want to add the transitions. Open the right drawer and scroll down through it to reveal the tab selection 'Local Library'. 

Click it and then tap on the download link and you will see something like this 

.

Select dx and paste this part of the dependancy

com.github.mohammadatif:Animatoo:master

Now wait until library is found, completely downloaded and imported to your project.

In the Second task go back to the github page... i want you to take a look at something.

The fenced part contains the code to initiate the transition process, it is written with an Intent operation that is used to open a new activity and in the process of transitioning to the other activity, it will show the animation. But hey you shouldn't be in a hurry to copy it, instead i will show you how to use it.

Open your Sketchware app (the pro version), then do these :

• Create a New Intent component (name it anything)

• Have a 'Button' view in your activity to use to move to another activity. 

• Go to the button's onclick event and open it's view to add the following logic according to the infographic below;

Use the intent component blocks, like the 'set screen' and 'startActivity, to enable you locate to the other activity. Below these two blocks there is a code that will set the animation once the transition has started. 

Want the code? Here you go:

Animatoo.animateInAndOut(MainActivity.this);

The part of the code (animateInandOut) is an animation style that is contained in the library we added in step 1 above.

Wait.. styles? _Yes, and I have a list of all 15 of these styles from github for you to use.

1: in and out.

2: swipe left.

3: swipe right.

4: split.

5: shrink.

6: card.

7: zoom.

8: fade.

9: spin.

10: diagonal.

11: windmill.

12: slide up.

13: slide down.

14: slide left.

15: slide right.

You can use the 'names' of these styles in your code and replace them everytime you need to change to another animation style when going through different activities.

But how do i do this?... Let me show you.

Animatoo.animateShrink(MainActivity.this);

Animatoo.animateZoom(MainActivity.this);

The first code is for the style (5) and the second (7) as in the list above. 

Can you see the difference in these two codes? Just the animation style Name is different, but all of them follow the attribute 'animate' as you can see above.

I've made all the 15 codes out of all the animation styles from github for which you can use.

Animatoo.animateInAndOut(MainActivity.this);

Animatoo.animateSwipeLeft(MainActivity.this);

Animatoo.animateSwipeRight(MainActivity.this);

Animatoo.animateSplit(MainActivity.this);

Animatoo.animateShrink(MainActivity.this);

Animatoo.animateCard(MainActivity.this);

Animatoo.animateZoom(MainActivity.this);

Animatoo.animateFade(MainActivity.this);

Animatoo.animateSpin(MainActivity.this);

Animatoo.animateDiagonal(MainActivity.this);

Animatoo.animateWindmill(MainActivity.this);

Animatoo.animateSlideUp(MainActivity.this);

Animatoo.animateSlideDown(MainActivity.this);

Animatoo.animateSlideLeft(MainActivity.this);

Animatoo.animateSlideRight(MainActivity.this);

Bye for now but we'll talk later.

I have one request, please Subscribe to my 

Channel and join my telegram group to get updated on what i do and to also join my small community.

⊂(´･◡･⊂ )∘˚˳°