900字范文 > android 自定义loading Android自定义动画-StarLoadingView

android 自定义loading Android自定义动画-StarLoadingView

时间：2023-06-21 21:37:17

今天来分享第二个自定义loading的动画，起了个名字叫蹦跶的星星，还是老规矩先介绍，后上图。

实现效果在最后，GIF有点大，手机流量慎重。

介绍

首先声明做这个动画的初衷是为了学习和分享，所以从这里起，我准备做一个系列的加载动画(截止时间：我放弃的时候)。

上一个动画连接：Android自定义动画-ClockLoadingView

正文

阴影及下落的动画：

private final ValueAnimator.AnimatorUpdateListener mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener()

{

@Override

public void onAnimationUpdate(ValueAnimator animation)

{

float value = (float) animation.getAnimatedValue();

mOffsetTranslateY = getViewCenterY() * 0.4f * value;

mShadowWidth = (mOffsetTranslateY + 10) * 0.9f;

}

};

初始化参数：

@Override

protected void initParams(Context context)

{

mFullPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

mFullPaint.setStyle(Paint.Style.FILL_AND_STROKE);

mFullPaint.setStrokeWidth(2);

mFullPaint.setColor(Color.BLACK);

mFullPaint.setDither(true);

mFullPaint.setFilterBitmap(true);

initValue(context);

initAnimator();

}

private void initAnimator()

{

mShadowAnimator = ValueAnimator.ofFloat(0.0f, 1.0f, 0.0f);

mShadowAnimator.setRepeatCount(Animation.INFINITE);

mShadowAnimator.setDuration(ANIMATION_DURATION);

mShadowAnimator.setStartDelay(ANIMATION_START_DELAY);

mShadowAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

}

private void initValue(Context context)

{

float allSize = getAllSize();

mStarOutR = allSize - dip2px(context, 5);

mStarOutMidR = mStarOutR * 0.9f;

mStarInR = mStarOutMidR * 0.6f;

mStarInMidR = mStarInR * 0.9f;

mStartAngle = 0;

mOffsetTranslateY = 0;

//星路径

mStarPath = createStarPath(5, -18);

//阴影宽度

mShadowWidth = mStarOutR;

mOvalRectF = new RectF();

}

绘制步骤，这里是通过偏移和旋转画布来实现部分动画的。

@Override

protected void onDraw(Canvas canvas)

{

canvas.save();

canvas.translate(0, mOffsetTranslateY);

canvas.rotate(mStartAngle, getViewCenterX(), getViewCenterY());

canvas.drawPath(mStarPath, mFullPaint);

canvas.restore();

// 绘制底部阴影

mOvalRectF.set(getViewCenterX() - mShadowWidth, getIntrinsicHeight() - 20, getViewCenterX() + mShadowWidth, getIntrinsicHeight() - 10);

canvas.drawOval(mOvalRectF, mFullPaint);

}

下面是关键步骤，绘制计算五角星路径，这是我自己写的算法，可以传入角数量和初始角度偏移量。这里最关键的是通过贝塞尔曲线对五角星的内角和外角做了弧度处理。很完美！！！😄

/**

* 绘制五角星

* @param num 角数量

* @param startAngle 初始角度

* @return

private Path createStarPath(int num, int startAngle)

{

final Path path = new Path();

int angle = 360 / num;

int roundSize = 5;//圆角弧度

int offsetAngle = angle / 2;

path.moveTo(getViewCenterX() + mStarOutMidR * cos(startAngle - roundSize), getViewCenterY() + mStarOutMidR * sin(startAngle - roundSize));

for (int i = 0; i < num; i++)

{

int value = angle * i + startAngle;

path.lineTo(getViewCenterX() + mStarOutMidR * cos(value - roundSize), getViewCenterY() + mStarOutMidR * sin(value - roundSize));

//圆角

path.quadTo(getViewCenterX() + mStarOutR * cos(value), getViewCenterY() + mStarOutR * sin(value), getViewCenterX() + mStarOutMidR * cos(value + roundSize), getViewCenterY() + mStarOutMidR * sin(value + roundSize));

path.lineTo(getViewCenterX() + mStarInR * cos(value + offsetAngle - roundSize), getViewCenterY() + mStarInR * sin(value + offsetAngle - roundSize));

//内圆角

path.quadTo(getViewCenterX() + mStarInMidR * cos(value + offsetAngle), getViewCenterY() + mStarInMidR * sin(value + offsetAngle), getViewCenterX() + mStarInR * cos(value + offsetAngle + roundSize), getViewCenterY() + mStarInR * sin(value + offsetAngle + roundSize));

}

path.close();

return path;

}

下面是部分动画的基本设定和开启，按照基类走的，看不懂的可以去Github上看源码。

@Override

protected void prepareStart(ValueAnimator floatValueAnimator)

{

floatValueAnimator.setInterpolator(new DecelerateInterpolator());

mShadowAnimator.setRepeatCount(Animation.INFINITE);

mShadowAnimator.setDuration(ANIMATION_DURATION);

mShadowAnimator.setStartDelay(ANIMATION_START_DELAY);