What i want is that each animation, from the code below, to start with a delay, like a sequence. So i have this code:
public void setAnimation(){
View view;
String animation = prefs.getString("animations", "Scale");
String interpolator = prefs.getString("interpolators", "Bounce");
Animation animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale_in);
for(int i=0; i<gridView.getChildCount(); i++){
view = gridView.getChildAt(i);
view.startAnimation(animate);
}
}
because there is a for loop, all child animations will start instantly. I already tried with:
Thread.sleep....
Handler...
animate.setStartTime...
animate.setStartOffset...
but all child animations starts instantly.
I tried this method inside of loop, and the animations won't start:
animate.setAnimationListener(new AnimationListener(){
public void onAnimationEnd(Animation arg0) {
view.startAnimation(animate);
}
public void onAnimationRepeat(Animation arg0) {
}
public void onAnimationStart(Animation arg0) {
}
});
Thanx in advance.
The solution is to create a GridLayoutAnimationController or LayoutAnimationController.
I used LayoutAnimationController to show elements in LinearLayout with animation effect one by one using following code.
Animation fadeIn = AnimationUtils.loadAnimation(context, R.anim.anim_fade_in);
//lnrContactContainer is LinearLayout.
AnimationSet set = new AnimationSet(true);
set.addAnimation(fadeIn);
set.setDuration(500);
controller = new LayoutAnimationController(set, 1f);
lnrContactContainer.setLayoutAnimation(controller);
lnrContactContainer.setVisibility(View.VISIBLE);
But same approach does not work when I use it to show fadeout animation while hiding LinearLayout lnrContactContainer.setVisibility(View.GONE);
Related
I have an imageview with 5 backgrounds to choose from. I want to fade image2 out and set image5 as background with fade in effect. This should keep changing randomly. The problem is, how do i do this efficiently?
this is how i give fade in and fade out effects using system animations-
fade out
Animation out = AnimationUtils.makeOutAnimation(this, true);
viewToAnimate.startAnimation(out);
viewToAnimate.setVisibility(View.INVISIBLE);
fade in
Animation in = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
viewToAnimate.startAnimation(in);
viewToAnimate.setVisibility(View.VISIBLE);
this is how i change my background-
search_engine_identifier.setImageResource(R.drawable.ic_yahoo);
Create two in xml you can get from here then load them like this.
ImageView myImageView = (ImageView) findViewById(R.id.imageView2);
Animation myFadeInAnimation = AnimationUtils.loadAnimation(Splash.this, R.anim.fadein)
Animation myFadeOutAnimation = AnimationUtils.loadAnimation(Splash.this, R.anim.fadeout);
int value = 0; // Global Type
btnStart.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(value%2 == 0){
doFadeOutAnimation();
}else{
doFadeInAnimation();
}
value ++;
}
});
Another way to do this is by using one of Android's View Animator classes, such as ObjectAnimator. Here's what I'm doing:
1) Add the drawable ID's of the images you want to use into an int array.
2) Create ObjectAnimators for the fadeIn and fadeOut animations. You can set the duration of the fade in and fade out to whatever you want.
3) Add an AnimatorListener to the fadeOut ObjectAnimator so that when it finishes, it will set the new image (which is chosen randomly by selecting a random number from the images array) and then it will fade back in with the new image, using the fadeIn ObjectAnimator.
4) Create a runnable and in it's run method, start the fadeOut animation.
5) Call handler.postDelayed on the runnable and use that to decide how long you want each image to stay before fading out.
6) At the end of your Runnable's run method, call handler.postDelayed again so the images will continue to fade in and out, but you should make sure that you have some kind of conditional statement so that you can stop the animation when you need to, which is why I used the boolean "running" so I can set it to false when I need to stop the handler from looping.
ImageView mImageView = (ImageView) findViewById(R.id.imageView);
boolean running = true;
final int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3,
R.drawable.image4, R.drawable.image5};
final Random random = new Random();
final Handler handler = new Handler();
final ObjectAnimator fadeIn = ObjectAnimator.ofFloat(mImageView, "alpha", 0f, 1f);
fadeIn.setDuration(1000);
final ObjectAnimator fadeOut = ObjectAnimator.ofFloat(mImageView, "alpha", 1f, 0f);
fadeOut.setDuration(1000);
fadeOut.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
int rand = random.nextInt(images.length);
mImageView.setImageResource(images[rand]);
fadeIn.start();
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
Runnable runnable = new Runnable() {
#Override
public void run() {
fadeOut.start();
if (running) {
handler.postDelayed(this, 5000);
}
}
};
handler.postDelayed(runnable, 5000);
}
This will continuously loop through your selected images (randomly) with fade in/ fade out animations. You can add a few checks to make sure the same image doesn't appear twice in a row, etc.
I want to animate add View as a "slide Down" and remove View as "slide Up" in a ViewGroup. So i used LayoutTransition.class but its not supported for minSdk 8. So i found this NineOldAndroids, and was wondering if i can achieve what i want using this.
Something like this,
LayoutTransition layoutTransition = new LayoutTransition();
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(getApplicationContext(),
R.anim.slide);
layoutTransition.setAnimator(LayoutTransition.APPEARING, set);
Unfortunately NineOldAndroids does not support LayoutTransitions as it is not possible to implement in Gingerbread.
I also need to animate when adding a view without LayoutTransition.
I have no idea when to start the animation so I use LayoutAnimationController to do
:
// A fake AlphaAnimation so that we can know how to start the animation of adding view
Animation animation = new AlphaAnimation(0, 0);
animation.setDuration(1);
animation.setFillAfter(true);
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
// start the animation here
startAddingViewAnimation();
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
ViewGroup viewroot = findViewById(R.id.viewroot);
LayoutAnimationController layoutAnimationController = new LayoutAnimationController(animation);
viewRoot.setLayoutAnimation(layoutAnimationController);
viewRoot.addView(btn);
Set a LayoutAnimationController to notify me that the view was added and finished to draw. Then I can start the animation by nineoldanimator.
I'm creating a trivia game which plays a simple two frame animation before the answer is revealed. The animation fills the screen so that the answer isn't revealed until the animation is done. Everything works except that I can't get the animation to go away and reveal the answer. What I'm trying to do is call the Relative Layout that the animation ImageView is in and then do ImageView_layout.setVisibility(View.GONE);. I'm not getting any errors, but the relative layout ain't going away. Here's what I've got:
Animation CorrAniShow = AnimationUtils.loadAnimation(this, R.anim.anim_fadein);
Animation CorrAniHide = AnimationUtils.loadAnimation(this, R.anim.anim_fadeout);
final RelativeLayout corrA_layout = (RelativeLayout) findViewById(R.id.aniC_Layout);
final ImageView corrView = (ImageView) findViewById(R.id.corAn1);
corrView.setBackgroundResource(R.anim.corr_anim);
corrView.post(new Runnable() {
#Override
public void run() {
AnimationDrawable corAn = (AnimationDrawable)corrView.getBackground();
corAn.start();
}
});
CorrAniHide.setAnimationListener(new AnimationListener() {
public void onAnimationStart(final Animation arg0) {}
public void onAnimationRepeat(final Animation arg0) {}
public void onAnimationEnd(final Animation rg0){
corrA_layout.setVisibility(View.GONE);
}
});
Can anyone see why the view isn't gone? Is there a better way to make the animation go away? Thanks!
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.
I've a quick question.
I'm trying to animating a child view to make it disappear. That part is easy, but, during the animation, the parent view is not resized. How can I do to make the parent view automtically resize during the animation?
Here is my current code:
AnimationSet set = new AnimationSet(true);
Animation fade = new ScaleAnimation(1.f, 1.f, 1.f, 0);
Animation fade2 = new AlphaAnimation(1, 0);
set.addAnimation(fade);
set.addAnimation(fade2);
set.setDuration(2000);
set.setFillAfter(true);
bgColor.startAnimation(set);
bgColor is the View I'm making disappear. Here is the final result :
Result
You can see the gap after the animation.
Any ideas?
Thanks in advance!
You may add an AnimationListener and do a change of the layout after the animation is done
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
bgColor.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
}
});
Also, be sure to have your stuff together regarding onFillAfter()!