動畫模擬充電器
阿新 • • 發佈:2018-12-15
先自定義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) { } }); } } }