ZigZag Animation of image in android

Question

I am working an android app in which i have 10 balloons i want to animate those balloons in zig zag style. i am usning valueanimator my code is

    Display display = getWindowManager().getDefaultDisplay(); 
    display.getRectSize(mDisplaySize);

    DisplayMetrics metrics = new DisplayMetrics();
    display.getMetrics(metrics);
    mScale = metrics.density;

    mRootLayout = (RelativeLayout) findViewById(R.id.main_layout);

    new Timer().schedule(new ExeTimerTask(), 0, 2000);
}

public void startAnimation(final ImageView aniView) {

    aniView.setPivotX(aniView.getWidth()/2);
    aniView.setPivotY(aniView.getHeight()/2);
    aniView.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
            Toast.makeText(getBaseContext(), "Clicked", Toast.LENGTH_SHORT).show();

        }
    });
    long delay = new Random().nextInt(Constants.MAX_DELAY);

    final ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
    animator.setDuration(Constants.ANIM_DURATION);
    animator.setInterpolator(new AccelerateInterpolator());
    animator.setStartDelay(delay);

    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    //  int angle = 40 + (int)(Math.random() * 101);
        //int angle = 40 + (int)(Math.random() * 101);
        int movex = new Random().nextInt(mDisplaySize.right);

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value = ((Float) (animation.getAnimatedValue())).floatValue();
        //  aniView.setRotation(angle*value);
            aniView.setTranslationX((movex-40)*value);
            aniView.setTranslationY((mDisplaySize.bottom + (150*mScale))*value);



        }
    });

    animator.start();

}

private Handler mHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        int viewId = new Random().nextInt(LEAVES.length);
        Drawable d = getResources().getDrawable(LEAVES[viewId]);
        LayoutInflater inflate = LayoutInflater.from(FallAnimationActivity.this);
        ImageView imageView = (ImageView) inflate.inflate(R.layout.ani_image_view, null);
        imageView.setImageDrawable(d);
        mRootLayout.addView(imageView);

        mAllImageViews.add(imageView);          

        LayoutParams animationLayout = (LayoutParams) imageView.getLayoutParams();
        animationLayout.setMargins(0, (int)(-150*mScale), 0, 0);
        animationLayout.width = (int) (60*mScale);
        animationLayout.height = (int) (60*mScale);

        startAnimation(imageView);
    }
};

private class ExeTimerTask extends TimerTask {
    @Override
    public void run() {
        // we don't really use the message 'what' but we have to specify something.
        mHandler.sendEmptyMessage(Constants.EMPTY_MESSAGE_WHAT);
    }
}

but it's motion is not zigzag how to make animation zigzag any idea thanks in advance

Answer 1

try this:

class ZigZagAnimation extends Animation {
    private PathMeasure pm;
    float[] pos = new float[2];

    public ZigZagAnimation() {
        Path p = new Path();
        p.moveTo(0f, 0f);
        p.lineTo(12f, 5f);
        p.lineTo(8f, 14f);
        p.lineTo(25f, 17f);
        p.lineTo(13f, 31f);
        pm = new PathMeasure(p, false);
        setDuration(4000);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        float distance = pm.getLength() * interpolatedTime;
        pm.getPosTan(distance, pos, null);
        t.getMatrix().postTranslate(pos[0], pos[1]);
    }
}

Answer 2

I did it with two different animations, one to slide on X/Y axis and one for moving in the remain axis:

shake.xml (On Y axis):

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="40"
    android:fromYDelta="0%"
    android:toYDelta="-8%"
    android:repeatCount="5"
    android:repeatMode="reverse"
    />
</set>

in activity ( + X axis movement):

float ctr = 0f;
imageView.startAnimation(AnimationUtils.loadAnimation(this, R.anim.shake));
while (ctr <= X_YOU_WANT_TO_REACH) {
    imageView.animate().x(ctr).setDuration(500).start();
    ctr++;
}