1. 程式人生 > >動畫模擬充電器

動畫模擬充電器

先自定義view

@SuppressLint("AppCompatCustomView")
public class MyImageView extends ImageView {
    public MyImageView(Context context) {
        super(context);
    }

    public MyImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

寫佈局

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <bawei.com.xieyu20181213.MyImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="30dp"
        android:background="#999"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
    <LinearLayout
        android:id="@+id/line1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="10dp"
        android:paddingTop="5dp"
        android:background="#999"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image"
        >
        <bawei.com.xieyu20181213.MyImageView
            android:id="@+id/image5"
            android:layout_width="100dp"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="#99cc66"
            android:layout_height="50dp" />
        <bawei.com.xieyu20181213.MyImageView
            android:id="@+id/image4"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="10dp"
            android:layout_width="100dp"
            android:background="#99cc66"
            android:layout_height="50dp" />
        <bawei.com.xieyu20181213.MyImageView
            android:id="@+id/image3"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="10dp"
            android:layout_width="100dp"
            android:background="#99cc66"
            android:layout_height="50dp" />
        <bawei.com.xieyu20181213.MyImageView
            android:id="@+id/image2"
            android:layout_width="100dp"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="#99cc66"
            android:layout_height="50dp" />
        <bawei.com.xieyu20181213.MyImageView
            android:id="@+id/image1"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="#99cc66"
            android:layout_width="100dp"
            android:layout_height="50dp" />
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

main頁面程式碼

public class MainActivity extends AppCompatActivity {

    private int i=0;
    private ValueAnimator animator;
    private List<MyImageView> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        MyImageView image1=findViewById(R.id.image1);
        MyImageView image2=findViewById(R.id.image2);
        MyImageView image3=findViewById(R.id.image3);
        MyImageView image4=findViewById(R.id.image4);
        MyImageView image5=findViewById(R.id.image5);

        list=new ArrayList<>();
        list.add(image1);
        list.add(image2);
        list.add(image3);
        list.add(image4);
        list.add(image5);
        getData(i);
    }

    private void getData(final int i) {
        //當傳過來的引數為陣列長度時  把所有的顏色變為一開始的綠色
        if(i==5){
            //設定顏色變化
            animator = ValueAnimator.ofInt(Color.parseColor("#ffcc00"),Color.parseColor("#99cc66"));
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int color= (int) animation.getAnimatedValue();
                    for (int j=0;j<list.size();j++){
                        //迴圈改變顏色
                        list.get(j).setBackgroundColor(color);
                    }
                }
            });
            animator.setDuration(0);
            animator.setEvaluator(new ArgbEvaluator());
            animator.start();
            animator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    //重複呼叫方法 繼續變化顏色
                    getData(0);
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });
        }else{
            //設定顏色變化
            animator = ValueAnimator.ofInt(Color.parseColor("#99cc66"),Color.parseColor("#ffcc00"));
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int color= (int) animation.getAnimatedValue();
                    list.get(i).setBackgroundColor(color);
                }
            });
            animator.setDuration(500);
            animator.setEvaluator(new ArgbEvaluator());
            animator.start();
            animator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    //完成後呼叫方法
                    getData(i+1);
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });
        }
    }
}