仿爱奇艺加载dialog

最新推荐文章于 2024-08-21 00:52:05 发布

原创最新推荐文章于 2024-08-21 00:52:05 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#仿爱奇艺 dialog

本文详细介绍了如何在Android应用中创建类似爱奇艺视频加载时的动画效果。通过计算三角形的位置和使用旋转动画实现动态效果，文章提供了完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿爱奇艺在加载视频时的动画，想上张图；

gif的效果有点卡，先说一下实现的方法，

主要的难点在于怎样将三角形画到空间的中间，我通过三角形中心到顶角的距离来确定三角形的大小，

当三角形在中间时角a的大小为60度，线段A的长度为已知的自己设定的，我这里设定的为40像素，则C的长度为

A乘以sin(a) B的长度为A乘以cos(a); 这里假设空间的长宽各位200的正方形，所以三角形的上顶点的坐标为（100,60），左下顶点为（200 / 2 - A * cos(a)）,右顶点的坐标为（200 / 2，A* sin(a)）,确定了三角形的三个顶点就可以在通过drawPath画三角形了，代码如下：

path.moveTo(width / 2, height / 2 - length);
path.lineTo(formantNumber(width / 2 - Math.sin(Math.PI / 3) * length), width / 2 + length / 2);
path.lineTo(formantNumber(width / 2 + Math.sin(Math.PI / 3) * length), width / 2 + length / 2);
path.close();

当布局加载完成后开始动画，由于但旋转的时候弧形的扫过的角度为360度，旋转时看不出来圆弧的旋转，

/**
 * 布局加载完成后开始动画
 */
@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    startAnimation(rotateAnimation);
}

/**
 * 初始化动画
 */
private void initRouteAnimation() {
    rotateAnimation = new RotateAnimation(0, 1800, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    rotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
    rotateAnimation.setDuration(1500);
    rotateAnimation.setFillAfter(false);
    rotateAnimation.setAnimationListener(this);
}

当动画执行完后将将扫过的角度设置为0度，重新绘制

/**
 * 动画介绍后的回调
 *
 * @param animation
 */
@Override
public void onAnimationEnd(Animation animation) {
    sweepAngle = 0;
    isAfterAnimation = true;
    invalidate();
}

下面是onDraw方法的代码，我在这里判断当扫过的角度为330度的时候，也就是sweepAngle为360的时候，重绘视图，然后开启动画

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (isAfterAnimation) {
        sweepAngle += 30;
        if (sweepAngle >= 360) {
            isAfterAnimation = false;
            drawPicture(canvas, 360);
            startAnimation(rotateAnimation);
        } else {
            drawPicture(canvas, sweepAngle);
            postInvalidateDelayed(30);
        }
    } else {
        drawPicture(canvas, 360);
    }
}

下面是重写onMeasure方法的代码，在measureWidth方法中判断计算模式，返回空间的宽度，计算模式为wrap_content的时候宽度为200px，计算高度的方法一样，这里不再累赘；

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    width = measureWidth(widthMeasureSpec);
    height = measureHeight(heightMeasureSpec);
    setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));
}

/**
 * 计算控件宽度
 *
 * @param widthMeasureSpec
 * @return
 */
private int measureWidth(int widthMeasureSpec) {
    int result = 0;
    int mode = MeasureSpec.getMode(widthMeasureSpec);
    int size = MeasureSpec.getSize(widthMeasureSpec);

    if (mode == MeasureSpec.EXACTLY) {
        result = size;
    } else {
        result = 200;
        if (mode == MeasureSpec.AT_MOST) {
            result = Math.min(result, size);
        }
    }
    return result;
}

完整代码：

package com.example.mengsong.demo01;

/**
 * Created by MengSong on 2016/12/20.
 */

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.TextView;

/**
 * Created by MengSong on 2016/12/15.
 */
