Take the 2-minute tour ×

Possible Duplicate:
Android, move bitmap along a path?

I want to move an image through a curved path.Is it possible in android ? I searched a lot but i can only find about scale,rotate and translate animation.So anyone have any idea please help.Is it possible in android?

share|improve this question

marked as duplicate by George Stocker Jul 11 '12 at 2:27


4 Answers 4

up vote 1 down vote accepted

You can do a Frame by Frame animation. You can position the object step by step to create a curve. That will be of limited reuse, but you can do it.

Or you can write your own animation to create a subclass of TweenAnimation that can animate along a curve. If you're good with math and can understand bezier curves then that might be a straight forward option. Once you have that class you could easily animate across any curved path, but it's more work.


Here's some VB code:


Here's some Java code:


share|improve this answer
Thanks.Do you have any example or any link of any posts? –  Android Killer Jul 27 '11 at 19:29
Can you tell me how can i create my own animation class as subclass of tweenanimation. –  Android Killer Jul 28 '11 at 9:47

Below is fully functioning code that will animate along a curved path defined by three points. A Point is just a class holding an x value and a y value (though you could easily extend it for more dimensions).

All the m variables are taken from TranslateAnimation and used in in a similar manner, so you should be able to compare it to the TranslateAnimation code relatively eaSILY if something doesn't make sense.

The calls to resolveSize in initialize mean that you can specify the start, end, and radius of the arc using any of the Animation types (ABSOLUTE, RELATIVE_TO_SELF, RELATIVE_TO_PARENT) just as you would for a normal TranslateAnimation.

