一个酷炫的button变化动画开源库源码分析—Android morph Button(一)

最近很是喜爱一些酷炫的动画效果,特意在github上找了一些,看看他们是怎么做到的,做个分析,顺便可以对自定义控件和动画有进一步的认识。
先来看下这个库中button的变化效果是什么样的:

是的发送到

这里写图片描述

是不是很酷炫,而且中间的变化过程很舒服,没有僵硬的感觉,应用的场景也比较广:只要点击按钮,执行一个操作之后,返回结果,这个结果以对错表示,如果是一个耗时的操作还可以显示执行的进度,有很好的用户体验。比如点击按钮后,在后台进行下载、用户点击按钮进行登录等。

先分析第一个动画效果:
稍微复杂的动画一般是用属性动画来做了,对多个属性进行同时变化,仔细观察这个动画效果可以看到,有width的变化,由长方形变成了圆形,必然有CornerRadius的变化,变化的过程中背景颜色也有变化,最后显示通过和没通过的ICON,来看下ObjectAnimator使用的方法,target就是要变化的对象,propertyName就是要变化的属性,现在要变化的属性已经有了,就是上面说的:width、cornerRadius、color等,那么target应该是什么?

直接是button本身吗?我们知道某个属性变化(如color)是依据target中的setColor()方法来动态设置color的值,也就是button中药提供setColor()、setCornerRadius()这样的方法,来更新对应的值到界面上,一般最后还有调用invalidate()方法来刷新界面展示变化的效果。但是这样实现比较麻烦,这些方法都要我们自己提供。那么Android Morphing Button这个库是怎么做的呢?

其实我们想象这个button动画真的变化的其实就是它的background,这个库就是将backgroud设置为一个GradientDrawable,然后对这个GradientDrawable进行变化,也就事target就是这个GradientDrawable,GradientDrawable本身就有setColor、setCornerRadius、setStroke这些方法,并且会自动刷新UI,这样就不不用我们自己去写这些方法来重绘,大体的思路就是这样的,接下来分析具体的代码。

  public static ObjectAnimator ofInt(Object target, String propertyName, int... values)

1. 具体使用:

// sample demonstrate how to morph button to green circle with icon
MorphingButton btnMorph = (MorphingButton) findViewById(R.id.btnMorph);
// inside on click event
MorphingButton.Params circle = MorphingButton.Params.create()
        .duration(500)
        .cornerRadius(dimen(R.dimen.mb_height_56)) // 56 dp
        .width(dimen(R.dimen.mb_height_56)) // 56 dp
        .height(dimen(R.dimen.mb_height_56)) // 56 dp
        .color(color(R.color.green)) // normal state color
        .colorPressed(color(R.color.green_dark)) // pressed state color
        .icon(R.drawable.ic_done); // icon
btnMorph.morph(circle);

MorphingButton就是自定义的这个button,里面有个Params的静态内部类,设置一些参数如:cornerRadius、width,color等,表示变化到什么参数,Icon为结束的显示的图标。设置好参数后,就调用

 public void morph(@NonNull Params params) 

这个方法来执行动画,使用起来很是简单。

接下来看下这个库代码的构成,有下面几个类:

  1. StrokeGradientDrawable.class 这个类就是GradientDrawable就是属性动画要变化的对象,在GradientDrawable的基础上加入了stroke,radius,color的设置,提供了对应set和get方法。

  2. MorphingAnimation.class 这个类就是具体的动画变化类了。

  3. MorphingButton.class 这个类继承自button,在代码中设置background为StrokeGradientDrawable,这样对StrokeGradientDrawable做了属性变化后,动画效果就显示在button上了。

就按照这个顺序来分析具体的代码,先看StrokeGradientDrawable.class:

public class StrokeGradientDrawable {

    private int mStrokeWidth;
    private int mStrokeColor;

    private GradientDrawable mGradientDrawable;
    private float mRadius;
    private int mColor;

    public StrokeGradientDrawable(GradientDrawable drawable) {
        mGradientDrawable = drawable;
    }

    public int getStrokeWidth() {
        return mStrokeWidth;
    }

    public void setStrokeWidth(int strokeWidth) {
        mStrokeWidth = strokeWidth;
        mGradientDrawable.setStroke(strokeWidth, getStrokeColor());
    }

    public int getStrokeColor() {
        return mStrokeColor;
    }

    public void setStrokeColor(int strokeColor) {
        mStrokeColor = strokeColor;
        mGradientDrawable.setStroke(getStrokeWidth(), strokeColor);
    }

    public void setCornerRadius(float radius) {
        mRadius = radius;
        mGradientDrawable.setCornerRadius(radius);
    }

    public void setColor(int color) {
        mColor = color;
        mGradientDrawable.setColor(color);
    }

    public int getColor() {
        return mColor;
    }

    public float getRadius() {
        retu
  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值