how to make a imageview go in a curve

Question

i am new in android...i want to make a ferris wheel game and i need to move the ferris wheel chair in the wheel...i use:

          TranslateAnimation transAnimation1 = new TranslateAnimation(0, 145, 0, 275);
          transAnimation1.setDuration(6000);
          ChairA1.startAnimation(transAnimation1);

          TranslateAnimation transAnimation2 = new TranslateAnimation(0, 50, 0, 50);
          transAnimation2.setDuration(6000);
          ChairA2.startAnimation(transAnimation2);

          TranslateAnimation transAnimation3 = new TranslateAnimation(0, 50, 0, 50);
          transAnimation3.setDuration(6000);
          ChairA3.startAnimation(transAnimation3);

          TranslateAnimation transAnimation4 = new TranslateAnimation(0, 50, 0, 50);
          transAnimation4.setDuration(6000);
          ChairA4.startAnimation(transAnimation4);

          TranslateAnimation transAnimation5 = new TranslateAnimation(0, 50, 0, 50);
          transAnimation5.setDuration(6000);
          ChairA5.startAnimation(transAnimation5);

          TranslateAnimation transAnimation6 = new TranslateAnimation(0, 50, 0, 50);
          transAnimation6.setDuration(6000);
          ChairA6.startAnimation(transAnimation6);

          TranslateAnimation transAnimation7 = new TranslateAnimation(0, 50, 0, 50);
          transAnimation7.setDuration(6000);
          ChairA7.startAnimation(transAnimation7);

          TranslateAnimation transAnimation8 = new TranslateAnimation(0, 50, 0, 50);
          transAnimation8.setDuration(6000);
          ChairA8.startAnimation(transAnimation8);

i have 8 chairs in my ferris wheel but the problem is the wheel is circle and i cant make the ImageView(chair) in a curve destination...will someone help me...i really need a help on this

Answer 1

Here is the code. It's not well written, but it does the job. Don't ask me how I did the initial positioning of the chairs. I just used a RelativeLayout and guessed at the margins. To make this animation look nice and properly aligned on different phones, you will still have plenty of work to do.

Here is MainActivity.java

package com.example.ferriswheel;

import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {
    RelativeLayout ferrisWheelLayout;
    ObjectAnimator spin;
    ImageView chairView1, chairView2, chairView3, chairView4;
    ObjectAnimator counterSpin1, counterSpin2, counterSpin3, counterSpin4;
    boolean currentlySpinning;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onToggleClicked(View view) {
        if (currentlySpinning) {
            stopAnimation(view); 
            currentlySpinning = false;
        } else {
            startAnimation(view);
            currentlySpinning = true;
        }
    }


    public void stopAnimation(View view) {
        spin.cancel();
        counterSpin1.cancel();
        counterSpin2.cancel();
        counterSpin3.cancel();
        counterSpin4.cancel();  
    }

    public void startAnimation(View view) {
        chairView1 = (ImageView) findViewById(R.id.chair1);
        chairView2 = (ImageView) findViewById(R.id.chair2);
        chairView3 = (ImageView) findViewById(R.id.chair3);
        chairView4 = (ImageView) findViewById(R.id.chair4);
        ferrisWheelLayout = (RelativeLayout) findViewById(R.id.parentWheelLayout);

        spin = ObjectAnimator.ofFloat(ferrisWheelLayout, "rotation", 0f, 360f);
        spin.setRepeatMode(-1);
        spin.setRepeatCount(Animation.INFINITE);
        spin.setDuration(8000);
        spin.setInterpolator(new LinearInterpolator());
        spin.start();

        counterSpin1 = ObjectAnimator
                .ofFloat(chairView1, "rotation", 0f, -360f);
        counterSpin1.setRepeatMode(-1);
        counterSpin1.setRepeatCount(Animation.INFINITE);
        counterSpin1.setDuration(8000);
        counterSpin1.setInterpolator(new LinearInterpolator());
        counterSpin1.start();

        counterSpin2 = ObjectAnimator
                .ofFloat(chairView2, "rotation", 0f, -360f);
        counterSpin2.setRepeatMode(-1);
        counterSpin2.setRepeatCount(Animation.INFINITE);
        counterSpin2.setDuration(8000);
        counterSpin2.setInterpolator(new LinearInterpolator());
        counterSpin2.start();

        counterSpin3 = ObjectAnimator
                .ofFloat(chairView3, "rotation", 0f, -360f);
        counterSpin3.setRepeatMode(-1);
        counterSpin3.setRepeatCount(Animation.INFINITE);
        counterSpin3.setDuration(8000);
        counterSpin3.setInterpolator(new LinearInterpolator());
        counterSpin3.start();

        counterSpin4 = ObjectAnimator
                .ofFloat(chairView4, "rotation", 0f, -360f);
        counterSpin4.setRepeatMode(-1);
        counterSpin4.setRepeatCount(Animation.INFINITE);
        counterSpin4.setDuration(8000);
        counterSpin4.setInterpolator(new LinearInterpolator());
        counterSpin4.start();

    }
}

And here is its layout activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parentWheelLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:onClick="onToggleClicked" >

    <ImageView
        android:id="@+id/wheelSpokes"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/chair1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:layout_marginBottom="100dp"
        android:layout_marginLeft="100dp"
        android:layout_marginRight="100dp"
        android:layout_marginTop="100dp"
        android:src="@drawable/ic_launcher" />

        <ImageView
        android:id="@+id/chair2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:layout_marginBottom="100dp"
        android:layout_marginLeft="200dp"
        android:layout_marginRight="100dp"
        android:layout_marginTop="100dp"
        android:src="@drawable/ic_launcher" />

        <ImageView
        android:id="@+id/chair3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:layout_marginBottom="100dp"
        android:layout_marginLeft="100dp"
        android:layout_marginRight="100dp"
        android:layout_marginTop="300dp"
        android:src="@drawable/ic_launcher" />

         <ImageView
             android:id="@+id/chair4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="top"
             android:layout_marginBottom="100dp"
             android:layout_marginLeft="200dp"
             android:layout_marginRight="100dp"
             android:layout_marginTop="300dp"
             android:adjustViewBounds="true"
             android:src="@drawable/ic_launcher" />


</RelativeLayout>

Some of the theory behind the code:

Imagine a ferris wheel turning 90 degrees one way. What does one chair on that ferris wheel usually do during that time? That chair moves with the ferris wheel along from the axis of the wheel, and at the very same time, that chair also rotates minus 90 degrees on its own axis.

In other words, we could have the chair start rotating on its own axis, and at the same time, if we could combine both the ferris wheel and the chair by enclosing it in a larger view, then we could rotate that larger view from the larger axis at the same rate in the opposite direction.

Hope this makes sense to you.