Multiple transition effects with TextViews (Android) - android

I would like 3 TextViews to appear in sequence (the first one, then when it has finished the second one, and then the third one). I tried this code
tv1.animate().alpha(1f).setDuration(1000);
tv2.animate().alpha(1f).setDuration(1000);
tv3.animate().alpha(1f).setDuration(1000);
but they appear together, so I tried
tv1.animate().alpha(1f).setDuration(1000);
tv2.animate().alpha(1f).setStartDelay(1000).setDuration(1000);
tv3.animate().alpha(1f).setStartDelay(2000).setDuration(1000);
but when I open the app they appear together with no animation. How can I fix this?

There are many ways to do it.
If you want this by using alpha value, every view you animate must have 0.0f alpha value at the beginning. Then animate them to 1.0f alpha.
For example:
private void animateViews(final ArrayList<View> viewArrayList, long delay){
for (int i = 0; i < viewArrayList.size(); i++) {
final int position = i;
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
viewArrayList.get(position).animate().alpha(1f).setDuration(200);
}
}, i * delay);
}
}
You can use this method I wrote.
Usage:
ArrayList<View> arrayList = new ArrayList<>();
arrayList.add(tv1);
arrayList.add(tv2);
arrayList.add(tv3);
animateViews(arrayList,300);
delay parameter means, every animation start 300 * index miliseconds delayed.
Also this method has 200 ms duration for alpha animation.
First starts at 0 delay,
Second starts at 1 * 300 ms delay
Third starts at 2 * 300 ms delay
...
..
.

You need set alpha to 0 before start animation

Add an AnimationListener and start the next animation when the previous one ends.
AlphaAnimation alphaAnimation = new AlphaAnimation(1f,0f);
alphaAnimation.setFillAfter(true);
alphaAnimation.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation anim)
{
};
public void onAnimationRepeat(Animation anim)
{
};
public void onAnimationEnd(Animation anim)
{
nextPuzzle();
};
});
tv1.startAnimation(alphaAnimation);

Change the time
tv1.animate().alpha(1f).setDuration(1000);
tv2.animate().alpha(1f).setStartDelay(2000).setDuration(1000);
tv3.animate().alpha(1f).setStartDelay(3000).setDuration(1000);

Related

Blinking Alpha Animation With no fade effect

I'm trying to implement a Blink Animation.
This code makes a view to blink fade in and fade out:
AlphaAnimation blink = new AlphaAnimation(0.0f, 1.0f);
blink.setDuration(500);
blink.setStartOffset(0);
//changing it makes more than one animation appear in different time stamps.
blink.setRepeatMode(Animation.REVERSE);
blink.setRepeatCount(Animation.INFINITE);
I have two issues:
setStartOffset(n); --> Changing n makes more than one animation appear in different time stamps. Not synced. I want it to be synced, all animations should appear and dissappear at same time.
I do not want fade in or fade out, simply visible & gone with few millisecond delay.
Is there any other Class of Animation that i had to use, or i had to make a custom animation.
Pls. help.
For animation without the fading you can create your own custom Interpolator:
import android.view.animation.Interpolator;
public class StepInterpolator implements Interpolator {
float mDutyCycle;
public StepInterpolator(float dutyCycle) {
mDutyCycle = dutyCycle;
}
#Override
public float getInterpolation(float input) {
return input < mDutyCycle ? 0 : 1;
}
}
Then set the interpolator in the Animation object:
blink.setInterpolator(new StepInterpolator(0.5f));
So, my answer ... it's a class that toggles visibility of a view in a certain interval. Of course it can be solved differently, maybe you get some inspiration...
public static class ViewBlinker {
private Handler handler = new Handler();
private Runnable blinker;
public ViewBlinker(final View v, final int interval) {
this.blinker = new Runnable() {
#Override
public void run() {
v.setVisibility(v.getVisibility()==View.VISIBLE?View.INVISIBLE:View.VISIBLE);
handler.postDelayed(blinker, interval);
}
};
}
public void startBlinking() {
handler.post(blinker);
}
public void stopBlinking() {
handler.removeCallbacks(blinker);
}
}
and you use it like this :
ViewBlinker blinker = new ViewBlinker(YOUR_BLINK_VIEW, YOUR_BLINK_INTERVAL);
blinker.startBlinking();
and when your view is finished blinking, call
blinker.stopBlinking();
Actually, based on cold ash's answer in 2014, all of his/her code can be simplified as below (thanks to lambda):
blink.setInterpolator(input -> input < 0.5f ? 0 : 1);
Yes, just a single line. Very simple.

How to do smooth transition from one image to another

I have an activity where I am changing the ImageView periodically, for that I wrote the below line of code .
imageview.setImageUri(resId);
I am increasing the resource id .It works fine but there is sudden transition from one image to another. I don't want that,I want the smooth transition of image view to another image. How can i do that?
Try this
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
}
});
}
Try alpha animation. First fadeout the imageview, on animation end, change the resource and then fadein the imageview.
For a smooth transition you must use Animations in Android, start by reading the following link:
http://www.vogella.com/articles/AndroidAnimation/article.html
There are many similar questions on stackoverflow about animations and many tutorials are available on the net about this topic. A simple search on google will bring you tons of result

