animation-circleProgress_html/css_WEB-ITnose

CircleProgress
An open source project on github
The main directory of the code is like this
1. CircleProgress
2. EaseInOutCubicInterpolator
3. MainActivity
MainActivity is The main interface is responsible for the initialization of layout and the control of animation start and pause
EaseInOutCubicInterpolator is a class generated by time interpolation
The annotated code is attached below:

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;    }}

Main activity comparison It’s simple and no comments are needed

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();        }    }}

The calculation of the point position is a unique design of the app. The interpolator is a common knowledge and is the core of learning this open source code.

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.