I'm using an AnimationSet to do many Translate animations. In this example I want to move an ImageView from 0 to 700 (offscreen) and from -700 to 0 (the view move to the extreme right and re-enter from the extreme left). I use this code:
AnimationSet set = new AnimationSet(true);
set.setInterpolator(new AccelerateDecelerateInterpolator());
set.setFillEnabled(true);
if(traject!=null){
TranslateAnimation tmpAnim = null;
set.setDuration(duration);
int d = traject.size()!=0 ? duration/traject.size() : duration;
for(int i =0; i<traject.size();i++){
tmpAnim = new TranslateAnimation( traject.get(i).getStartX(),
traject.get(i).getEndX(),
traject.get(i).getStartY(),
traject.get(i).getEndY() );
tmpAnim.setDuration(d);
tmpAnim.setFillAfter(true);
tmpAnim.setStartOffset(d*i);
set.addAnimation(tmpAnim);
}
}
traject is an arraylist holding each TranslateAnimation start and end points
But in my test example the animation goes from -700 to 700. I tried switching the order of the TranslateAnimations, using setStartTime() instead of setStartOffset(), skipping the call to setStartOffset(), the result is the same. Do you have any idea on what I am missing ?
Related
I want to create animation like this image
I create point to point animation and beizier path animation but I am not able to develop animation like this image.
Please help me out.
You can put 2 translate on the same object like this :
AnimationSet set = new AnimationSet(true);
set.addAnimation(translateX);
set.addAnimation(translateY);
image.startAnimation(set);
In your case it's like gravity. So i would suggest to use accelerate interpolator on the translateY animation and a linear Interpolator on translateX.
Here is the code :
TranslateAnimation animationX = new TranslateAnimation(fromX,toX,0,0);
animationX.setInterpolator(new LinearInterpolator());
TranslateAnimation animationY = new TranslateAnimation(0,0,fromY,toY);
animationX.setInterpolator(new AccelerateInterpolator());
AnimationSet set = new AnimationSet(true);
set.addAnimation(animationX);
set.addAnimation(animationY);
image.startAnimation(set);
Set the duration by using:
translationX.setDuration(duration);
Hope this helps.
For an android app, Im doing infinite Translate Animation.
imageview starts first and after a delay of 1 second, imageview2 starts.
Animation animation = new TranslateAnimation(0, 0, -500, 500);
animation.setDuration(4000);
imageview.startAnimation(animation);
animation.setRepeatCount(Animation.INFINITE);
Animation animation2 = new TranslateAnimation(0, 0, -500, 500);
animation2.setDuration(4000);
imageview2.startAnimation(animation2);
imageview2.setStartOffset(1000);
animation2.setRepeatCount(Animation.INFINITE);
The problem is that, after sometime imageview overlaps imageview2.
What Can I do to avoid the overlapping of 2 images ?
Any pointer would be appreciated.
You might want to try something like this:
private boolean isViewOverlapping(View firstView, View secondView) {
int[] firstPosition = new int[2];
int[] secondPosition = new int[2];
firstView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
firstView.getLocationOnScreen(firstPosition);
secondView.getLocationOnScreen(secondPosition);
int r = firstView.getMeasuredWidth() + firstPosition[0];
int l = secondPosition[0];
return r >= l && (r != 0 && l != 0);
}
This is a method that will take in two views and check whether they are overlapping. If they are, it will return a boolean of true. I would presume that once you get this boolean returned as true, you would then want to carry out another action to ensure they are not overlapped anymore, such as moving one view down 400 pixels. This would then result in the images not overlapping and you would have avoided the worrying situation. Hope this helps!
int imgSize = 30;
final ShapeDrawable redDot = new ShapeDrawable(new OvalShape());
redDot.getPaint().setColor(Color.RED);
redDot.setIntrinsicHeight(imgSize);
redDot.setIntrinsicWidth(imgSize);
final Bitmap bitmap = Bitmap.createBitmap(imgSize, imgSize, Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(bitmap);
redDot.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
redDot.draw(canvas);
ImageView imgAnimArea = new ImageView(getActivity());
imgAnimArea.setImageBitmap(bitmap);
imgAnimArea.setScaleType(ImageView.ScaleType.CENTER);
animationsView.addView(imgAnimArea);
final AnimationSet animSetRedDot = new AnimationSet(true);
// animSetRedDot.setFillAfter(true);
// animSetRedDot.setFillEnabled(true);
Animation aniRepeatFadeIn = null;
Animation aniRepatFadeOut = null;
// fade out
aniRepatFadeOut = new AlphaAnimation(1, 0);
aniRepatFadeOut.setStartOffset(3000);
aniRepatFadeOut.setDuration(300);
animSetRedDot.addAnimation(aniRepatFadeOut);
// fade out animation works only if remove this part
aniRepeatFadeIn = new AlphaAnimation(0, 1);
aniRepeatFadeIn.setStartOffset(6000);
aniRepeatFadeIn.setDuration(300);
animSetRedDot.addAnimation(aniRepeatFadeIn);
imgAnimArea.startAnimation(animSetRedDot);
Its simple code (at least the animation part) but has very strange behavior. Basically before animation it creates a shape (small red circle) converts it to a bitmap and adds it to animationsView(FrameLayout) as ImageView's source (imgAnimArea).
So my red dot fades out but never appears back and it works only in case the fade in part is removed even thou the fade in fires later than fade out. I was trying also to set fade out to .5f instead of 0. In this case it fades out a half of visibility.
Also I had tried to animate animationsView but result is the same - only fade out part works if no fade in part added and if fade in part added then whole animation doesn't work at all.
I could see the shape with no animation added at all. Also I could see it after animation finishes in any case. Enabling or disabling FillAfter has no effect at all.
So the question is whats wrong here? Why fade in animation does not work? Why the whole animation does not work if fade in animation added?
here you have two ways how to do it (see if statement inside onClick() method)
one is preferred one not, the choice is yours
final TextView tv = new TextView(this);
tv.setText("click me");
tv.setTextSize(40);
tv.setTextColor(0xffeeeeee);
tv.setBackgroundColor(0xaa00ff00);
tv.setGravity(Gravity.CENTER);
OnClickListener l = new OnClickListener() {
#Override
public void onClick(View v) {
Animation a;
boolean preferred = true;
if (preferred) {
Log.d(TAG, "onClick using custom Interpolator, preferred way");
// this is a preferred way: custom Interpolator
a = new AlphaAnimation(0, 1);
Interpolator i = new Interpolator() {
#Override
public float getInterpolation(float input) {
return (float) (1 - Math.sin(input * Math.PI));
}
};
a.setInterpolator(i);
} else {
Log.d(TAG, "onClick using AnimationSet, NOT preferred way");
AnimationSet set = new AnimationSet(true);
AlphaAnimation alpha0 = new AlphaAnimation(1, 0);
alpha0.setDuration(1000);
alpha0.setFillEnabled(true);
alpha0.setFillBefore(false);
alpha0.setFillAfter(false);
set.addAnimation(alpha0);
AlphaAnimation alpha1 = new AlphaAnimation(0, 1);
alpha1.setDuration(1000);
alpha1.setFillEnabled(true);
alpha1.setFillBefore(false);
alpha1.setFillAfter(false);
alpha1.setStartOffset(1000);
set.addAnimation(alpha1);
a = set;
}
a.setDuration(2000);
tv.startAnimation(a);
}
};
tv.setOnClickListener(l);
setContentView(tv);
I have two animation with different duration like below:
Anim 1:
TranslateAnimation trans1 = new TranslateAnimation(0, 0, 0, 500);
trans1.setStartOffset(0);
trans1.setDuration(5000);
trans1.setFillAfter(true);
Anim 2:
TranslateAnimation trans2 = new TranslateAnimation(0, -100, -200, -200);
trans2.setDuration(200);
trans2.setRepeatCount(25);
trans2.setFillAfter(true);
As you see these animation have different durations. I would like to animate Anim2 (duration 200) in loop 25 times during one time Anim1 (duration 5000) animation from Y: 0 to 500.
I've tried to do with AnimationSet and addAnimation but it doesn't want to work.
Could You give me some tips how can I solve this problem?
My code:
AnimationSet rootSet = new AnimationSet(true);
rootSet.setInterpolator(new AccelerateInterpolator());
rootSet.setRepeatMode(Animation.INFINITE);
rootSet.setRepeatCount(200);
rootSet.setDuration(5000);
rootSet.setFillAfter(true);
TranslateAnimation trans1 = new TranslateAnimation(0, 0, 0, 500);
trans1.setStartOffset(0);
trans1.setDuration(5000);
trans1.setFillAfter(true);
rootSet.addAnimation(trans1);
AnimationSet rootSet2 = new AnimationSet(true);
rootSet2.setInterpolator(new AccelerateInterpolator());
rootSet2.setRepeatMode(Animation.INFINITE);
rootSet2.setRepeatCount(200);
rootSet2.setDuration(200);
TranslateAnimation trans2 = new TranslateAnimation(0, -100, -200, -200);
trans2.setDuration(200);
trans2.setRepeatCount(25);
trans2.setFillAfter(true);
rootSet2.addAnimation(trans2);
rootSet.addAnimation(rootSet2);
iv.startAnimation(rootSet);
EDIT:
When I play only trans2 animation it repeats 25 times as I wanted (in horizontal way).
And additionally I would like this animation to animate (whole horizontal animation not only imageview) in vertical way (trans1).
I hope that this description will be clearer.
When I added these two animations in one AnimationSet the first animation doesnt work at all and imageview (not animationn) is translated linear to -200,500.
Now I see what you want to do. You probably are better of doing multiple animations - one for each "line". Add an AnimationListener to know when the previous Animation ends (onAnimationEnd callback), jump down one line and go from right to left again.
They all basically are the same, just the fromYDelta and toYDelta values would change for each Animation.
OK here's the problem
i have an ImageView in my activity, here's what it looks in main.xml:
<ImageView
android:id="#+id/ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_gravity="center_horizontal"/>
I want this image to move -200(left) and then to 100(right) and then back to 0 with bouncing effect.
I've implement this with my code:
as = new AnimationSet(true);
as.setFillEnabled(true);
as.setInterpolator(new BounceInterpolator());
TranslateAnimation ta = new TranslateAnimation(-300, 100, 0, 0);
ta.setDuration(2000);
as.addAnimation(ta);
AnimationSet sa = new AnimationSet(true);
sa.setFillEnabled(true);
sa.setInterpolator(new DecelerateInterpolator());
TranslateAnimation ta2 = new TranslateAnimation(100, 0, 0, 0);
ta2.setDuration(2000);
sa.addAnimation(ta2);
as.addAnimation(sa);
you can see at the code the X transition that i want (-300,100) then (100, 0)
however, the image doesn't move like it should, instead it just stop at 100 and then bouncing...
hmmm...., do you guys know what is wrong or what should i do to accomplish this?
If I'm not mistaking, you're shooting for a sequence of animations.
Interestingly, once you start an AnimationSet, all the animations added are ran simultaneously and not sequentially; therefore you need to setStartOffset(long offSet) for each animation that follows the first animation.
Maybe something like this will work...
as = new AnimationSet(true);
as.setFillEnabled(true);
as.setInterpolator(new BounceInterpolator());
TranslateAnimation ta = new TranslateAnimation(-300, 100, 0, 0);
ta.setDuration(2000);
as.addAnimation(ta);
TranslateAnimation ta2 = new TranslateAnimation(100, 0, 0, 0);
ta2.setDuration(2000);
ta2.setStartOffset(2000); // allowing 2000 milliseconds for ta to finish
as.addAnimation(ta2);
I suggest you to use ObjectAnimator. It is very easy to implement your case. Your animation may look like this:
ObjectAnimator animator1 = ObjectAnimator.ofFloat(targetView, "translationX", -200f);
animator1.setRepeatCount(0);
animator1.setDuration(1000);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(targetView, "translationX", 100f);
animator2.setRepeatCount(0);
animator2.setDuration(1000);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(targetView, "translationX", 0f);
animator3.setRepeatCount(0);
animator3.setDuration(1000);
//sequencial animation
AnimatorSet set = new AnimatorSet();
set.play(animator1).before(animator2);
set.play(animator2).before(animator3);
set.start();
If you are not familior with ObjectAnimator, you can check this android example tutorial:
Android View Animation Example
Something like this is very easy in 3.0 and above. Here are two links that I used to accomplish something similar.
http://android-developers.blogspot.com/2011/02/animation-in-honeycomb.html
http://developer.android.com/reference/android/animation/AnimatorSet.Builder.html