androidで爱奇艺のロードアニメーションの例

この記事では、androidの爱奇艺ロードアニメーションの実例について紹介しました。具体的なコードは以下の通りです：

効果画像：

使用する知識点:

1. Path
2. ValueAnimator

PathとValueAnimatorに不慣れな場合は、以下の大神的ブログを参照してください。自定义viewの現在の最適な記事、自定义viewの詳細なチュートリアルと実践、これはチュートリアルと実践でもあります。感謝の気持ちを込めて！(皆さん、真剣に読んでいただければ、多くのヒントを得ることができます)。

アニメーションの分解

1. まずは円が時計回りにゆっくりと描かれます(円は閉じた円ではありません)
2. このステップは組み合わせアニメーションで、円がゆっくりと消え、同時に三角形が時計回りに回転
   

ここでの難点は主に座標の計算です。以下に詳細に説明します：

1. ここでは、円心をx、y軸の原点として、下方向がx軸の正方向、右方向がy軸の正方向です。ビューのサイズが等幅高の場合、円の半径を幅または高さの半分に設定できます。それ以外の場合は、幅または高さの最小値の半分を円の半径として設定します。
2. 次に、三角形がありますが、座標を決定する難点です。この三角形は等辺三角形で、三角形が回転する際には円心を中心に回転したいです。したがって、円心から三角形の各頂点までの距離は等しいです。ここでは、三角形の辺長を円の半径として設定しています。

この図が提出されたと信じて、正弦、余弦関数と組み合わせて、p1,p2,p3の座標が決まります。

p1.x = -(int) ((radius / 2 * Math.tan(30 * Math.PI / 180)));
p1.y = -radius / 2;
p2.x = p1.x;
p2.y = radius / 2;
p3.x = (int) (radius / 2 / Math.sin(60 * Math.PI / 180));
p3.y = 0;

いくつかの属性を定義

private static final String DEFAULT_COLOR = "#00ba9b";
private static final int DEFAULT_SIZE = 50;  //デフォルトサイズ
private static final int DRAW_CIRCLE = 10001; //状态标记 画出圆形和三角形 执行画出圆形的动画
private static final int ROTATE_TRIANGLE = 10002; //状态标记 执行旋转三角形和收回圆形的动画
private Context mContext;
private Paint trianglePaint;  //三角形的画笔
private Paint circlePaint;  //圆形画笔
private float paintStrokeWidth = 1; // 设置圆形的宽度
private long duration = 800; //执行时间
private int mWidth; //View的宽高
private int mHeight;
private Path trianglePath; //三角形的路径
private Path circlePath;  //圆形的路径
private Path dst; //由pathMeasure计算后的path
private Point p1, p2, p3; //三角形的三个点
private ValueAnimator animator; //属性动画主要是获取0-1的值来执行动画
private float mAnimatorValue = 0;  //存放获取到的0-1の値
private int mCurrentState = 0;  //当前的状态 
private int radius = 0; //圆的半径
private float startSegment; //圆开始画的长度
private PathMeasure mMeasure; //测量path
private int triangleColor = -1;
private int circleColor = -1;

设置path

1由于三角形始终存在，所以先画三角形，用path来画，我们已经知道三角形的三个顶点的坐标了，画三角形就变得很容易了。

trianglePath = new Path();
p1 = new Point();
p2 = new Point();
p3 = new Point();
trianglePath.moveTo(p1.x, p1.y);
trianglePath.lineTo(p2.x, p2.y);
trianglePath.lineTo(p3.x, p3.y);
trianglePath.close();

このようにして、三角形的pathが設定されました。canvans.drawPath()を呼び出すだけで、三角形をキャンバスに描画できます。

2.そして円を描画します。前述の通り、円には欠けがあります。ここでは円をpathに追加していますが、canvasに直接描画せずに、円の周長を計算するために後で必要な操作を行うために、pathを使用しています。

RectF circleRect = new RectF(-radius, -radius, radius, radius);
circlePath.addArc(circleRect, 268, 358); // これは円から268°から描画を開始し、描画します258°に2度の間隔を空けます

