Android - 对象动画 - 如何使动画顺序播放而不是同时播放

Question

我正在制作一个冒泡排序的演示。当点击按钮时，应该做到以下几点：

• 按长度顺序输出10个条形图 - 这是使用XML中的ImageViews完成的。
• 创建包含1到10整数的ArrayList，然后使用Collections.shuffle()进行洗牌。
• 使用对象动画在屏幕上洗牌条形图。
• 在运行冒泡排序时，通过交换接口中的两个条形图来显示每次交换。

当我运行应用程序时，它没有显示每次交换，而似乎是一次性播放所有内容，包括所有交换和甚至洗牌和交换在一起。它们最终都排好序了，但这不是一个视觉演示。以下是java代码（从早期实验中引入了许多不必要的库）：

`

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.LightingColorFilter;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.support.v7.app.ActionBarActivity;
import java.lang.*;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.widget.ImageView;
import java.util.Timer;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.Collections;
import java.util.concurrent.TimeUnit;


public class MainActivity extends ActionBarActivity {

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


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}



public void startAnimation(View view) {

    ImageView[] bars = new ImageView[10];

    ImageView bar1 = (ImageView) this.findViewById((R.id.bar1));
    ImageView bar2 = (ImageView) this.findViewById((R.id.bar2));
    ImageView bar3 = (ImageView) this.findViewById((R.id.bar3));
    ImageView bar4 = (ImageView) this.findViewById((R.id.bar4));
    ImageView bar5 = (ImageView) this.findViewById((R.id.bar5));
    ImageView bar6 = (ImageView) this.findViewById((R.id.bar6));
    ImageView bar7 = (ImageView) this.findViewById((R.id.bar7));
    ImageView bar8 = (ImageView) this.findViewById((R.id.bar8));
    ImageView bar9 = (ImageView) this.findViewById((R.id.bar9));
    ImageView bar10 = (ImageView) this.findViewById((R.id.bar10));

    bars[0] = bar1;
    bars[1] = bar2;
    bars[2] = bar3;
    bars[3] = bar4;
    bars[4] = bar5;
    bars[5] = bar6;
    bars[6] = bar7;
    bars[7] = bar8;
    bars[8] = bar9;
    bars[9] = bar10;

    ArrayList<Integer> lengthslist = new ArrayList<Integer>(10);

    for (int lengthsfiller = 0; lengthsfiller < 10; lengthsfiller++) {
        lengthslist.add(lengthsfiller);
    }

    Collections.shuffle(lengthslist);

    for (int shuffleReplacement = 0; shuffleReplacement < 10; shuffleReplacement++) {
        MoveBar(view, bars[shuffleReplacement], shuffleReplacement, lengthslist.get(shuffleReplacement));
    }

    bubbleSort(lengthslist, view, bars);
}

public void bubbleSort(ArrayList<Integer> list, View view, ImageView[] bars)
{
    for(int outerloop=0; outerloop<10; outerloop++)
    {
        for(int innerloop=0; innerloop < 9; innerloop++)
        {
            if(list.get(innerloop) > list.get(innerloop+1))
            {


                SwapBars(view, bars[list.get(innerloop)], bars[list.get(innerloop+1)], innerloop, innerloop + 1);


                Collections.swap(list, innerloop, innerloop + 1);

            }
        }

    }
}

public void MoveBar(View view, View bar, int currentArrayPosition, int newArrayPosition) {
    float scale = getResources().getDisplayMetrics().density;

    ObjectAnimator animation = ObjectAnimator.ofFloat(bar,"y", (20.0f + 30.0f*(currentArrayPosition)) * scale, (20.0f+ 30.0f*(newArrayPosition)) * scale);

    AnimatorSet moveSingleBarAnimSet = new AnimatorSet();

    moveSingleBarAnimSet.play(animation);

    moveSingleBarAnimSet.setDuration(1000);
    moveSingleBarAnimSet.setInterpolator(new  AccelerateDecelerateInterpolator());
    moveSingleBarAnimSet.start();


}

public void SwapBars(View view, ImageView bar1, ImageView bar2, int position1, int position2) {
    float scale = getResources().getDisplayMetrics().density;

    ObjectAnimator anim1 = ObjectAnimator.ofFloat(bar1,"x", 20.0f * scale, 220.0f * scale);
    ObjectAnimator anim2 = ObjectAnimator.ofFloat(bar1,"y", (20.0f + 30.0f* position1) * scale, (20.0f + 30.0f * position2) * scale);
    ObjectAnimator anim3 = ObjectAnimator.ofFloat(bar1,"x", 220.0f * scale, 20.0f * scale);

    ObjectAnimator anim4 = ObjectAnimator.ofFloat(bar2,"x", 20.0f * scale, 220.0f * scale);
    ObjectAnimator anim5 = ObjectAnimator.ofFloat(bar2,"y", (20.0f + 30.0f * position2) * scale, (20.0f + 30.0f * position1) * scale);
    ObjectAnimator anim6 = ObjectAnimator.ofFloat(bar2,"x", 220.0f * scale, 20.0f * scale);

    AnimatorSet animSet = new AnimatorSet();


    animSet.play(anim1).before(anim2).before(anim5).with(anim4);
    animSet.play(anim2).before(anim3).before(anim6).with(anim5);
    animSet.play(anim3).with(anim6);


    animSet.setDuration(1000);
    animSet.setInterpolator(new AccelerateDecelerateInterpolator());
    animSet.start();
}

同时，这是XML代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"        android:layout_width="match_parent"
android:layout_height="match_parent"       android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"   tools:context=".MainActivity">

<ImageView
    android:id="@+id/bar1"
    android:layout_width="50dp"
    android:layout_height="30dp"
    android:src="@drawable/bar"
    android:scaleType="centerCrop"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="20dp" />

<ImageView
    android:id="@+id/bar2"
    android:layout_width="75dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:scaleType="centerCrop"
    android:layout_below="@id/bar1"
    android:src="@drawable/bar"
    />

<ImageView
    android:scaleType="centerCrop"
    android:id="@+id/bar3"
    android:layout_width="100dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:layout_below="@id/bar2"
    android:src="@drawable/bar"
    />

<ImageView
    android:scaleType="centerCrop"
    android:id="@+id/bar4"
    android:layout_width="125dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:layout_below="@id/bar3"
    android:src="@drawable/bar"
    />

<ImageView
    android:scaleType="centerCrop"
    android:id="@+id/bar5"
    android:layout_width="150dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:layout_below="@id/bar4"
    android:src="@drawable/bar"
    />

<ImageView
    android:id="@+id/bar6"
    android:layout_width="175dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:scaleType="centerCrop"
    android:layout_below="@id/bar5"
    android:src="@drawable/bar"
    />

<ImageView
    android:id="@+id/bar7"
    android:layout_width="200dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:scaleType="centerCrop"
    android:layout_below="@id/bar6"
    android:src="@drawable/bar"
    />

<ImageView
    android:id="@+id/bar8"
    android:layout_width="225dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:scaleType="centerCrop"
    android:layout_below="@id/bar7"
    android:src="@drawable/bar"
    />

<ImageView
    android:id="@+id/bar9"
    android:layout_width="250dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:scaleType="centerCrop"
    android:layout_below="@id/bar8"
    android:src="@drawable/bar"
    />

<ImageView
    android:id="@+id/bar10"
    android:layout_width="275dp"
    android:layout_height="30dp"
    android:layout_marginLeft="20dp"
    android:scaleType="centerCrop"
    android:layout_below="@id/bar9"
    android:src="@drawable/bar"
    />


<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:id="@+id/button"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="93dp"
    android:onClick="startAnimation"
    />


</RelativeLayout>

我应该如何停止所有动画同时播放？对于 MoveBars 过程来说不那么重要，但是对于 SwapBars 过程需要显示单独的交换。任何帮助都将不胜感激 :)

编辑回答后：

使用 animSet.setStartDelay(时间毫秒)

- bhope

---

这是太多的代码需要处理了。你可以尝试使用一个线程来延迟你的动画，一个接一个地执行。 - Skynet

您可以使用AnimationListener来通知上一个动画何时结束，然后再触发下一个动画。 - Heisenberg

抱歉，我尝试使用线程，但它会延迟用户界面和所有交换操作。不过，我目前正在寻找解决这个问题的方法。 - bhope

Answer 1

您可以通过为每个创建的ObjectAnimator设置setStartDelay()来为每个动画设置不同的延迟。

- BrentM