自定义动画效果的Drawable

时间 2019-12-13

标签自定义动画效果 drawable 繁體版

原文原文链接

Android提供的的动画系统有属性动画(Property Animation)、补间动画(View Animation)和帧动画(Drawable Animation)。如今比较经常使用的是属性动画，由于功能比较强大，正常咱们直接对视图控件(View)进行属性动画的状况比较多，下面来介绍下动画效果Drawable的实现，相比View来说Drawable更简单，使用起来也很方便。java

一. 自定义Drawable
android

自定义动画Drawable只要继承Drawable并实现如下4个方法，同时实现Animatable接口：git

public class CircleDrawable extends Drawable implements Animatable {
    @Override
    public void draw(Canvas canvas) {
        //　绘图
    }

    @Override
    public void setAlpha(int alpha) {
        //　设置透明度
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        //　设置颜色过滤
    }

    @Override
    public int getOpacity() {
        //　设置颜色格式
        return PixelFormat.RGBA_8888;
    }

    @Override
    public void start() {
        // 启动动画
    }

    @Override
    public void stop() {
        // 中止动画
    }

    @Override
    public boolean isRunning() {
        //　判断动画是否运行
        return false;
    }
}

在这几个方法中咱们主要来处理Drawable的绘制，即 draw()方法，和自定义View同样。咱们要实现动画效果，也实现Animatable接口，它的3个方法都是和动画相关，方法意图也很明显。下面来自定义一个圆圈逐渐扩散消失的效果：

/**
 * Created by long on 2016/7/2.
 * 圆圈Drawable
 */
public class CircleDrawable extends Drawable implements Animatable {

    private Paint mPaint;
    // 动画控制
    private ValueAnimator mValueAnimator;
    // 扩散半径
    private int mRadius;
    // 绘制的矩形框
    private RectF mRect = new RectF();
    // 动画启动延迟时间
    private int mStartDelay;

    // 自定义一个扩散半径属性
    Property<CircleDrawable, Integer> mRadiusProperty = new Property<CircleDrawable, Integer>(Integer.class, "radius") {
        @Override
        public void set(CircleDrawable object, Integer value) {
            object.setRadius(value);
        }

        @Override
        public Integer get(CircleDrawable object) {
            return object.getRadius();
        }
    };
    public int getRadius() {
        return mRadius;
    }
    public void setRadius(int radius) {
        mRadius = radius;
    }


    public CircleDrawable() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(5);
    }


    @Override
    public void draw(Canvas canvas) {
        // 绘制圆圈
        canvas.drawCircle(mRect.centerX(), mRect.centerY(), mRadius, mPaint);
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.RGBA_8888;
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mRect.set(_clipSquare(bounds));
        if (isRunning()) {
            stop();
        }
        // 计算最大半径
        int maxRadius = (int) ((mRect.right - mRect.left) / 2);
        // 控制扩散半径的属性变化
        PropertyValuesHolder radiusHolder = PropertyValuesHolder.ofInt(mRadiusProperty, 0, maxRadius);
        // 控制透明度的属性变化
        PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 255, 0);
        mValueAnimator = ObjectAnimator.ofPropertyValuesHolder(this, radiusHolder, alphaHolder);
        mValueAnimator.setStartDelay(mStartDelay);
        mValueAnimator.setDuration(1200);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 监听属性动画并进行重绘
                invalidateSelf();
            }
        });
        // 设置动画无限循环
        mValueAnimator.setRepeatMode(ValueAnimator.RESTART);
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        start();
    }

    /**
     * 裁剪Rect为正方形
     * @param rect
     * @return
     */
    private Rect _clipSquare(Rect rect) {
        int w = rect.width();
        int h = rect.height();
        int min = Math.min(w, h);
        int cx = rect.centerX();
        int cy = rect.centerY();
        int r = min / 2;
        return new Rect(
                cx - r,
                cy - r,
                cx + r,
                cy + r
        );
    }

    /************************************************************/

    @Override
    public void start() {
        mValueAnimator.start();
    }

    @Override
    public void stop() {
        mValueAnimator.end();
    }

    @Override
    public boolean isRunning() {
        return mValueAnimator != null && mValueAnimator.isRunning();
    }

    public void setAnimatorDelay(int startDelay) {
        mStartDelay = startDelay;
    }
}

整个流程仍是比较简单，在构造函数里对画笔进行了初始化操做，复写onBoundsChange(Rect bounds)接口来获取图形边框参数，好比将Drawable设置给ImageView时，这里就能获取到ImageView的边框大小。在这方法里将边框裁剪为正方形，由于咱们要作圆圈Drawable嘛。而后剩下的就是属性动画的处理了，这里自定义了一个扩散半径属性 mRadiusProperty，用来控制绘制圆圈的半径，除了对半径的控制外还有对透明度的控制。若是对自定义属性Property和PropertyValuesHolder不清楚能够看下这个： Androids属性动画PropertyValuesHolder的使用。

来看下给ImageView设置咱们自定义的CircleDrawable的效果：github

二. 包含多个动画Drawable
canvas

同理，实现包含多个动画的自定义Drawable也须要继承Drawable并实现Animatable接口，同时还要实现Drawable.Callback接口。先来看下Drawable.Callback的定义：数组

