Finishing up the animation

Yesterday, we got mostly through the animations on the "Celebration" display for going to a next level. But, there are still a couple items short of completion. First, we want to try out the "spinning" animation on the title text. Also, I've noticed that the click on the display to finish no longer works.

There are two way to go with the latter item - I could speed up the fade-out, or I could just make sure it works and finishes on a touch.

Oh, yeah, and let's not forget the pause:



@Override
protected void onPause() {
super.onPause();

LinearLayout layout = (LinearLayout) findViewById(R.id.layout_root);
for (int i = 0; i < layout.getChildCount(); i++) {
View view = (View) layout.getChildAt(i);
view.clearAnimation();
}
}





Ok, why does the touch no longer work? Here's why:


@Override
public boolean onTouch(View view, MotionEvent arg1) {

// finish();
return false;
}

But, before I uncomment the finish, I want to speed up the fade out and see if it's tolerable.

Change this:


android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="5000">


To this:


android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="2000">

Ok, but, really, I neet to uncomment the finish.

Ok. Now, let's get that spin effect going.


Let's try this code:

// animation
Animation spinin = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
nextLevelText.setAnimation(spinin);


Let's check it out...


Hmmm...not bad at all. The only problem is, as spins it it overlaps the image which is alos concurrently fading in. I'll use the offset initially suggested, and so how it work:



xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:startOffset="2000"
android:duration="2500"
>




Ah, perfect. It spins in, then displays the image, and then fades out. Ah, night quite. I think the title and and attribution need to be faded in along with the image.


It looks great, but - all of a sudden, after the fade, the image pops into view momentarily, and then disappear. Owch.

I think it must have something to do with the timing. Let's back out the changes to the initial animation of the "congrats" text to spinin.

Keep backing out...

Keep backing out...

Ok, I got the point where the image is showing, then disappearing quickly.

Ok, it's finishing quickly because the timeout counter is kicking in and calling finish. That was why I had taken the finish out of the countdown timer.

Now I thing what we did was put the fade out in the timer. Let's put that back in.

I'm kind of in a funk out right now. It's a nightmare - almost done, a solid day's work at least - and back to square one.

After taking a break, I've kind of realized that the big difference was when I added this:

android:startOffset="2000"

If it pull it out, than, the displays fades as normal.

Possibly, the fade out needs an offset as well. Well, actually, it's kicked off by the timer, which doesn't start until 5 seconds in.

But, what were the numbers?

Even if I put the fadeout timer to 10, it still pops up the screen. Maybe these offsets somehow see each other?

No - it still reappears.

If I get red of the offset both in the fade in and fade-out, I don't get the reappearance...

No, I'm still getting it! It's like the thing that wouldn't die, one of those horror movies where that dead psycho's eyes suddenly pop open. Ok, how about a clean?

Wait, is there a finish? yes. Let me comment it out...

Doh. Here's the problem. Why didn't I notice this before?



xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="2500">






This is in the fade_out.xml file. Pop quiz what's the bug? You got it. The from and to alphas have some gotten reversed.

Yes. Ok, I'm going to pop back in the finalized version of the code which I kept a copy of before I starting all backing stuff out.

Yes. And now just add back in the offset.



xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:startOffset="2000"
android:duration="2000">




Between the 2 seconds for the title to spin in, and the two seconds duration and the 5 second timer, and the two seconds to fade out, the whole thing will take seven seconds - but the user can kill it any time.

Let's see:

It *almost* works - but for some reason the title text re-appears at the last second. This is soooo aggravating!
What's keeping it alive? I doesn't have anything to do with the animation on it, because when I comment it out, the problem still happens. The only thing I can think of is all the other elements are faded in and it's not, at least with the same file. Let's fade it in too, and see what happens.

Nope - it still reappears at the end. Sheesh. Ok, what I'm going to do is not clear the animations on the onPause, which I doubt is the problem.

Wow - that did it. Unbelievable. Ok, I'm leaving it out, I don't care.

Ok, put back the spin - and everything works. Man, I was hoping that would take maybe an hour, and it's been three. It was partially my own doing, by reversing the alphas. But, you have to be careful when you vary from the script a book is following. In this case, the book was showing a splash screen and wasn't doing an effect that could be affected by the finish.

Ok, that's a wrap for now. Back soon