属性アニメーションを設定します

アニメーションには0の集合が必要です-1のデータ
ここでは属性アニメーションが提供する値を使ってアニメーションを実現します。

private void initAnimation() {
    TimeInterpolator timeInterpolator = new AccelerateDecelerateInterpolator();
    animator = ValueAnimator.ofFloat(0, 1).setDuration(duration);
    animator.setInterpolator(timeInterpolator);
    animator.setRepeatMode(ValueAnimator.RESTART);
    animator.setRepeatCount(ValueAnimator.INFINITE);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        mAnimatorValue = (float) animation.getAnimatedValue(); //ここでは0を取得します-1の値
        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) { 
       //ここで状態を変換し、異なるアニメーションを実行します
        現在の状態を判断します
          ここが私たちが言う最初の状態です
            mCurrentState = ROTATE_TRIANGLE;
            break;
          case ROTATE_TRIANGLE:
            mCurrentState = DRAW_CIRCLE;
            break;
          default:
            break;
        }
      }
    });
  }

onDraw

onDrawメソッドを分析します

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //原点を中心位置に移動します
    canvas.translate(mWidth / 2, mHeight / 2);
    // 重置path dst
    path dstをリセットします
    //dst.reset();
    現在の状態を判断します
     //switch (mCurrentState) {
      ここが私たちが言う最初の状態です
      //case DRAW_CIRCLE:
      //この行は、切り取るべきpath(dst)の開始位置を取得しています。アニメーションを詳しく観察すると、円の開始はある位置から1/5、円の起点に達したら円の起点から描画を開始します。私はこのアニメーションを実行する際、円の両端から描画する位置を、円の
      //の時間を概ね0に設定します-1 の0.3の位置の左右。
        startSegment = (float) (mMeasure.getLength() / 5 * ((0.3 - mAnimatorValue) > 0 ＆63; (0.3 - mAnimatorValue) : 0));
        //ここには特に何もなく、三角形を描画しています
        trianglePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawPath(trianglePath, trianglePaint);
        //このメソッドは、切り取るべきエッジを取得するもので、最初の引数は開始位置、2番目の引数は終了位置、3番目の引数は、
        //数は切り取ったpathで、path（dst）に追加します。注意して、追加ではなく置き換えになるので、前にresetを行い、第4引数は、
        //起点を現在のパスの起点に移動してdst中のパスを変更しないようにするかどうか（例えば、dstに前にpathがあった場合、ここ
        //設定をfalseにすると、dstの連続性を確保し、dstに後から追加されたパスの起点を先のパスの終点に移動して連続性を保つようになります（例えば、dstに前にpathがあった場合、ここ
        mMeasure.getSegment(startSegment, mMeasure.getLength()) * mAnimatorValue, dst, true);
        canvas.drawPath(dst, circlePaint);
        break;
         //第2種のアニメーション
      case ROTATE_TRIANGLE:
      //キャンバスを保存します。なぜなら、2つのアニメーションを実行するためには、キャンバスの初期状態を保存する必要があるからです。
        canvas.save();
        //まず三角形の回転を実行します。
        trianglePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.rotate(360 * mAnimatorValue);
        canvas.drawPath(trianglePath, trianglePaint);
        //キャンバスを復元します。
        canvas.restore();
        //次に外側の円が消える。消える方法は円を描くのと同じです。ここでは0-1の変化する値があれば、
        //スライスを切り取るとき、始点が総長に近づくようにすると、消える効果が現れます。
        mMeasure.getSegment(mMeasure.getLength(), * mAnimatorValue, mMeasure.getLength(), dst, true);
        canvas.drawPath(dst, circlePaint);
        break;
      default:
        break;
    }
  }

これでこの記事はすべて終わりです。皆様の学習に役立つことを願っています。また、呐喊タウントナレッジを多くのサポートをお願いします。

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害を疑う内容があれば、メールを送信してください：notice#oldtoolbag.com（メール送信時、#を@に変更して報告してください。関連する証拠を提供してください。一旦確認が取れたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）