Android Simple TextView Animation - android

I've got a TextView that I would like to count down (3...2...1...stuff happens).
To make it a little more interesting, I want each digit to start at full opacity, and fade out to transparency.
Is there a simple way of doing this?

Try something like this:
private void countDown(final TextView tv, final int count) {
if (count == 0) {
tv.setText(""); //Note: the TextView will be visible again here.
return;
}
tv.setText(String.valueOf(count));
AlphaAnimation animation = new AlphaAnimation(1.0f, 0.0f);
animation.setDuration(1000);
animation.setAnimationListener(new AnimationListener() {
public void onAnimationEnd(Animation anim) {
countDown(tv, count - 1);
}
... //implement the other two methods
});
tv.startAnimation(animation);
}
I just typed it out, so it might not compile as is.

I've used a more conventional Android-style animation for this:
ValueAnimator animator = new ValueAnimator();
animator.setObjectValues(0, count);
animator.addUpdateListener(new AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
view.setText(String.valueOf(animation.getAnimatedValue()));
}
});
animator.setEvaluator(new TypeEvaluator<Integer>() {
public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
return Math.round((endValue - startValue) * fraction);
}
});
animator.setDuration(1000);
animator.start();
You can play with the 0 and count values to make the counter go from any number to any number, and play with the 1000 to set the duration of the entire animation.
Note that this supports Android API level 11 and above, but you can use the awesome nineoldandroids project to make it backward compatible easily.

Take a look at CountDownAnimation.
I first tried #dmon solution, but since every animation starts at the end of the previous one you end up having a delay after several calls.
So, I implemented CountDownAnimation class which uses a Handler and the postDelayed function. By default, it uses the alpha animation, but you can set any animation. You can download the project here.

Related

Android ArgbEvaluator calculate fraction

I've a little difficult in using ArgbEvaluator object.
I want to change the color of view from one color to another color in specific duration.So I write this code,it works well.
ValueAnimator animator = ValueAnimator.ofArgb(Color.RED,Color.BLUE);
animator.setDuration(5000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int) animation.getAnimatedValue();
view.setBackgroundColor(color);
}
});
animator.start();
But I want to use ArgbEvaluator to animate like that.
public void setColor(fraction){
int color = evaluator.evaluate(fraction,startColor,endColor);
view.setBackgroundColor(color);
}
The above setColor method will be called agian and again for specific duration(eg-5000ms).
Here is my problem.
I don't know how to calculate fraction to change color within specific duration.
I want to know the calculation formula of fraction.Thanks.

ImageViews flickering before they should be visible

I have an Activity with a toolbar (which is part of the SharedElements Activity entering animation) and below that toolbar are three ImageViews horizontally next to each other. In their XML implementation all three are set INVISIBLE.
What I'm trying to do is, to animate them sequentially "dropping" from behind the toolbar. My implemenation is this:
int delay = 500;
for (int y = 0; y < 3; y++) {
ObjectAnimator oa = ObjectAnimator.ofFloat(imageViews[y],
"translationY", -300, 0);
oa.setDuration(600);
oa.setStartDelay(delay);
oa.start();
imageViews[y].setVisibility(View.VISIBLE);
delay = delay+100;
}
}
As you can see, I'm iterating through the three ImageViews and start a animation for each one to go from a -300 X-position (which is behind the toolbar) to their normal position.
This animation works great - just as I want it to be, but the problem is, that right before all ImageViews are briefly flickering which I can't explain. I tried debugging, but while I'm going through the lines of that part my screen stays black. So I can't determine where/why the Views become visible.
Maybe you can help me to find my mistake.
Thank you, this is my working Code:
For all three ImageViews:
ObjectAnimator anim1Pin = ObjectAnimator.ofFloat(img_pinned, "translationY", -300, 0);
anim1Pin.setDuration(ANIMATON_DURATION);
anim1Pin.setStartDelay(300);
anim1Pin.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
img_pinned.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
And the AnimatorSet:
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(anim1Pin, anim2Alarm, anim3LED);
animatorSet.start();
Few things, first, the problem may be as simple as setting the visiblity state to GONE and then after animation starts, setting it to visible. However, I would also use AnimatorSet to play the animations together and add the delay rather than do it in a loop.
If you use AnimatorSet there is an onAnimationStart method in AnimationListener that you can use the set the visible to VISIBLE rather than do it how you have to ensure that they become visible at the right time.

Android: how to use ValueAnimator