i want to animate button then change the value of it, but couldnt in android

i want to animate button(ie; rotation, translation) then change the text of a button. unfortunately, it always first changes the text of the button then do the animation.
How can I achieve my goal?
Pls help me
my code is like this;
AnimationSet set = new AnimationSet(true);
Animation anim1 = new RotateAnimation(0, 360, 500, 750);
anim1.setDuration(3000);
anim1.setFillAfter(true);
set.addAnimation(anim1);
Animation anim2 = new RotateAnimation(0, 360, 1024, 824);
anim2.setDuration(3000);
anim2.setFillAfter(true);
set.addAnimation(anim2);
anim2.setStartOffset(3000);
first.clearAnimation();
set.setFillAfter(true);
first.startAnimation(set);
numbers[0]=min + (int)(Math.random() * ((max - min) + 1));
Your code starts the animation but is not blocking : once the animation is started, the program goes on.
You could try getting an handler and post the change text event at the right time :
Handler mHandler=new Handler();
Runnable lRunnable =new Runnable()
{
public void run()
{
//Your change text code
}
};
mHandler.postDelayed(lRunnable , 3000); // Or any other duration so you have the right effect
A better solution is to add an AnimationListener to the animation, or if you are on JB use the view property animators and the withEndAction() method. You should avoid the old animation framework if possible. It doesn't actually change the properties, it just draw the view with a transformation.
set.setAnimationListener(new AnimationListener() {
public void onAnimationEnd() {
// ...
}
public void onAnimationStart() {
}
public void onAnimationRepeat() {
}
}
But I recommend the view property animations if you can use them. They are much better to work with.

TextView animation - fade in, wait, fade out

I am making a picture gallery app. I current have a imageview with a text view at the bottom. Currently it is just semitransparent. I want to make it fade in, wait 3 second, then fade out 90%. Bringing focus to it or loading a new pic will make it repeat the cycle. I have read thru a dozen pages and have tried a few things, no success. All I get is a fade in and instant fade out
protected AlphaAnimation fadeIn = new AlphaAnimation(0.0f , 1.0f ) ;
protected AlphaAnimation fadeOut = new AlphaAnimation( 1.0f , 0.0f ) ;
txtView.startAnimation(fadeIn);
txtView.startAnimation(fadeOut);
fadeIn.setDuration(1200);
fadeIn.setFillAfter(true);
fadeOut.setDuration(1200);
fadeOut.setFillAfter(true);
fadeOut.setStartOffset(4200+fadeIn.getStartOffset());
Works perfectly for white backgrounds. Otherwise, you need to switch values when you instantiate AlphaAnimation class. Like this:
AlphaAnimation fadeIn = new AlphaAnimation( 1.0f , 0.0f );
AlphaAnimation fadeOut = new AlphaAnimation(0.0f , 1.0f );
This works with black background and white text color.
Kotlin Extension functions for Guy Cothal's answer:
inline fun View.fadeIn(durationMillis: Long = 250) {
this.startAnimation(AlphaAnimation(0F, 1F).apply {
duration = durationMillis
fillAfter = true
})
}
inline fun View.fadeOut(durationMillis: Long = 250) {
this.startAnimation(AlphaAnimation(1F, 0F).apply {
duration = durationMillis
fillAfter = true
})
}
That's the solution that I've used in my project for looping fade-in/fade-out animation on TextViews:
private void setUpFadeAnimation(final TextView textView) {
// Start from 0.1f if you desire 90% fade animation
final Animation fadeIn = new AlphaAnimation(0.0f, 1.0f);
fadeIn.setDuration(1000);
fadeIn.setStartOffset(3000);
// End to 0.1f if you desire 90% fade animation
final Animation fadeOut = new AlphaAnimation(1.0f, 0.0f);
fadeOut.setDuration(1000);
fadeOut.setStartOffset(3000);
fadeIn.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationEnd(Animation arg0) {
// start fadeOut when fadeIn ends (continue)
textView.startAnimation(fadeOut);
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationStart(Animation arg0) {
}
});
fadeOut.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationEnd(Animation arg0) {
// start fadeIn when fadeOut ends (repeat)
textView.startAnimation(fadeIn);
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationStart(Animation arg0) {
}
});
textView.startAnimation(fadeOut);
}
Hope this could help!
You can use an extra animation object (which doesn't modify its alpha) to prevent the instant fade out, set animationListener for your fade-in effect and start the extra animation object in the on animationEnd of the fade-in, then you start fade-out on animation end of the extra animation object, try the link below, it'll help..
Auto fade-effect for textview
I was searching for a solution to similar problem (TextView fade in/wait/fade out) and came up with this one (in fact, the official docs point to this too). You can obviously improve this by adding more params.
public void showFadingText(String text){
txtView.setText(text);
Runnable endAction;
txtView.animate().alpha(1f).setDuration(1000).setStartDelay(0).withEndAction(
endAction = new Runnable() {
public void run() {
txtView.animate().alpha(0f).setDuration(1000).setStartDelay(2000);
}
}
);
}
Provided you have txtView declared somewhere else with alpha starting at zero.

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