How to avoid blink of View when using animation? - android

I use translate and rotate animations to position View inside FrameLayout in onCreate event. I want animations to perform instantly so I set duration for both of them to 0. But when application starts there is a short blink of my View in top left corner of screen and then it becomes positioned according to animation parameters. How can I avoid this blink?

I spent whole day with that problem. fillAfter and fillBefore has nothing to do with that. Try this before animation start:
view.setVisibility(View.GONE); // view is our View we trying to animate
Then set animation listener for your animation:
animation.setAnimationListener(new AnimationListener(){
public void onAnimationEnd(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationStart(Animation animation) {
v.setVisibility(View.VISIBLE);
}

use animation.setFillAfter(true) or animation.setFillBefore(true), depending on your needs. This should resolve the blink

Having a tag inside the parent tag of your animation file will cause this, try it with only one tag and you will see the difference. I am working with this right now

Odaym's answer is the solution for the issue actually. If you have something like that:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true">
<set
android:duration="1000">
<translate
android:fromXDelta="100%"
android:toXDelta="0"
/>
</set>
</set>
Change it into this:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true" android:duration="1000">
<translate
android:fromXDelta="100%"
android:toXDelta="0"
/>
</set>

Set the visibility after the animation execution code but not in "onAnimationEnd", also try to set the duration
view.setVisibility(View.VISIBLE); // view is our View we trying to animate

Related

How to detect if animated view touches another view?

I have one view animated with transle animation:
<translate
android:fromYDelta="0"
android:toYDelta="110%p"
android:duration="2000"
/>
public void translte(View v){
Animation animation= AnimationUtils.loadAnimation(context,R.anim.translate);
animation.setFillAfter(true);
v.startAnimation(animation);
}
And i want to detect if that view hits another view in its way.
How would you do it?
There is a question related with animation positions and maybe this answer helps.

Android View animation to top parent

My target is to animate current view from it's current position(center), to top border of it's parent. Is that possible? I have already tried next code, but the problem is that my view disappears after animation:
Animation bottomUp = AnimationUtils.loadAnimation(context, R.anim.bottom_up);
popup.startAnimation(bottomUp);
and
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="100%"
android:toYDelta="0%"
android:fillAfter="true"
android:duration="500"/>
</set>
That can easily be done in Java with ViewPropertyAnimator
popup.animate().translationY(0).setDuration(500); // 0 is top of Y axis
The animation always starts at the current position.
Check the ViewPropertyAnimator docs for future animations, it's very easy to use and can save you a lot of code.

How to animate views within each ListView items?

If you have used the Google+ app on Android you must have noticed the comments on posts are animated to show comments one by one using a fadeIn and fadeOut animation on each ListView item.
I want to achieve this type of animation for certain views like TextView, etc within each of my ListView item.
I can achieve the fadeIn and fadeOut animation part but the problem is where do I put the animation code for it to work independently for each inflated ListView item.
Any help would be appreciated. Thanks in advance.
Please use a BaseAdapter and put the necessary animation codes in your getView() method.
Just inflate the views and start the animations when the views are inflated for the first time. (Hint - when convertView == null)
Use the ViewHolder pattern to hold each of the elements of the single list item uniquely and start animations no any View you need inside each list item.
To start animations, create an animation in XML and start the animation like this,
Animation anim = AnimationUtils.loadAnimation(this, R.anim.slide_up);
anim.setInterpolator(new DecelerateInterpolator());
anim.setDuration(500);
anim.setStartOffset(100);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
progress.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
progress.startAnimation(anim);
To give you an idea on how to create animations in XML,
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="200"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<translate
android:duration="200"
android:fromYDelta="0%p"
android:toYDelta="5%p" />
</set>
You can use an animation set to combine multiple animations together and play them at once.
Please also explore the Animation API in greater detail, you will find useful methods like setRepeatMode() and setRepeatCount() which will help you to achieve the desired result.
Moreover, you do not need two separate TextViews, you can do it using one. Just make proper use of the animation listeners.
Hope it helps.

Animate View in a layout (pre-Honeycomb)

I tried to animate View's position in a RelativeLayout. In every frame I change the topMargin of the View's LayoutParams and then call View#setLayoutParams(newParams).
The animation is unfortunately too slow because the setLayoutParams() call triggers remeasuring of the whole View tree.
How can I solve this without using API 11+?
You can use View Animations Just make yourself an xml file with a translate animation in it that defines how you'd like your View to move. Then inflate a reference to your Animation and call
view.startAnimation(anim);
Here is an example of a translate xml file. You'd save a file like this in res/anim/
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/overshoot_interpolator">
<translate android:fromXDelta="100%p" android:toXDelta="0%p" android:duration="700"/>
</set>
Here is what you'd do in java to use it.
Animation slideLeftIn;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in);
//mView can be any View object.
mView.startAnimation(slideLeftIn);
}

How to stop an image which moves by animation?

I'm trying to move an image from left to right on layout, but not by dragging. I want it to go automatically when something happened. So, i found an animation like this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="1000"
android:fromXDelta="0"
android:toXDelta="200"
android:fillEnabled="true"
android:fillAfter="true" />
</set>
But the problem is i couldn't find how to make it stop there! It's just went back directly. Any suggestion please?
Here is my Java code:
public void onClick(View v) {
runOnRight(this, image);
}
static Animation runOnRight(Activity ctx, View target) {
Animation animation = AnimationUtils.loadAnimation(ctx,
R.anim.slide_left_to_right);
target.startAnimation(animation);
return animation;
}
set FillAfter to true in your animation set xml
When the View.onAnimationEnd() callback is fired, you can set the new View postion with View.layout(int, int, int, int). The View.layout call assign size and position to your view. Refer to the documentation for more information
use the field FillAfter="true" which will stops at the end.
just like following.

Categories

Resources