1. 首頁
  2. 問答
  3. 如何使用onAnimationend（）逐個開始動畫？

如何使用onAnimationend（）逐個開始動畫？

2015-07-11 35 views
2

我正在製作一個由七個圓圈組成的動畫。如何使用onAnimationend（）逐個開始動畫？

我用畫布上的插補器和畫圓圈，動畫相當好。但我想每個圓圈開始一個接一個地（一個接一個）/

enter image description here

我開發了這個庫項目和下面是我的Java文件。

import android.animation.Animator; 
import android.animation.AnimatorListenerAdapter; 
import android.animation.ObjectAnimator; 
import android.animation.ValueAnimator; 
import android.content.Context; 
import android.content.res.TypedArray; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.drawable.ShapeDrawable; 
import android.graphics.drawable.shapes.OvalShape; 
import android.util.AttributeSet; 
import android.view.View; 
import android.view.animation.AccelerateDecelerateInterpolator; 
import android.view.animation.AnticipateOvershootInterpolator; 
import android.util.Log; 
import android.view.animation.LinearInterpolator; 

import teamdapsr.loaders.lib.utils.MeasureUtils; 

/** 
* Created by Devesh on 08-Jul-15. 
*/ 
public class CubicBezierRotate extends View{ 

    private int i=0; 
    private int radius = 0, centerx, centery; 
    private ShapeDrawable circleOne, circleTwo, circleThree, circlesmall; 
    protected Paint paint[]; 
    protected ValueAnimator anim1, anim2, anim3; 
    public int getRadius(){ return radius; } 
    public void setRadius(int radius){ this.radius = radius; } 

    public CubicBezierRotate(Context context, AttributeSet attrs) 
    { 
     super(context, attrs); 

     TypedArray a = context.getTheme().obtainStyledAttributes(
       attrs, 
       R.styleable.CubicBezierRotate, 
       0, 0 
     ); 

     try 
     { 
      radius = a.getInt(R.styleable.CubicBezierRotate_radius, 0); 
     } 
     catch (Exception e) 
     { 
      e.printStackTrace(); 
     } 
     finally 
     { 
      a.recycle(); 
     } 
     init(); 
    } 

    protected void init() 
    { 
     circleOne = new ShapeDrawable(new OvalShape()); 
     circleTwo = new ShapeDrawable(new OvalShape()); 
     circleThree = new ShapeDrawable(new OvalShape()); 


     circleOne.getPaint().setColor(0x99ff0000); 
     circleTwo.getPaint().setColor(0x9900ff00); 
     circleThree.getPaint().setColor(0x990000ff); 

     ObjectAnimator animator = ObjectAnimator.ofInt(this, "radius", 0, 100); 
     animator.setDuration(5000); 
     animator.setInterpolator(new AnticipateOvershootInterpolator()); 

/*  Thread thread = new Thread() { 
      @Override 
      public void run() { 
       try { 
        while(true) { 
         sleep(50); 
         updateBounds(); 
        } 
       } catch (InterruptedException e) { 
        e.printStackTrace(); 
       } 
      } 
     };*/ 


     paint = new Paint[3]; 

     paint[0] = new Paint(Paint.ANTI_ALIAS_FLAG); 
     paint[1] = new Paint(Paint.ANTI_ALIAS_FLAG); 
     paint[2] = new Paint(Paint.ANTI_ALIAS_FLAG); 

     paint[0].setStyle(Paint.Style.FILL); 
     paint[1].setStyle(Paint.Style.FILL); 
     paint[2].setStyle(Paint.Style.FILL); 

     paint[0].setColor(0x99999999); 
     paint[1].setColor(0x99999999); 
     paint[2].setColor(0x99999999); 

    } 

    protected void setupAnimations() 
    { 

     anim1 = ValueAnimator.ofInt(0, (int)(0.10*getMeasuredHeight())); 
     anim2 = ValueAnimator.ofInt(0, (int)(0.10*getMeasuredHeight())); 
     anim3 = ValueAnimator.ofInt(0, (int)(0.10*getMeasuredHeight())); 

     anim1.setDuration(1500); 
     anim2.setDuration(1500); 
     anim3.setDuration(1500); 

     anim1.setInterpolator(new AccelerateDecelerateInterpolator()); 
     anim2.setInterpolator(new LinearInterpolator()); 
     anim3.setInterpolator(new AnticipateOvershootInterpolator()); 

     anim1.setRepeatMode(ValueAnimator.REVERSE); 
     anim2.setRepeatMode(ValueAnimator.REVERSE); 
     anim3.setRepeatMode(ValueAnimator.REVERSE); 

     anim1.setRepeatCount(ValueAnimator.INFINITE); 
     anim2.setRepeatCount(ValueAnimator.INFINITE); 
     anim3.setRepeatCount(ValueAnimator.INFINITE); 

//  anim2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
//   @Override 
//   public void onAnimationUpdate(ValueAnimator animation) { 
//    int animProgress = (Integer) animation.getAnimatedValue(); 
//   } 
//  }); 
// 
//  anim1.addListener(new AnimatorListenerAdapter() { 
//   @Override 
//   public void onAnimationEnd(Animator animation) { 
//    super.onAnimationEnd(animation); 
//   } 
//  }); 
     anim1.start(); 
     anim2.start(); 
     anim3.start(); 
    } 
    protected void updateBounds(int radius) 
    { 
/* 
     circleOne.setBounds(radius, radius, radius, radius); 
     circleTwo.setBounds(radius, radius, radius, radius); 
     circleThree.setBounds(radius, radius, radius, radius); 
*/ 

     invalidate(); 
     //requestLayout(); 
    } 

