I'm trying to chain together 3 "exploding" text animations in textView to show 3 words sequentially: "Ready", "Set" & "Go!". By "exploding", I mean text size goes from 0.25f of default to 1.00f of default while alpha=0 to alpha=1.
Problem: I'm able to get the first word "Ready" to "explode" as intended but the next word "Set" does not "explode" ie does not change text size at all (only alpha part of animation works).
My MainActivity.java is as follows. I have not put in the third "explosion" since if I could get the 2nd one to work it is a matter of copy & paste.
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
public void actionExplode(View view) {
// .setTextSize() defaults to sp but .getTextSize() defaults to px http://stackoverflow.com/a/3687385/1827488
String textReady = "Ready";
final String textSet = "Set";
final String textGo = "Go!";
final TextView questionDisplay = (TextView) findViewById(R.id.textView);
final float textSizePx = questionDisplay.getTextSize();
Log.i("actionExplode", "textSizePx=" + textSizePx);
final float scaleSmall = 0.25f;
float scaleFull = 1.0f;
final float fadeOut = 0f;
float fadeIn = 1f;
questionDisplay.setAlpha(fadeOut);
questionDisplay.setText(textReady);
questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizePx * scaleSmall);
Log.i("actionExplode", ".getTextSize()=" + questionDisplay.getTextSize());
int animateDurationReadySetGo = 1000;
int animateDurationFudge = 100;
ObjectAnimator animateReadyFadeIn = ObjectAnimator.ofFloat(questionDisplay, "alpha", fadeOut, fadeIn);
animateReadyFadeIn.setDuration(animateDurationReadySetGo);
ObjectAnimator animateReadyX = ObjectAnimator.ofFloat(questionDisplay, "scaleX", scaleFull/scaleSmall);
animateReadyX.setDuration(animateDurationReadySetGo);
ObjectAnimator animateReadyY = ObjectAnimator.ofFloat(questionDisplay, "scaleY", scaleFull/scaleSmall);
animateReadyY.setDuration(animateDurationReadySetGo /* + animateDurationFudge */ );
animateReadyY.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
Log.i("onAnimationEnd", "before .getTextSize()=" + questionDisplay.getTextSize());
//questionDisplay.setAlpha(fadeOut);
questionDisplay.setText(textSet);
questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizePx * scaleSmall);
Log.i("onAnimationEnd", "after .getTextSize()=" + questionDisplay.getTextSize());
}
});
ObjectAnimator animateSetFadeIn = ObjectAnimator.ofFloat(questionDisplay, "alpha", fadeOut, fadeIn);
animateSetFadeIn.setDuration(animateDurationReadySetGo);
ObjectAnimator animateSetX = ObjectAnimator.ofFloat(questionDisplay, "scaleX", scaleFull/scaleSmall);
animateSetX.setDuration(animateDurationReadySetGo);
ObjectAnimator animateSetY = ObjectAnimator.ofFloat(questionDisplay, "scaleY", scaleFull/scaleSmall);
animateSetY.setDuration(animateDurationReadySetGo /* + animateDurationFudge */ );
animateSetY.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
Log.i("onAnimationEnd", "before .getTextSize()=" + questionDisplay.getTextSize());
//questionDisplay.setAlpha(fadeOut);
questionDisplay.setText(textGo);
questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizePx * scaleSmall);
Log.i("onAnimationEnd", "after .getTextSize()=" + questionDisplay.getTextSize());
}
});
AnimatorSet animateReadySetGo = new AnimatorSet();
animateReadySetGo.playTogether(animateReadyX, animateReadyY, animateReadyFadeIn);
animateReadySetGo.playTogether(animateSetX, animateSetY, animateSetFadeIn);
animateReadySetGo.playSequentially(animateReadyY, animateSetY);
animateReadySetGo.start();
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
This is what the logs show. What do not make sense are: 1) why the "before" lines show 43.75 when they should show 175.0? and 2) why the "after" lines show 43.75 but the text size does not shrink?
I/actionExplode: textSizePx=175.0
I/actionExplode: .getTextSize()=43.75
I/onAnimationEnd: before .getTextSize()=43.75
I/onAnimationEnd: after .getTextSize()=43.75
I/onAnimationEnd: before .getTextSize()=43.75
I/onAnimationEnd: after .getTextSize()=43.75
My activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.plaudev.explodingtext.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="@string/textView"
android:id="@+id/textView"
android:fontFamily="casual"
android:textSize="50sp"
android:textStyle="normal|bold"
android:textAlignment="center"
android:gravity="center" />
<Button
android:text="@string/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:id="@+id/button"
android:background="@color/colourTransparent"
android:textAllCaps="false"
android:textSize="25sp"
android:textStyle="normal|bold"
android:fontFamily="casual"
android:onClick="actionExplode"
android:textColor="@android:color/holo_green_dark" />
</RelativeLayout>
Update 1: Still have not found solution but want to note this behaviour. If I rewrite actionExplode() to be run recursively and use something else as the onClick to start things off so my MainActivity class is as follows, then I can get the chain of 3 "explosions" but each is starting from a successively smaller text size as shown in additional log below. It seems that somehow by making the outlet questionDisplay final so it can be used by listeners or timers to chain animations is causing the outlet to retain text size even though I could still change its text (ie only selectively final). Thus I also tried a few variations (as noted in code comments) but none of them get me any closer to the intended behaviour than variation A.
public class MainActivity extends AppCompatActivity {
String[] explosionChain = {"Ready", "Set", "Go!"};
int explosionIndex = 0;
int animateDurationExplosion = 1000;
int animateDurationFudge = 100;
public void actionExplode(final float textSizeFullPx, final int explosionIndex) {
final TextView questionDisplay = (TextView) findViewById(R.id.textView);
float textSizePx = questionDisplay.getTextSize();
Log.i("actionExplode", "textSizeFullPx=" + textSizeFullPx + ", explosionIndex=" + explosionIndex + ", textSizePx=" + textSizePx);
float scaleSmall = 0.25f;
float scaleFull = 1.0f;
float fadeOut = 0f;
float fadeIn = 1f;
questionDisplay.setAlpha(fadeOut);
questionDisplay.setText(explosionChain[explosionIndex]);
// variation A
//questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizeFullPx * scaleSmall);
// variation B
questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizePx * scaleSmall);
Log.i("actionExplode", ".getTextSize()=" + questionDisplay.getTextSize());
ObjectAnimator animateFadeIn = ObjectAnimator.ofFloat(questionDisplay, "alpha", fadeOut, fadeIn);
animateFadeIn.setDuration(animateDurationExplosion);
ObjectAnimator animateScaleX = ObjectAnimator.ofFloat(questionDisplay, "scaleX", scaleFull/scaleSmall);
animateScaleX.setDuration(animateDurationExplosion);
ObjectAnimator animateScaleY = ObjectAnimator.ofFloat(questionDisplay, "scaleY", scaleFull/scaleSmall);
animateScaleY.setDuration(animateDurationExplosion /* + animateDurationFudge */ );
AnimatorSet animateExplosion = new AnimatorSet();
animateExplosion.playTogether(animateScaleX, animateScaleY, animateFadeIn);
animateExplosion.start();
CountDownTimer explodeNext = new CountDownTimer(animateDurationExplosion, animateDurationExplosion) {
@Override
public void onTick(long millisUntilFinished) {
}
@Override
public void onFinish() {
// variation C
Log.i("onFinish", ".getTextSize()=" + questionDisplay.getTextSize());
// variation D
//Log.i("onFinish", "before .getTextSize()=" + questionDisplay.getTextSize());
//questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizeFullPx);
//Log.i("onFinish", "after .getTextSize()=" + questionDisplay.getTextSize());
if ((explosionIndex + 1) < explosionChain.length) {
actionExplode(textSizeFullPx, explosionIndex + 1);
}
}
};
explodeNext.start();
}
public void startChainExplosion(View view) {
final TextView questionDisplay = (TextView) findViewById(R.id.textView);
final float textSizeFullPx = questionDisplay.getTextSize();
Log.i("startChainExplosion", "explosionIndex=" + explosionIndex + ", textSizeFullPx=" + textSizeFullPx);
actionExplode(textSizeFullPx, explosionIndex);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
The updated code above produces this log:
I/startChainExplosion: explosionIndex=0, textSizeFullPx=175.0
I/actionExplode: textSizeFullPx=175.0, explosionIndex=0, textSizePx=175.0
I/actionExplode: .getTextSize()=43.75
I/onFinish: .getTextSize()=43.75
I/actionExplode: textSizeFullPx=175.0, explosionIndex=1, textSizePx=43.75
I/actionExplode: .getTextSize()=10.9375
I/onFinish: .getTextSize()=10.9375
I/actionExplode: textSizeFullPx=175.0, explosionIndex=2, textSizePx=10.9375
I/actionExplode: .getTextSize()=2.734375
I/onFinish: .getTextSize()=2.734375
Update 2: Following @Xaver's advice, tried using this as the onClick. But the result is the same as my initial attempt, ie "Ready" explodes but "Set" and "Go!" don't. Moreover, text size becomes really big (I'm guessing 175px * 4) after all animation is done. Updated code & log as follows. I have a feeling I need each word to have its own textView to avoid this text size retention issue.
public void explodeSequentially(View view) {
String textReady = "Ready";
final String textSet = "Set";
final String textGo = "Go!";
final TextView questionDisplay = (TextView) findViewById(R.id.textView);
float textSizePx = questionDisplay.getTextSize();
Log.i("explodeSequentially", "textSizePx=" + textSizePx);
float scaleSmall = 0.25f;
float scaleFull = 1.0f;
float fadeOut = 0f;
float fadeIn = 1f;
questionDisplay.setAlpha(fadeOut);
questionDisplay.setText(textReady);
questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizePx * scaleSmall);
Log.i("explodeSequentially", ".getTextSize()=" + questionDisplay.getTextSize());
ObjectAnimator animateReadyFadeIn = ObjectAnimator.ofFloat(questionDisplay, "alpha", fadeOut, fadeIn);
animateReadyFadeIn.setDuration(animateDurationExplosion);
ObjectAnimator animateReadyX = ObjectAnimator.ofFloat(questionDisplay, "scaleX", scaleFull/scaleSmall);
animateReadyX.setDuration(animateDurationExplosion);
ObjectAnimator animateReadyY = ObjectAnimator.ofFloat(questionDisplay, "scaleY", scaleFull/scaleSmall);
animateReadyY.setDuration(animateDurationExplosion /* + animateDurationFudge */ );
animateReadyY.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
Log.i("onAnimationEnd", "before .getTextSize()=" + questionDisplay.getTextSize());
//questionDisplay.setAlpha(fadeOut);
questionDisplay.setText(textSet);
//questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizePx * scaleSmall);
//Log.i("onAnimationEnd", "after .getTextSize()=" + questionDisplay.getTextSize());
}
});
AnimatorSet animateReady = new AnimatorSet();
animateReady.playTogether(animateReadyX, animateReadyY, animateReadyFadeIn);
ObjectAnimator animateSetFadeIn = ObjectAnimator.ofFloat(questionDisplay, "alpha", fadeOut, fadeIn);
animateSetFadeIn.setDuration(animateDurationExplosion);
ObjectAnimator animateSetX = ObjectAnimator.ofFloat(questionDisplay, "scaleX", scaleFull/scaleSmall);
animateSetX.setDuration(animateDurationExplosion);
ObjectAnimator animateSetY = ObjectAnimator.ofFloat(questionDisplay, "scaleY", scaleFull/scaleSmall);
animateSetY.setDuration(animateDurationExplosion /* + animateDurationFudge */ );
animateSetY.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
Log.i("onAnimationEnd", "before .getTextSize()=" + questionDisplay.getTextSize());
//questionDisplay.setAlpha(fadeOut);
questionDisplay.setText(textGo);
//questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizePx * scaleSmall);
//Log.i("onAnimationEnd", "after .getTextSize()=" + questionDisplay.getTextSize());
}
});
AnimatorSet animateSet = new AnimatorSet();
animateSet.playTogether(animateSetX, animateSetY, animateSetFadeIn);
ObjectAnimator animateGoFadeIn = ObjectAnimator.ofFloat(questionDisplay, "alpha", fadeOut, fadeIn);
animateGoFadeIn.setDuration(animateDurationExplosion);
ObjectAnimator animateGoX = ObjectAnimator.ofFloat(questionDisplay, "scaleX", scaleFull/scaleSmall);
animateGoX.setDuration(animateDurationExplosion);
ObjectAnimator animateGoY = ObjectAnimator.ofFloat(questionDisplay, "scaleY", scaleFull/scaleSmall);
animateGoY.setDuration(animateDurationExplosion /* + animateDurationFudge */ );
animateGoY.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
Log.i("onAnimationEnd", "before .getTextSize()=" + questionDisplay.getTextSize());
//questionDisplay.setAlpha(fadeOut);
questionDisplay.setText("Here is the question!");
//questionDisplay.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizePx * scaleSmall);
//Log.i("onAnimationEnd", "after .getTextSize()=" + questionDisplay.getTextSize());
}
});
AnimatorSet animateGo = new AnimatorSet();
animateGo.playTogether(animateGoX, animateGoY, animateGoFadeIn);
AnimatorSet animateReadySetGo = new AnimatorSet();
animateReadySetGo.playSequentially(animateReady, animateSet, animateGo);
animateReadySetGo.start();
}
And the logs
I/explodeSequentially: textSizePx=175.0
I/explodeSequentially: .getTextSize()=43.75
I/onAnimationEnd: before .getTextSize()=43.75
I/onAnimationEnd: before .getTextSize()=43.75
I/onAnimationEnd: before .getTextSize()=43.75
My suspicion was correct. Text size on
textViews linger wheneverfinalis used on the outlets and such use seems unavoidable if I want to chain animations. However by splitting each word I want to "explode" into its owntextView, at least I can get the "explosion" effect to work in sequence as intended.The following code will achieve the intended animation sequence only once, ie the next time you click the button, the animation sequence will start from 43.75px instead of the initial 175.0px, and continues to decrease at 0.25f factor each further time you click. I will amend the code to dynamically create & destroy the
textViews to get around that later (now updated below).The new MainActivity.java:
The new activity_main.xml:
The log when you run this:
Update: With dynamically created & destroyed views to enable repeated use based on the recursive method tried prior.
Updated MainActivity.java - you have a choice of using animation listener or CountDownTimer to chain the "explosions":
Updated activity_main.xml - some redundant
textViewsare kept for backward compatibility with prior code.Updated log: