animation-circleProgress

CircleProgress

github上一个开源项目

代码的主要目录是这样

1. CircleProgress

2. EaseInOutCubicInterpolator

3. MainActivity

MainActivity是主界面负责布局的初始化和动画的启动暂停等控制

EaseInOutCubicInterpolator是时间插值生成的类

下面附上加了注释的代码：

package me.fichardu.circleprogress;

import android.animation.TimeInterpolator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.AnimationUtils;

public class CircleProgress extends View {

private static final int RED = 0xFFE5282C;
private static final int YELLOW = 0xFF1F909A;
private static final int BLUE = 0xFFFC9E12;
private static final int COLOR_NUM = 3;
private int[] COLORS;
private TimeInterpolator mInterpolator = new EaseInOutCubicInterpolator();

private final double DEGREE = Math.PI / 180;
private Paint mPaint;
private int mViewSize;
private int mPointRadius;
private long mStartTime;
private long mPlayTime;
private boolean mStartAnim = false;
private Point mCenter = new Point();

private ArcPoint[] mArcPoint;
private static final int POINT_NUM = 15;
private static final int DELTA_ANGLE = 360 / POINT_NUM;
private long mDuration = 3600;

public CircleProgress(Context context) {
super(context);
//构造函数初始化时开始初始化View
init(null, 0);
}

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

public CircleProgress(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}

private void init(AttributeSet attrs, int defStyle) {
//初始化存放15个点的数组
mArcPoint = new ArcPoint[POINT_NUM];
//构建画布并设置画布的属性
mPaint = new Paint();
//加上抗锯齿
mPaint.setAntiAlias(true);
//画的点为实心点
mPaint.setStyle(Paint.Style.FILL);
//自定义属性，这里主要是为了给点上色，似乎不适用自定义颜色也可以
TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CircleProgress, defStyle, 0);
int color1 = a.getColor(R.styleable.CircleProgress_color1, RED);
int color2 = a.getColor(R.styleable.CircleProgress_color2, YELLOW);
int color3 = a.getColor(R.styleable.CircleProgress_color3, BLUE);
a.recycle();

COLORS = new int[]{color1, color2, color3};
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//当View被初始化被调用来获取view的大小
int defaultSize = getResources().getDimensionPixelSize(R.dimen.default_circle_view_size);
int width = getDefaultSize(defaultSize, widthMeasureSpec);
int height = getDefaultSize(defaultSize, heightMeasureSpec);
//在这里取一个长宽最小的size
mViewSize = Math.min(width, height);
//取一个正方形
setMeasuredDimension(mViewSize, mViewSize);
//设置中心点，在ondraw里面进行绘制
mCenter.set(mViewSize / 2, mViewSize / 2);
//view初始化好后开始画点
calPoints(1.0f);
}

@Override
protected void onDraw(Canvas canvas) {
//view初始化好后开始调用onDraw,所以Ondraw是在onMeasure之后被调用
//canvas.save()保存之前的状态，保存之后再进行包括平移旋转等的绘制
canvas.save();
//移动坐标原点
canvas.translate(mCenter.x, mCenter.y);
//获取时间因子
float factor = getFactor();
//按照计算好的因子进行旋转
canvas.rotate(36 * factor);
float x, y;
//通过插值getItemFactor重新计算点的位置
for (int i = 0; i < POINT_NUM; ++i) {
mPaint.setColor(mArcPoint[i].color);
float itemFactor = getItemFactor(i, factor);
x = mArcPoint[i].x - 2 * mArcPoint[i].x * itemFactor;
y = mArcPoint[i].y - 2 * mArcPoint[i].y * itemFactor;
canvas.drawCircle(x, y, mPointRadius, mPaint);
}
//取出之前保存的状态，Onsave和onrestore配对使用是为了只修改我们需要的而不影响其他的元素
canvas.restore();

if (mStartAnim) {
//一旦动画开始了，开始刷新和绘制的循环，保持动画一直运转
postInvalidate();
}
}