calcBezier calculates the quadratic bezier curve taken directly from wikipedia. The Bezier curve is supposed to allow for smooth scaling and is common in graphics (and also used in Android's Path class).

The actual movement happens in applyTransformation. interpolatedTime gives a value between 0 and 1, which increases nonlinearly depending on the interpolator provided. dx and dy are the actual x and y points along the curve for the given time.

The only limitation of this class is that the largest change in y always occurs at the center of the curve (see the calculation for middleX in initialize). However it would be easy to modify, for example, to give a particular point along the curve at which the high point should occur if you want a non-symmetric curve.

Looking at the android code for TranslateAnimation was particularly helpful. See: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.3.5_r1/android/view/animation/TranslateAnimation.java#TranslateAnimation

public class ArcTranslate extends Animation {

private Point start;
private Point end;
private Point middle;
private final float mFromXValue;
private final float mToXValue;
private final float mYValue;
private final int mFromXType;
private final int mToXType;
private final int mYType;

 * A translation along an arc defined by three points and a Bezier Curve
 * @param duration - the time in ms it will take for the translation to complete
 * @param fromXType - One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.
 * @param fromXValue - Change in X coordinate to apply at the start of the animation
 * @param toXType - One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.
 * @param toXValue - Change in X coordinate to apply at the end of the animation
 * @param yType - One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.
 * @param yValue - Change in Y coordinate to apply at the middle of the animation (the radius of the arc)
public ArcTranslate(long duration, int fromXType, float fromXValue,
        int toXType, float toXValue, int yType, float yValue){

     mFromXValue = fromXValue;
     mToXValue = toXValue;
     mYValue = yValue;

     mFromXType = fromXType;
     mToXType = toXType;
     mYType = yType;


/** Calculate the position on a quadratic bezier curve given three points
 *  and the percentage of time passed.
 * from http://en.wikipedia.org/wiki/B%C3%A9zier_curve
 * @param interpolatedTime - the fraction of the duration that has passed where 0<=time<=1
 * @param p0 - a single dimension of the starting point
 * @param p1 - a single dimension of the middle point
 * @param p2 - a single dimension of the ending point
private long calcBezier(float interpolatedTime, float p0, float p1, float p2){
    return Math.round((Math.pow((1 - interpolatedTime), 2) * p0)
           + (2 * (1 - interpolatedTime) * interpolatedTime * p1)
           + (Math.pow(interpolatedTime, 2) * p2));

protected void applyTransformation(float interpolatedTime, Transformation t) {
    float dx = calcBezier(interpolatedTime, start.x, middle.x, end.x);
    float dy = calcBezier(interpolatedTime, start.y, middle.y, end.y);

    t.getMatrix().setTranslate(dx, dy);

    super.initialize(width, height, parentWidth, parentHeight);
    float startX = resolveSize(mFromXType, mFromXValue, width, parentWidth);
    float endX = resolveSize(mToXType, mToXValue, width, parentWidth);
    float middleY = resolveSize(mYType, mYValue, width, parentWidth);
    float middleX = startX + ((endX-startX)/2);
    start = new Point(startX, 0);
    end = new Point(endX, 0);
    middle = new Point(middleX, middleY);
share|improve this answer
@Monkeyless Thank you so much for the code. I managed to animate an imageview using this code. But I am having trouble in setting an onClickListener to an imageview while it is animating. I have posted a question here. Please help. –  jincy abraham May 30 at 4:38

It was inspired by Monkeyless's answer. I created a subclass of Animation, use PathMeasure to calculate the translation. You can just create a new PathAnimation with a Path, and use it like any other Animations.


public class PathAnimation extends Animation {
private PathMeasure measure;
private float[] pos = new float[2];
public PathAnimation(Path path) {
    measure = new PathMeasure(path, false);

protected void applyTransformation(float interpolatedTime, Transformation t){
    measure.getPosTan(measure.getLength() * interpolatedTime, pos,null);
    t.getMatrix().setTranslate(pos[0], pos[1]);
share|improve this answer
I've used Path.addArc() to create the arc I want my View to travel on, and then this solution as the animation itself. Nice! –  Vaiden Dec 9 '13 at 21:21

You can create your own class like this:

public class BezierTranslateAnimation extends TranslateAnimation {

private int mFromXType    = ABSOLUTE;
private int mToXType      = ABSOLUTE;
private int mFromYType    = ABSOLUTE;
private int mToYType      = ABSOLUTE;
private float mFromXValue = 0.0f;
private float mToXValue   = 0.0f;
private float mFromYValue = 0.0f;
private float mToYValue   = 0.0f;
private float mFromXDelta;
private float mToXDelta;
private float mFromYDelta;
private float mToYDelta;
private float mBezierXDelta;
private float mBezierYDelta;

public BezierTranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta, float bezierXDelta, float bezierYDelta) {
     super(fromXDelta, toXDelta, fromYDelta, toYDelta);

      mFromXValue = fromXDelta;
      mToXValue   = toXDelta;
      mFromYValue = fromYDelta;
      mToYValue   = toYDelta;
      mFromXType  = ABSOLUTE;
      mToXType    = ABSOLUTE;
      mFromYType  = ABSOLUTE;
      mToYType    = ABSOLUTE;
      mBezierXDelta = bezierXDelta;
      mBezierYDelta = bezierYDelta;


protected void  applyTransformation(float interpolatedTime, Transformation t) {

    float dx=0,dy=0;

    if (mFromXValue != mToXValue) {

        dx  = (float) ((1.0-interpolatedTime)*(1.0-interpolatedTime)*mFromXValue + 2.0*interpolatedTime*(1.0-interpolatedTime)*mBezierXDelta + interpolatedTime*interpolatedTime*mToXValue);

    if (mFromYValue != mToYValue) {

        dy  = (float) ((1.0-interpolatedTime)*(1.0-interpolatedTime)*mFromYValue + 2.0*interpolatedTime*(1.0-interpolatedTime)*mBezierYDelta + interpolatedTime*interpolatedTime*mToYValue);

    t.getMatrix().setTranslate(dx, dy);



Then use it with this signature:

share|improve this answer
you don't use the types of the animations... –  android developer May 1 '13 at 13:43
