一款非常簡(jiǎn)單酷炫的LoadingView動(dòng)畫(huà)效果

發(fā)布時(shí)間：2020-09-01 17:20:51 來(lái)源：腳本之家閱讀：135 作者：小豬快跑22 欄目：移動(dòng)開(kāi)發(fā)

今天看到一個(gè)銀行的APP上面的loadingview 挺好的，就嘗試著自己實(shí)現(xiàn)，覺(jué)得很簡(jiǎn)單，但自己實(shí)現(xiàn)起來(lái)還是發(fā)現(xiàn)了一些問(wèn)題。

LoadingView和下圖類(lèi)似：

實(shí)現(xiàn)的代碼也不是很復(fù)雜，就是小球的運(yùn)動(dòng)軌跡需要計(jì)算，我自己手畫(huà)了個(gè)計(jì)算的圖，很簡(jiǎn)單的就是三角函數(shù)的使用。

一款非常簡(jiǎn)單酷炫的LoadingView動(dòng)畫(huà)效果

然后代碼就是代碼實(shí)現(xiàn)了，主要的內(nèi)容都有注釋?zhuān)a如下：

public class LoadingView extends View {

  private final static String TAG = "LoadingView";

  private final static int LEFT_BALL_DOWN = 1;
  private final static int LEFT_BALL_UP = 2;
  private final static int RIGHT_BALL_DOWN = 3;
  private final static int RIGHT_BALL_UP = 4;

  private Paint paint1, paint2, paint3, paint4, paint5;
  private int mCurrentAnimatorValue;
  private int circleRadius = 10; //小球的半徑
  private int distance = 60; //小球開(kāi)始下落到最低點(diǎn)的距離
  private int mCurrentState = LEFT_BALL_DOWN;


  public LoadingView(Context context) {
    super(context);
    init(context);
  }

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

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

    init(context);
  }

  private void init(Context context) {

    paint1 = getPaint(Color.RED);
    paint2 = getPaint(Color.YELLOW);
    paint3 = getPaint(Color.GREEN);
    paint4 = getPaint(Color.BLUE);
    paint5 = getPaint(Color.CYAN);

    ValueAnimator animator = ValueAnimator.ofInt(0, 90);

    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        mCurrentAnimatorValue = (int) animation.getAnimatedValue();
        Log.e(TAG, "onAnimationUpdate : mCurrentAnimatorValue = " + mCurrentAnimatorValue);

        invalidate();
      }
    });

    animator.addListener(new Animator.AnimatorListener() {
      @Override
      public void onAnimationStart(Animator animation) {

      }

      @Override
      public void onAnimationEnd(Animator animation) {

      }

      @Override
      public void onAnimationCancel(Animator animation) {

      }

      @Override
      public void onAnimationRepeat(Animator animation) {
        Log.e(TAG, "onAnimationRepeat : mCurrentAnimatorValue = " + mCurrentAnimatorValue);
        switch (mCurrentState) {
          case LEFT_BALL_DOWN:
            mCurrentState = RIGHT_BALL_UP;
            break;
          case RIGHT_BALL_UP:
            mCurrentState = RIGHT_BALL_DOWN;
            break;
          case RIGHT_BALL_DOWN:
            mCurrentState = LEFT_BALL_UP;
            break;
          case LEFT_BALL_UP:
            mCurrentState = LEFT_BALL_DOWN;
            break;
        }
      }
    });
    animator.setStartDelay(500);
    animator.setDuration(600);
    animator.setRepeatCount(ValueAnimator.INFINITE);
    animator.setInterpolator(new DecelerateInterpolator());
    animator.start();

  }

  private Paint getPaint(int color) {
    Paint paint = new Paint();
    paint.setColor(color);
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.FILL);
    return paint;
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int x, y;
    double cosValue = Math.cos(PI * mCurrentAnimatorValue / 180);
    double sinValue = Math.sin(PI * mCurrentAnimatorValue / 180);
    drawFourBall(canvas);
    switch (mCurrentState) {
      case LEFT_BALL_DOWN://最左邊小球往下撞擊
        x = circleRadius + (int) ((distance - circleRadius) * (1 - cosValue));
        y = getHeight() - distance + (int) ((distance - circleRadius) * sinValue);
        canvas.drawCircle(x, y, circleRadius, paint1);
        break;
      case RIGHT_BALL_UP://最右邊小球往上撞擊
        x = distance + 8 * circleRadius + (int) ((distance - circleRadius) * sinValue);
        y = getHeight() - distance + (int) (cosValue * (distance - circleRadius));
        canvas.drawCircle(x, y, circleRadius, paint5);
        break;
      case RIGHT_BALL_DOWN://最右邊小球往下撞擊
        x = distance + 8 * circleRadius + (int) ((distance - circleRadius) * (cosValue));
        y = (getHeight() - distance) + (int) ((distance - circleRadius) * (sinValue));
        canvas.drawCircle(x, y, circleRadius, paint5);
        break;
      case LEFT_BALL_UP://最左邊小球往上撞擊
        x = distance - (int) ((distance - circleRadius) * sinValue);
        y = getHeight() - distance + (int) ((distance - circleRadius) * cosValue);
        canvas.drawCircle(x, y, circleRadius, paint1);
        break;
    }

  }


  private void drawFourBall(Canvas canvas) {

    int y = getHeight() - circleRadius;
    canvas.drawCircle(distance + 2 * circleRadius, y, circleRadius, paint2);
    canvas.drawCircle(distance + 4 * circleRadius, y, circleRadius, paint3);
    canvas.drawCircle(distance + 6 * circleRadius, y, circleRadius, paint4);

    if (mCurrentState == LEFT_BALL_DOWN || mCurrentState == LEFT_BALL_UP) {//最左邊球運(yùn)動(dòng)的時(shí)候，要繪制最右邊的球
      canvas.drawCircle(distance + 8 * circleRadius, y, circleRadius, paint5);
    } else if (mCurrentState == RIGHT_BALL_UP || mCurrentState == RIGHT_BALL_DOWN) {//最右邊球運(yùn)動(dòng)的時(shí)候，要繪制最左邊的球
      canvas.drawCircle(distance, y, circleRadius, paint1);
    }


  }

}

實(shí)現(xiàn)的效果如圖一，有問(wèn)題的話(huà)互相討論。最后貼上想xml文件，后續(xù)會(huì)完善設(shè)置loadingview的大小和顏色之類(lèi)的參數(shù)。
xml如下：

<com.define_view.LoadingView
    android:layout_marginTop="20px"
    android:background="#999999"
    android:layout_width="200px"
    android:layout_height="200px" />

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

一款非常簡(jiǎn)單酷炫的LoadingView動(dòng)畫(huà)效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