public class MyView extends View implements Animation.AnimationListener {
    //绘制三角形的路径
    private Path path;
    //绘制三角形的画笔
    public Paint mPaintTriangle;
    //绘制弧形的画笔
    public Paint mPaintArc;
    //三角形的中心到顶点的距离
    private int length = 40;
    //圆弧的半径
    private int arcRadius = 80;
    //圆弧扫过的角度
    private float sweepAngle = 360;

    private boolean isAfterAnimation = false;
    //旋转动画
    private RotateAnimation rotateAnimation;
    //圆弧所在的矩形
    private RectF rect;
    //空间的宽度
    private int width;
    //控件的高度
    private int height;

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


    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    /**
     * 布局加载完成后开始动画
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        startAnimation(rotateAnimation);
    }

    /**
     * 初始化相关属性
     */
    private void init() {
        mPaintTriangle = new Paint();
        mPaintTriangle.setDither(true);
        mPaintTriangle.setAntiAlias(true);
        mPaintTriangle.setStyle(Paint.Style.FILL);
        mPaintTriangle.setColor(Color.GREEN);

        mPaintArc = new Paint();
        mPaintArc.setDither(true);
        mPaintArc.setAntiAlias(true);
        mPaintArc.setStrokeWidth(3);
        mPaintArc.setStyle(Paint.Style.STROKE);
        mPaintArc.setColor(Color.GREEN);
        path = new Path();
        initRouteAnimation();
    }

    /**
     * 初始化三角形的path弧形的所在的矩形
     *
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        rect = new RectF(width / 2 - arcRadius, height / 2 - arcRadius, width / 2 + arcRadius, height / 2 + arcRadius);
        path.moveTo(width / 2, height / 2 - length);
        path.lineTo(formantNumber(width / 2 - Math.sin(Math.PI / 3) * length), width / 2 + length / 2);
        path.lineTo(formantNumber(width / 2 + Math.sin(Math.PI / 3) * length), width / 2 + length / 2);
        path.close();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isAfterAnimation) {
            sweepAngle += 30;
            if (sweepAngle >= 360) {
                isAfterAnimation = false;
                drawPicture(canvas, 360);
                startAnimation(rotateAnimation);
            } else {
                drawPicture(canvas, sweepAngle);
                postInvalidateDelayed(30);
            }
        } else {
            drawPicture(canvas, 360);
        }
    }

    private void drawPicture(Canvas canvas, float sweepAngle) {
        //画三角形
        canvas.drawPath(path, mPaintTriangle);
        //画扇形
        canvas.drawArc(rect, 270, sweepAngle, false, mPaintArc);
    }

    /**
     * 保留四位小数
     *
     * @param number
     * @return
     */
    private float formantNumber(double number) {
        java.text.DecimalFormat df = new java.text.DecimalFormat("#.####");
        String format = df.format(number);
        return Float.valueOf(format.trim());
    }

    /**
     * 动画介绍后的回调
     *
     * @param animation
     */
    @Override
    public void onAnimationEnd(Animation animation) {
        sweepAngle = 0;
        isAfterAnimation = true;
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = measureWidth(widthMeasureSpec);
        height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));
    }

    /**
     * 计算控件宽度
     *
     * @param widthMeasureSpec
     * @return
     */
    private int measureWidth(int widthMeasureSpec) {
        int result = 0;
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int size = MeasureSpec.getSize(widthMeasureSpec);

        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = 200;
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(result, size);
            }
        }
        return result;
    }

    /**
     * 计算控件高度
     *
     * @param heightMeasureSpec
     * @return
     */
    private int measureHeight(int heightMeasureSpec) {
        int result = 0;
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);

        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = 200;
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(result, size);
            }
        }
        return result;
    }

    /**
     * 初始化动画
     */
    private void initRouteAnimation() {
        rotateAnimation = new RotateAnimation(0, 1800, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
        rotateAnimation.setDuration(1500);
        rotateAnimation.setFillAfter(false);
        rotateAnimation.setAnimationListener(this);
    }

    @Override
    public void onAnimationStart(Animation animation) {
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    }
}