I want to do a translate animation using this following
public static void move(TextView view){
ValueAnimator va = ValueAnimator.ofFloat(0f, 3f);
int mDuration = 3000; //in millis
va.setDuration(mDuration);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
}
});
va.setRepeatCount(5);
va.start();
}
But I don't know how to use onAnimationUpdate method.
Can anyone help please?
If you really, really, really want to use ValueAnimator for animating translation of the View you can do it this way (finishing your example, assuming you meant translationX.
Bare in mind that you're animating translation from 0px to 3px, so you probably won't see much difference.
fun move(view: TextView) {
val va = ValueAnimator.ofFloat(0f, 3f)
va.duration = 3000 //in millis
va.addUpdateListener { animation -> view.translationX = animation.animatedValue as Float }
va.repeatCount = 5
va.start()
}
ValueAnimator is a great tool for making animations. Usually we have three steps:
Step 1- Create your ValueAnimator class by
ValueAnimator animator = ValueAnimator.ofFloat(start value, end value);
Step 2- Adding one update listener and overriding at least onAnimationUpdate() function
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float value = (float) animator.getAnimatedValue();
//this value should be used to update properties of views.
//just don't forget to run invalidate function of your views
// to redraw them.
}
});
Step 3-
animator.start();

Can I reuse ValueAnimator?

I have the following code (Android project in Scala):
val animator = new ValueAnimator
animator.setFloatValues(0f, 100f)
animator.setDuration(20000L)
animator.addUpdateListener(this) // prints current value to console
animator.start
override def onTouch(v: View, event: MotionEvent) = {
animator.setFloatValues(100f, 0f)
animator.setCurrentPlayTime(0)
if (!animator.isRunning) animator.start
true
}
If I touch the screen while animator is running then it correctly starts working backwards (since I've swapped the values). But if I touch the screen after it is finished then nothing happens, it does not start over.
Question is can I reuse this animator somehow and make it work again for given values after it has been stopped?
You can reuse animator in the following way:
...
animator.end();
animator.setFloatValues(...);
animator.start();
...
You can also use animator.cancel() instead of animator.end() and pass the last value from the last animation to the new animation as a starting float. For instance, if the last animated value is 50, you can call animator.setFloatValues(50, 0f) so your animations will look connected.
Considering the accepted answer states it's impossible, I would like to mention that the described approach is used in Touch Circle app when users make tap with two fingers. BTW, it's a very nice effect when object trembles a little bit - use it as you wish, code exerpt is below:
void shapeTremble(long delay) {
if (null == animatorTremble) {
ValueAnimator animator = new ValueAnimator();
animator.setDuration(850).setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
setCircleScale((Float) valueAnimator.getAnimatedValue(), true);
}
});
animatorTremble = animator;
} else {
animatorTremble.cancel();
}
animatorTremble.setFloatValues(circleScale, 0.85f, 1.05f, 0.95f, 1.025f, 1.0f);
animatorTremble.setStartDelay(delay);
animatorTremble.start();
}
You cannot reuse an animation.
You need to reset() and reinitialize an animation object by calling the initialize() method before using the same object again. This is similar to instantiating a new animation object.

Scroll up a ScrollView slowly

The question is "How do i scroll up a ScrollView to top very smoothly and slowly".
In my special case i need to scroll to top in about 1-2 seconds.
Ive tried interpolating manually using a Handler (calling scrollTo(0, y)) but that didnt work at all.
I've seen this effect on some bookreader-apps yet, so there must be a way, im sure :D.
(Text is very slowly scrolling up to go on reading without touching the screen, doing input).
I did it using object animator (Available in API >= 3) and it looks very good:
Define an ObjectAnimator:
final ObjectAnimator animScrollToTop = ObjectAnimator.ofInt(this, "scrollY", 0);
(this refers to the class extending Android's ScrollView)
you can set its duration as you wish:
animScrollToTop.setDuration(2000); (2 seconds)
P.s. Don't forget to start the animation.
In 2 seconds move the scroll view to the possition of 2000
new CountDownTimer(2000, 20) {
public void onTick(long millisUntilFinished) {
scrollView.scrollTo(0, (int) (2000 - millisUntilFinished)); // from zero to 2000
}
public void onFinish() {
}
}.start();
Try the following code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)
{
ValueAnimator realSmoothScrollAnimation =
ValueAnimator.ofInt(parentScrollView.getScrollY(), targetScrollY);
realSmoothScrollAnimation.setDuration(500);
realSmoothScrollAnimation.addUpdateListener(new AnimatorUpdateListener()
{
#Override
public void onAnimationUpdate(ValueAnimator animation)
{
int scrollTo = (Integer) animation.getAnimatedValue();
parentScrollView.scrollTo(0, scrollTo);
}
});
realSmoothScrollAnimation.start();
}
else
{
parentScrollView.smoothScrollTo(0, targetScrollY);
}
Have you tried smoothScrollTo(int x, int y)?
You can't set the speed parameter but maybe this function will be ok for you
You could use the Timer and TimerTask class. You could do something like
scrollTimer = new Timer();
scrollerSchedule = new TimerTask(){
#Override
public void run(){
runOnUiThread(SCROLL TO CODE GOES HERE);
}
};
scrollTimer.schedule(scrollerSchedule, 30, 30);

Categories

Resources