private void calPoints(float factor) {
//这个方法比较好理解，定义半径后，根据半径和点的个数计算每个点位置
int radius = (int) (mViewSize / 3 * factor);
mPointRadius = radius / 12;

for (int i = 0; i < POINT_NUM; ++i) {
float x = radius * -(float) Math.sin(DEGREE * DELTA_ANGLE * i);
float y = radius * -(float) Math.cos(DEGREE * DELTA_ANGLE * i);

ArcPoint point = new ArcPoint(x, y, COLORS[i % COLOR_NUM]);
mArcPoint[i] = point;
}
}

private float getFactor() {
//根据已进行的时间，计算接下来的旋转的角度，参加onDraw中的rotate(36*getFactor)
if (mStartAnim) {
mPlayTime = AnimationUtils.currentAnimationTimeMillis() - mStartTime;
}
float factor = mPlayTime / (float) mDuration;
return factor % 1f;
}

private float getItemFactor(int index, float factor) {
//点运行轨迹的核心算法-插值就来源于mInterpolator.getInterpolation，参考EaseInOutCubicInterpolator
float itemFactor = (factor - 0.66f / POINT_NUM * index) * 3;
if (itemFactor < 0f) {
itemFactor = 0f;
} else if (itemFactor > 1f) {
itemFactor = 1f;
}
return mInterpolator.getInterpolation(itemFactor);
}

public void startAnim() {
mPlayTime = mPlayTime % mDuration;
mStartTime = AnimationUtils.currentAnimationTimeMillis() - mPlayTime;
mStartAnim = true;
postInvalidate();
}

public void reset() {
stopAnim();
mPlayTime = 0;
postInvalidate();

}

public void stopAnim() {
mStartAnim = false;
}

public void setInterpolator(TimeInterpolator interpolator) {
mInterpolator = interpolator;
}

public void setDuration(long duration) {
mDuration = duration;
}

public void setRadius(float factor) {
stopAnim();
calPoints(factor);
startAnim();
}

static class ArcPoint {
float x;
float y;
int color;

ArcPoint(float x, float y, int color) {
this.x = x;
this.y = y;
this.color = color;
}
}

}

package me.fichardu.circleprogress;

import android.animation.TimeInterpolator;

/**
* The MIT License (MIT)
*
* Copyright (c) 2015 fichardu
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
public class EaseInOutCubicInterpolator implements TimeInterpolator {

@Override
public float getInterpolation(float input) {
if ((input *= 2) < 1.0f) {
//轨迹方程 0.5*x^3
return 0.5f * input * input * input;
}
input -= 2;
//轨迹方程0.5*x^3+1
return 0.5f * input * input * input + 1;
}

}

主activity比较简单就不加注释了

package me.fichardu.circleprogress;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.SeekBar;

public class MainActivity extends ActionBarActivity implements View.OnClickListener {

private CircleProgress mProgressView;
private View mStartBtn;
private View mStopBtn;
private View mResetBtn;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mProgressView = (CircleProgress) findViewById(R.id.progress);
mProgressView.startAnim();
mStartBtn = findViewById(R.id.start_btn);
mStartBtn.setOnClickListener(this);
mStopBtn = findViewById(R.id.stop_btn);
mStopBtn.setOnClickListener(this);
mResetBtn = findViewById(R.id.reset_btn);
mResetBtn.setOnClickListener(this);

SeekBar mSeekBar = (SeekBar) findViewById(R.id.out_seek);
mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
float factor = seekBar.getProgress() / 100f;
mProgressView.setRadius(factor);
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}

@Override
public void onClick(View v) {
if (v == mStartBtn) {
mProgressView.startAnim();
} else if (v == mStopBtn) {
mProgressView.stopAnim();
} else if (v == mResetBtn) {
mProgressView.reset();
}
}
}

点的位置的计算是app特有的设计，插值器是一个共性的知识，是学习这个开源代码的核心。