/*若是你想实现一个扩展子Drawable的动画drawable，那么你能够经过setCallBack(android.graphics.drawable.Drawable.Callback)
 *来把你实现的该接口注册到动画drawable中。能够实现对动画的调度和执行 
 */   
public static interface Callback {  
    /** 
     * 当drawable重画时触发，这个点上drawable将被置为不可用
     * @param 要求重画的drawable 
     */  
    public void invalidateDrawable(Drawable who);  

    /** 
     * drawable能够经过该方法来安排动画的下一帧。能够仅仅简单的调用postAtTime(Runnable, Object, long) 
     * 来实现该方法。参数分别与方法的参数对应 
     * @param who The drawable being scheduled. 
     * @param what The action to execute. 
     * @param when The time (in milliseconds) to run 
     */  
    public void scheduleDrawable(Drawable who, Runnable what, long when);  

    /** 
     *能够用于取消先前经过scheduleDrawable(Drawable who, Runnable what, long when)调度的某一帧。
     *能够经过调用removeCallbacks(Runnable,Object)来实现 
     * @param who The drawable being unscheduled. 
     * @param what The action being unscheduled. 
     */  
    public void unscheduleDrawable(Drawable who, Runnable what);  
}

当咱们须要重绘Drawable时，会调用 invalidateSelf()接口，来看下它是怎么操做的：

/**
 * Use the current {@link Callback} implementation to have this Drawable
 * redrawn.  Does nothing if there is no Callback attached to the
 * Drawable.
 *
 * @see Callback#invalidateDrawable
 * @see #getCallback()
 * @see #setCallback(android.graphics.drawable.Drawable.Callback)
 */
public void invalidateSelf() {
    final Callback callback = getCallback();
    if (callback != null) {
        callback.invalidateDrawable(this);
    }
}

须要若是给Drawable设置了 Drawable.Callback回调，就能够监听这个Drawable的重绘操做，并回调invalidateDrawable(Drawable who)方法。

好了，下面就能够来开始自定义带多个动画的Drawable，直接复用上面写的CircleDrawable，让多个CircleDrawable动画按顺序执行：ide

/**
 * Created by long on 2016/7/2.
 * 复数Circle的Drawable，须要实现Drawable.Callback接口
 */
public class MultiCircleDrawable extends Drawable implements Animatable, Drawable.Callback {

    // 每一个Drawable动画启动的间隔
    private static final int EACH_CIRCLE_SPACE = 200;
    // CircleDrawable数组
    private CircleDrawable[] mCircleDrawables;


    public MultiCircleDrawable() {
        mCircleDrawables = new CircleDrawable[] {
                new CircleDrawable(),
                new CircleDrawable(),
                new CircleDrawable()
        };
        for (int i = 0; i < mCircleDrawables.length; i++) {
            // 设置动画启动延迟
            mCircleDrawables[i].setAnimatorDelay(EACH_CIRCLE_SPACE * i);
            // 设置回调监听，当CircleDrawable发生重绘时就会调用 invalidateDrawable(Drawable who) 方法
            mCircleDrawables[i].setCallback(this);
        }
    }


    @Override
    public void draw(Canvas canvas) {
        for (CircleDrawable drawable : mCircleDrawables) {
            // 分层绘制每一个CircleDrawable
            int count = canvas.save();
            drawable.draw(canvas);
            canvas.restoreToCount(count);
        }
    }

    @Override
    public void setAlpha(int alpha) {
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
    }

    @Override
    public int getOpacity() {
        return PixelFormat.RGBA_8888;
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        for (CircleDrawable drawable : mCircleDrawables) {
            drawable.onBoundsChange(bounds);
        }
    }
    /************************************************************/

    @Override
    public void start() {
        for (CircleDrawable drawable : mCircleDrawables) {
            drawable.start();
        }
    }

    @Override
    public void stop() {
        for (CircleDrawable drawable : mCircleDrawables) {
            drawable.stop();
        }
    }

    @Override
    public boolean isRunning() {
        for (CircleDrawable drawable : mCircleDrawables) {
            if (drawable.isRunning()) {
                return true;
            }
        }
        return false;
    }

    @Override
    public void invalidateDrawable(Drawable who) {
        // 须要重绘，子Drawable发生重绘会调用这个方法通知父Drawable，若是有设置Callback回调监听的话
        invalidateSelf();
    }

    @Override
    public void scheduleDrawable(Drawable who, Runnable what, long when) {
    }

    @Override
    public void unscheduleDrawable(Drawable who, Runnable what) {
    }
}

能够看到上面复用了三个CircleDrawable，并给它们设置了动画启动延迟和 Drawable.Callback回调，并在回调方法invalidateDrawable(Drawable who)里也对当前的MultiCircleDrawable进行重绘，即调用invalidateSelf()。这样就完成了多个动画Drawable的定义，来看下使用效果：

这只是简单介绍自定义Drawable的使用，能够本身定义更多好看的动画效果，以上的源代码：DrawableSample。函数

自定义Drawable的运用能够参考这个：实现360手机助手TabHost的波纹效果post