android自定义动画demo

来源：互联网发布：win10比特彗星端口阻塞编辑：程序博客网时间：2024/06/03 22:06
第一次传动图，不是很清晰，不好意思。
这个动画效果我是在网上看到的，非常感兴趣，自己就做了一遍，在这里记录一下我的代码，有不妥之处，尽情指正！！
写一个自定义view ,继承至View
public class MyButton extends View {    public MyButton(Context context) {        super(context);    }    public MyButton(Context context, AttributeSet attrs) {        super(context, attrs);    }    public MyButton(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    private int isDown = 0;    private float circleValue;    private ValueAnimator animatorCircle, animatorOk;    private ObjectAnimator animatorUp;    private final Paint okPaint = new Paint();    private Paint txtPaint = new Paint();    private AnimatorSet animatorSet = new AnimatorSet();    private PathMeasure pathMeasure;    private Path path;    @Override    public boolean onTouchEvent(MotionEvent event) {        int eventaction = event.getAction();        switch (eventaction) {            case MotionEvent.ACTION_DOWN:                isDown = 1;                initOk();                //1 按钮渐变为圆                final float circle_move_distance = (getWidth() - getHeight()) / 2;                animatorCircle = ValueAnimator.ofFloat(0, circle_move_distance);                animatorCircle.setDuration(2000);                animatorCircle.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                    @Override                    public void onAnimationUpdate(ValueAnimator animation) {                        circleValue = (float) animation.getAnimatedValue();                        int alpha = (int) (255 - (circleValue * 255) / circle_move_distance);                        txtPaint.setAlpha(alpha);                        invalidate();                    }                });                //2 上移的动画                final float curTranslationY = this.getTranslationY();                animatorUp = ObjectAnimator.ofFloat(this, "translationY", curTranslationY, curTranslationY - 300);                animatorUp.setDuration(800);                //3 绘制对勾的动画                animatorOk = ValueAnimator.ofFloat(1, 0);                animatorOk.setDuration(2000);                animatorOk.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                    @Override                    public void onAnimationUpdate(ValueAnimator animation) {                        float upValue = (Float) animation.getAnimatedValue();                        DashPathEffect effect = new DashPathEffect(new float[]{pathMeasure.getLength(), pathMeasure.getLength()}, upValue * pathMeasure.getLength());                        okPaint.setPathEffect(effect);                        invalidate();                    }                });                //按顺序执行动画                animatorSet                        .play(animatorUp)                        .before(animatorOk)                        .after(animatorCircle);                animatorSet.start();                break;        }        return super.onTouchEvent(event);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        Paint paint = new Paint();        paint.setColor(Color.WHITE);        txtPaint.setTextSize(60);        txtPaint.setStrokeWidth(7);        switch (isDown) {            case 0:                //初始化一个长方形                RectF oval1 = new RectF(0, 0, getWidth(), getHeight());                canvas.drawRect(oval1, paint);                break;            case 1:                RectF oval3 = new RectF(circleValue, 0, getWidth() - circleValue, getHeight());                canvas.drawRoundRect(oval3, circleValue, circleValue, paint);                //需要等前面两个动画都播放完毕了，再开始画对勾                if (!animatorUp.isRunning() && !animatorCircle.isRunning()) {                    canvas.drawPath(path, okPaint);                }                break;        }        canvas.drawText("确认", 190, 100, txtPaint);    }    //绘制对勾    private void initOk() {        path = new Path();        //对勾的路径 这个坐标是我自己定义的        //此坐标是根据此控件的坐标(打开布局边界查看，会发现控件的位置还在下面)算出来的。不是屏幕坐标，也不是圆圈的坐标        path.moveTo(getWidth() / 3, getHeight() / 3);        path.lineTo(getWidth() / 2, getHeight() / 4 * 3);        path.lineTo(getWidth() / 9 * 7, 0);        pathMeasure = new PathMeasure(path, false);        okPaint.setColor(Color.BLUE);        okPaint.setStrokeWidth(10);        okPaint.setStyle(Paint.Style.STROKE);    }}
0 0