5

I have an image view "stone" and am moving it from its current position to a X,Y position. I want it to move along a curve. Please let me know how I can do that(i have set the min api as 11)

ObjectAnimator moveX = ObjectAnimator.ofFloat(stone, "x", catPos[0] );
ObjectAnimator moveY = ObjectAnimator.ofFloat(stone, "y", catPos[1] );
AnimatorSet as = new AnimatorSet();
as.playTogether(moveX, moveY);
as.start();
Aparna
  • 835
  • 2
  • 23
  • 47

6 Answers6

9

The answer by Budius seems perfectly useful to me.

Here are the animator objects I use:

Purpose: Move View "view" along Path "path"

Android v21+:

// Animates view changing x, y along path co-ordinates
ValueAnimator pathAnimator = ObjectAnimator.ofFloat(view, "x", "y", path)

Android v11+:

// Animates a float value from 0 to 1 
ValueAnimator pathAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);

// This listener onAnimationUpdate will be called during every step in the animation
// Gets called every millisecond in my observation  
pathAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

float[] point = new float[2];

@Override
    public void onAnimationUpdate(ValueAnimator animation) {
        // Gets the animated float fraction
        float val = animation.getAnimatedFraction();

        // Gets the point at the fractional path length  
        PathMeasure pathMeasure = new PathMeasure(path, true);
        pathMeasure.getPosTan(pathMeasure.getLength() * val, point, null);

        // Sets view location to the above point
        view.setX(point[0]);
        view.setY(point[1]);
    }
});

Similar to: Android, move bitmap along a path?

Community
  • 1
  • 1
Dileep P G
  • 571
  • 5
  • 13
  • 1
    This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – qwerty_so May 15 '15 at 09:54
  • Thanks for the feedback. I have added working code from my solution to make it a complete answer. Hope this helps! – Dileep P G May 15 '15 at 10:21
  • This almost works, but it seems like the value ends up resetting when the animation completes (ValueAnimator example) – Matt Foley May 18 '17 at 01:32
  • You made two mistakes here. First of all, as @MattFoley mentioned, the ValueAnimator resets values at the end of the animation, so you need to pass `false` instead of `true` into the `PathMeasure` constructor. Secondly, you need to translate the view instead of changing its position by calling the `setX()` and `setY()` methods. Use the `setTranslationX()` and `setTranslationY()` methods. In fact, you have the right answer below, written by @Budius. – nullbyte Aug 05 '17 at 00:06
4

you have two options:

both needs a Path object that defines your curve:

Path path = new Path();
path. // define your curve here

if using Lollipop only (API 21) use ObjectAnimator.ofFloat(...path) like this:

ObjectAnimator.ofFloat(stone, View.X, View.Y, path).start();

if that's not an options, you use an AnimatorListener to receive updates about the each animator frame and use the PathMeasure to get the values on that point, like this:

PathMeasure pm;
float point[] = {0f, 0f};

private final ValueAnimator.AnimatorUpdateListener listener = 
       new ValueAnimator.AnimatorUpdateListener(){

   @Override
   public void onAnimationUpdate (ValueAnimator animation) {
        float val = animation.getAnimatedFraction();
        pm.getPosTan(pm.getLength() * val, point, null);
        stone.setTranslationX(point[0]);
        stone.setTranslationY(point[1]);
   }
}

// and then to animate
pm = new PathMeasure(path, false);
ValueAnimator a = ValueAnimator.ofFloat(0.0f 1.0f);
a.setDuration(/* your duration */);
a.setInterpolator(/* your interpolator */);
a.addUpdateListener(listener);
a.start();
Budius
  • 39,391
  • 16
  • 102
  • 144
3

Play around with the interpolators. For example set 2 different Interpolators for x and y :

moveX.setInterpolator(new AccelerateDecelerateInterpolator());

moveY.setInterpolator(new DecelerateInterpolator());

Theres more (LinearInterpolator, AccelerateInterpolator...) but I think this should be the combination you want.

A Honey Bustard
  • 3,433
  • 2
  • 22
  • 38
2

Thanks for the answers, but I found my own answer.Just added some extra x,y positions in the Objectanimator stmt. It went to those positions before coming to the final one and traced a path!

ObjectAnimator moveX = ObjectAnimator.ofFloat(stone, "x", catPos[0]-20,catPos[0]-10,catPos[0] );

ObjectAnimator moveY = ObjectAnimator.ofFloat(stone, "y",catPos[1]-20,catPos[1]-10, catPos[1] );
Aparna
  • 835
  • 2
  • 23
  • 47
  • I'm getting a NPE when I try to move an ImageView through a curve. path = new Path(); path.moveTo((float)(maxX/2)+(maxX/4),maxY/4); path.quadTo((float)(maxX/2)+(maxX/4),maxY/4, (float)(maxX/2)+(maxX/4)+30,maxY/2); ObjectAnimator animator = new ObjectAnimator(); animator.ofFloat(img,View.X,View.Y,path); animator.setDuration(1000); animator.setStartDelay(600); animator.start(); Exception is: java.lang.NullPointerException: Attempt to get length of null array – Rakesh Jun 03 '17 at 16:56
0

The Path class has methods for creating non-straight lines of several types; arcs, circles, ovals, rectangles, cubic & quadratic bezier curves, which you can then animate your object along.

As Budius points out, you do need to code for API 21 (Lollipop) or later to use paths with object translation. It is now over two years old.

On the other hand, there does seem a dearth of anything-more-than-very-simple examples of using paths "in the wild", so perhaps there's a reason they've not caught on yet.

Markers
  • 328
  • 1
  • 13
0

Check this link for 3 ways of animating several properties of a View in parallel: https://developer.android.com/guide/topics/graphics/prop-animation#view-prop-animator

The 1st way of doing it is using AnimatorSet.

Below is the 2nd way:

public static ObjectAnimator ofPropertyValuesHolder (Object target, 
            PropertyValuesHolder... values)

The API doc describes this constructor for ObjectAnimator as:

"This variant should be used when animating several properties at once with the same ObjectAnimator, since PropertyValuesHolder allows you to associate a set of animation values with a property name."

Example:

Keyframe kf0 = Keyframe.ofFloat(0f, 0f);
Keyframe kf1 = Keyframe.ofFloat(.5f, 360f);
Keyframe kf2 = Keyframe.ofFloat(1f, 0f);

PropertyValuesHolder transX = PropertyValuesHolder.ofKeyframe("translationX", kf0, kf1, kf2);
PropertyValuesHolder transY = PropertyValuesHolder.ofKeyframe("translationY", kf0, kf1, kf2);

ObjectAnimator transAnim = ObjectAnimator.ofPropertyValuesHolder(view2animate, transX, transY);
            transAnim.setDuration(5000);
            transAnim.start();

The example above moves view2animate in both x and y axis at the same time.

The 3rd way is to use ViewPropertyAnimator.

Qing
  • 172
  • 11