what I really want is an animation that an arc moving with the effect looks like shooting star falling from the sky, you can see the animation on LG G3' small window in circle case, everytime the case is closed, the animation glows around the ring, check this video, from youtube(you can see it in 00:18, 00:30, 01:18, 01:29 ...):
https://www.youtube.com/watch?v=tEQpYms1bJA
I did a little search, and wrote my codes(referring to this), but the lines which draw the arc looked solid, not have the effect that I want, here is my arc drawing code:
public class SideArcsView extends View{
private Paint mPaint;
private int parentWidth;
private int strokeWidth;
private RectF oval;
private static int INITIAL_LEFT_ARC_START_ANGLE = 225;
private static int INITIAL_RIGHT_ARC_START_ANGLE = 315;
private int startLeftArcAngle = INITIAL_LEFT_ARC_START_ANGLE;
private int startRightArcAngle = INITIAL_RIGHT_ARC_START_ANGLE;
private int arcAngle = 45;
public SideArcsView(Context mContext, int parentWidth) {
super(mContext);
this.parentWidth = parentWidth;
init();
}
private void init() {
strokeWidth = (12 * parentWidth) / 300;
initPaint();
initOval();
}
private void initPaint() {
mPaint = new Paint();
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(strokeWidth);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
mPaint.setStrokeCap(Paint.Cap.ROUND);
}
private void initOval() {
float padding = mPaint.getStrokeWidth() / 2;
oval = new RectF();
oval.set(padding, padding, parentWidth - padding, parentWidth - padding);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawArcs(canvas);
}
private void drawArcs(Canvas canvas) {
canvas.drawArc(oval, startLeftArcAngle, arcAngle, false, mPaint);
canvas.drawArc(oval, startRightArcAngle, -arcAngle, false, mPaint);
}
public void startRotateAnimation() {
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 136);
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.setDuration(2000);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
startLeftArcAngle = INITIAL_LEFT_ARC_START_ANGLE - (int) animation.getAnimatedValue();
startRightArcAngle = INITIAL_RIGHT_ARC_START_ANGLE + (int) animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
public void startResizeDownAnimation() {
ValueAnimator valueAnimator = ValueAnimator.ofInt(45, 10);
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.setDuration(2000);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
arcAngle = (int) animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
}
and it looks like:
can somebody tell me how to draw something like LG G3's glow circle ring? Please give me some advice...