How to create Motion Splash Screen in Android?

Question

I saw a link that is designed by designer for mobile application. i want to achieve this kind of effect or animation i don't know what to say exactly.

Please guide me how can i achieve exact same effect in android application splash screen.

Do i need gif image of that and display in webview ?

or any kind of drawable-animation ?

Any kind of suggestions and help will be appreciable.

Thanks in Advance.

Answer 1

You can use AnimatorSet

This class plays a set of Animator objects in the specified order. Animations can be set up to play together, in sequence, or after a specified delay.

There are two different approaches to adding animations to a AnimatorSet: either the playTogether() or playSequentially() methods can be called to add a set of animations all at once, or the play(Animator) can be used in conjunction with methods in the Builder class to add animations one by one.

It is possible to set up a AnimatorSet with circular dependencies between its animations. For example, an animation a1 could be set up to start before animation a2, a2 before a3, and a3 before a1. The results of this configuration are undefined, but will typically result in none of the affected animations being played. Because of this (and because circular dependencies do not make logical sense anyway), circular dependencies should be avoided, and the dependency flow of animations should only be in one direction.

You can check Below link for demp case

1. Digest Splash for Android

Answer 2

What is to be done is that on the image you've provided all of those are just single images that are transitioning from one to other after certain timeout time.

You will need to have loads of images for each frame of transition and then move them accordingly.

Its is a bit like creating boot-animations on android. Each image will represent a single frame of the total animation.

For animating images, try this (basically uses alpha for transition)

ImageView demoImage = (ImageView) findViewById(R.id.DemoImage);
int imagesToShow[] = { R.drawable.image1, R.drawable.image2,R.drawable.image3 };
animate(demoImage, imagesToShow, 0,false);  



private void animate(final ImageView imageView, final int images[], final int imageIndex, final boolean forever) {

//imageView <-- The View which displays the images
//images[] <-- Holds R references to the images to display
//imageIndex <-- index of the first image to show in images[] 
//forever <-- If equals true then after the last image it starts all over again with the first image resulting in an infinite loop. You have been warned.

int fadeInDuration = 500; // Configure time values here
int timeBetween = 3000;
int fadeOutDuration = 1000;

imageView.setVisibility(View.INVISIBLE);    //Visible or invisible by default - this will apply when the animation ends
imageView.setImageResource(images[imageIndex]);

Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); // add this
fadeIn.setDuration(fadeInDuration);

Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator()); // and this
fadeOut.setStartOffset(fadeInDuration + timeBetween);
fadeOut.setDuration(fadeOutDuration);

AnimationSet animation = new AnimationSet(false); // change to false
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
animation.setRepeatCount(1);
imageView.setAnimation(animation);

animation.setAnimationListener(new AnimationListener() {
    public void onAnimationEnd(Animation animation) {
        if (images.length - 1 > imageIndex) {
            animate(imageView, images, imageIndex + 1,forever); //Calls itself until it gets to the end of the array
        }
        else {
            if (forever == true){
            animate(imageView, images, 0,forever);  //Calls itself to start the animation all over again in a loop if forever = true
            }
        }
    }
    public void onAnimationRepeat(Animation animation) {
        // TODO Auto-generated method stub
    }
    public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub
    }
});

}

For the last part of the reveal activity animation, see this SO answer https://stackoverflow.com/a/32199671/4626943