豆瓣加载动画实现

最终效果如下

ValueAnimator类API 简介

• ofFloat(float… values) 构建ValueAnimator，设置动画的浮点值，需要设置2个以上的值

• setDuration(long duration) 设置动画时长，默认的持续时间为300毫秒。

• setInterpolator(TimeInterpolator value) 设置动画的线性非线性运动，默认AccelerateDecelerateInterpolator

• addUpdateListener(ValueAnimator.AnimatorUpdateListener listener) 监听动画属性每一帧的变化

分解步骤，计算一下总共需要的角度:
1、一个笑脸，x轴下方的圆弧旋转135°，覆盖2个点，此过程中圆弧增加45°
2、画布旋转135°，此过程中圆弧增加45°
3、画布旋转360°，此过程中圆弧减少360/5度
4、画布旋转90°，此过程中圆弧减少90/5度
5、画布旋转135°，释放覆盖的2个点

实现

package com.zj.test;

import android.animation.TimeInterpolator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.DecelerateInterpolator;

/**
 * Created by jjx on 2016/5/28.
 */
public class customView extends View{



//    public customView(Context context, AttributeSet attrs, int defStyleAttr) {
//        super(context, attrs, defStyleAttr);
//
//        initAnimator(animatorDuration);
//        mPaint=new Paint();
//        mPaint.setStyle(Paint.Style.STROKE);//设置画笔样式为描边，如果已经设置，可以忽略
//        mPaint.setColor(Color.GREEN);
//        mPaint.setStrokeWidth(10);
//    }

    float Width;
    float Height;

    public customView(Context context, AttributeSet attrs) {
        super(context, attrs);

        initAnimator(animatorDuration);
        mPaint=new Paint();
        mPaint.setStyle(Paint.Style.STROKE);//设置画笔样式为描边，如果已经设置，可以忽略
        mPaint.setColor(Color.GREEN);
        mPaint.setStrokeWidth(10);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        Width=MeasureSpec.getSize(widthMeasureSpec);
        mViewWidth=Width;

        Height=MeasureSpec.getSize(heightMeasureSpec);
    }

    Paint mPaint;
    float mViewWidth;


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(Width/2,Height/2);
        doubanAnimator(canvas, mPaint);
    }

    private ValueAnimator animator;
    private float animatedValue;
    private long animatorDuration = 5000;
    private TimeInterpolator timeInterpolator = new DecelerateInterpolator();

    private void initAnimator(long duration){
        if (animator !=null &&animator.isRunning()){
            animator.cancel();
            animator.start();
        }else {
            animator=ValueAnimator.ofFloat(0,855).setDuration(duration);
            animator.setInterpolator(timeInterpolator);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    animatedValue = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            animator.start();
        }
    }


    private void doubanAnimator(Canvas canvas, Paint mPaint){
        mPaint.setStyle(Paint.Style.STROKE);//描边
        mPaint.setStrokeCap(Paint.Cap.ROUND);//圆角笔触
        mPaint.setColor(Color.rgb(97, 195, 109));
        mPaint.setStrokeWidth(15);
        float point = Math.min(mViewWidth,mViewWidth)*0.06f/2;
        float r = point*(float) Math.sqrt(2);
        RectF rectF = new RectF(-r,-r,r,r);
        canvas.save();

        // rotate
        if (animatedValue>=135){
            canvas.rotate(animatedValue-135);
        }

        // draw mouth
        float startAngle=0, sweepAngle=0;
        if (animatedValue<135){
            startAngle = animatedValue +5;
            sweepAngle = 170+animatedValue/3;
        }else if (animatedValue<270){
            startAngle = 135+5;
            sweepAngle = 170+animatedValue/3;
        }else if (animatedValue<630){
            startAngle = 135+5;
            sweepAngle = 260-(animatedValue-270)/5;
        }else if (animatedValue<720){
            startAngle = 135-(animatedValue-630)/2+5;
            sweepAngle = 260-(animatedValue-270)/5;
        }else{
            startAngle = 135-(animatedValue-630)/2-(animatedValue-720)/6+5;
            sweepAngle = 170;
        }
        canvas.drawArc(rectF,startAngle,sweepAngle,false,mPaint);

        // draw eye
        canvas.drawPoints(new float[]{
                -point,-point
                ,point,-point
        },mPaint);

        canvas.restore();
    }

}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.zj.test.MainActivity">

    <com.zj.test.customView
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        ></com.zj.test.customView>
</RelativeLayout>

参考链接

自定义View——Canvas与ValueAnimator – Idtk