    @Override 
    public void onDraw(Canvas canvas) 
    { 

      Log.i("radius", "Radius1 = " + (int) (anim1.getAnimatedValue())); 
      Log.i("radius", "Radius2 = " + (int) (anim2.getAnimatedValue())); 
      Log.i("radius", "Radius3 = " + (int) (anim3.getAnimatedValue())); 

     canvas.drawCircle(50, getMeasuredHeight()/2, (int)(anim1.getAnimatedValue()), paint[0]); 

     canvas.drawCircle(90, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[1]); 

     canvas.drawCircle(130, getMeasuredHeight()/2, (int)(anim3.getAnimatedValue()), paint[2]); 
     canvas.drawCircle(170, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 
      canvas.drawCircle(210, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 
      canvas.drawCircle(250, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 
      canvas.drawCircle(290, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 


//  while (i<7) 
//  { 
//   switch (i) 
//   { 
//    case 0 : 
//     canvas.drawCircle(50, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[0]); 
//     canvas.drawCircle(90, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[1]); 
//     canvas.drawCircle(130, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 
//     canvas.drawCircle(170, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 
//     try { 
//      Thread.sleep(1000); 
//     } catch (InterruptedException e) { 
//      e.printStackTrace(); 
//     } 
//     i++; 
//     break; 
//    case 1 : 
// 
//     canvas.drawCircle(210, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 
//     canvas.drawCircle(250, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 
//     canvas.drawCircle(290, getMeasuredHeight()/2, (int)(anim2.getAnimatedValue()), paint[2]); 
//     try { 
//      Thread.sleep(50); 
//     } catch (InterruptedException e) { 
//      e.printStackTrace(); 
//     } 
//     break; 
// 
//   } 
//  } 
      try { 
       Thread.sleep(50); 
      } catch (InterruptedException e) { 
       e.printStackTrace(); 
      } 
     updateBounds(0); 

    } 

    @Override 
    protected void onSizeChanged(int w, int h, int oldw, int oldh) 
    { 
     super.onSizeChanged(w, h, oldw, oldh); 
    } 

    @Override 
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
    { 
     // Get the width measurement 
     int widthSize = MeasureUtils.getMeasurement(widthMeasureSpec, getDesiredWidth()); 

     // Get the height measurement 
     int heightSize = MeasureUtils.getMeasurement(heightMeasureSpec, getDesiredHeight()); 

     centerx = (int)(0.5*MeasureSpec.getSize(widthMeasureSpec)); 
     centery = (int)(0.5*MeasureSpec.getSize(heightMeasureSpec)); 

     //MUST call this to store the measurements 
     setMeasuredDimension(widthSize + 10, heightSize + 10); 

     setupAnimations(); 
    } 

    private int getDesiredWidth() 
    { 
     // TO-DO Calculate width from child components. 

     return 2*radius+1000; 
    } 

    private int getDesiredHeight() 
    { 
     // TO-DO Calculate height from chile components. 
     return 2*radius+100; 
    } 

}

請幫幫我。 我想逐一開始每個圓形動畫（下一個圓只在上一個結束時開始）。 和整個週期就像是「1 2 3 4 5 6 7」然後從結尾「7 6 5 4 3 2 1」

來源

2015-07-11 pa1pal

回答

0

爲什麼不使用animation-list？ 。

步驟1：定義圖片，以獲得動畫的每一步

步驟2：建立應包含像這樣的可繪製xml文件（實施例動畫的7個圓圈）：

<animation-list android:id="@+id/progressCircles" android:oneshot="false" 
     xmlns:android="http://schemas.android.com/apk/res/android"> 
     <item android:drawable="@drawable/progress_circle1" android:duration="150" /> 
     <item android:drawable="@drawable/progress_circle2" android:duration="150" /> 
     <item android:drawable="@drawable/progress_circle3" android:duration="150" /> 
     <item android:drawable="@drawable/progress_circle4" android:duration="150" /> 
     <item android:drawable="@drawable/progress_circle5" android:duration="150" /> 
     <item android:drawable="@drawable/progress_circle6" android:duration="150" /> 
     <item android:drawable="@drawable/progress_circle7" android:duration="150" /> 
    </animation-list>

STEP 3：在您的佈局文件中創建您的ImageView，並設置progressCircles爲您的圖像android:src：

<ImageView 
    android:id="@+id/progress_bar" 
    android:layout_alignParentRight="true" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/progressCircles" />

STEP 4（ Optionnal）：檢索對圖像和AnimationDrawable的引用，以便跟蹤示例等的進度：

ImageView imgProgress = (ImageView)findViewById(R.id.progress_bar); 
    if (imgProgress != null) { 
     imgProgress.setVisibility(View.VISIBLE); 
     AnimationDrawable animation = (AnimationDrawable)progress.getDrawable(); 
     animation.setCallback(progress); 
     animation.setVisible(true, true); 
    }

來源

2015-07-11 08:42:53 Houcine

相關問題

 相關問題