アニメーションサークルProgress_html/css_WEB-ITnose

RCircleProgress

Github 上のオープンソース プロジェクトのメイン ディレクトリは次のとおりです

CircleProgress

2. EaseInoutCubicinterPolator
3. MainActivity アニメーションの起動が一時停止されます 生成されたクラス
注釈付きのコードは以下に添付されます:

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

メインアクティビティは比較的単純なのでコメントはしません

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

ポイントの位置の計算はアプリの独自の設計です。インターポレーターは一般的な知識であり、このオープン ソース コードの中核です。

著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。