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特有的设计,插值器是一个共性的知识,是学习这个开源代码的核心。
版权声明:本文为博主原创文章,未经博主允许不得转载。