CODEWITHSUNDEEP
androidandroid-animationandroid-drawabletransitiondrawable
Nexussim Lements
Nexussim Lements

Reputation: 787

How to create a pokemon evolution kind animation in Android

I want to create a basic "pokemon evolution" animation in my app , something like this: enter image description here

I've been playing with this:

private void evolveAnimation(Pokemon selectedToEvolvePokemon) {
    Drawable backgrounds[] = new Drawable[2];
    Resources res = getResources();
    backgrounds[0] = res.getDrawable(selectedPokemon.getImage(getContext()));
    backgrounds[1] = res.getDrawable(selectedToEvolvePokemon.getImage(getContext()));

    TransitionDrawable crossfader = new TransitionDrawable(backgrounds);

    evolveTransition.setImageDrawable(crossfader);
    crossfader.setCrossFadeEnabled(true);

    crossfader.startTransition(3000); //The animation starts slow
    crossfader.reverseTransition(3000);
    crossfader.startTransition(2000);//It gets faster slow
    crossfader.reverseTransition(2000);
    crossfader.startTransition(1000); //And faster
    crossfader.reverseTransition(1000);


}

However , this is not working as expected in the GIF posted below , how can I fix this?

EDIT:

I've changed the method to this:

 private void doEvolve(TransitionDrawable crossfader, int durationMills) {
    crossfader.startTransition(durationMills);
    Handler h = new Handler(Looper.getMainLooper());
    h.postDelayed(new Runnable() {
        @Override
        public void run() {
            crossfader.reverseTransition(durationMills);
        }
    }, durationMills);
    if (durationMills != 0) {
        doEvolve(crossfader, durationMills - 100);
    } else {
        crossfader.startTransition(0);
    }
}

However , works a bit strange.

Upvotes: 0

Views: 1106

Answers (1)

snachmsm
snachmsm

Reputation: 19243

currently you are starting all transitions at once, they should be queued

for example you may use some Handler and its postDelayed method, e.g.

crossfader.startTransition(3000);

Handler h = new Handler(Looper.getMainLooper());
h.postDelayed(new Runnable() {
        @Override
        public void run() {
            crossfader.reverseTransition(3000);
        }
}, 3000); // will start after startTransition duration

pack this code into some method which will take duration param and some callback informing that start/reverse pattern ended, then call this method again with shorter duration

Upvotes: 1

Related Questions