android 自定义属性动画应用之MenuButton

之前做App 有需要一个按钮需要有动画，点击展开变成X ，再次点击变回三根线，好像这东西在html中很好实现，于是我也在android里也做了一次小的应用，直接

效果图

menubtn.gif

那么怎么实现呢？

思路：
① 首先要绘制三根线
②观察发现，上下两根线只需要坐标互换下，也就是线的一端位置发生了变化，中间线由完全不透明变成透明
③那么这种数值变化并且还需要动画的，我们自然而然的想到了

属性动画

④那么OK，我们只需要声明个属性radio，根据这个数值变化做属性变化绘制就OK了
晕-----写完了怎么只保存到这---补全中------------

先上调用Activity了

/**
 * Created by LiuDong on 2016/12/30.
 * Email:[email protected]
 */

public class MenuButtonActivity extends Activity {
    private LD_MenuButton menuRed; //红色
    private LD_MenuButton menuWhte;//白色
    private LD_MenuButton menuBig;//大
    private LD_MenuButton menuHuge;//更大 宽高不同

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menubutton);
        initView();
    }

    /**
     * 初始化View
     */
    private void initView() {
        menuRed = (LD_MenuButton) findViewById(R.id.menu_red);
        menuRed.setColor(getResources().getColor(R.color.ld_Red));
        menuRed.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                menuRed.startAnimation();
            }
        });
        menuWhte = (LD_MenuButton) findViewById(R.id.menu_white);
        menuWhte.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                menuWhte.startAnimation();
            }
        });
        menuBig = (LD_MenuButton) findViewById(R.id.menu_big);
        menuBig.setColor(getResources().getColor(R.color.ld_Black));
        menuBig.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                menuBig.startAnimation();
            }
        });
        menuHuge = (LD_MenuButton) findViewById(R.id.menu_huge);
        menuHuge.setColor(getResources().getColor(R.color.ld_Orange));
        menuHuge.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                menuHuge.startAnimation();
            }
        });
    }
}

xml布局也比较简单

Ok，下面是重点了自定义MenuButton,注释应该比较清楚，就不多解释了，也可直接拉走用

/**
 * Created by LiuDong on 2016/12/30.
 * Email:[email protected]
 */
public class LD_MenuButton extends View {
    private float ratio;// 决定线的结束点位置和透明度
    private Paint paint1;// 画笔 绘制顶部线和底部线
    private Paint paint2;// 画笔 绘制中间线条
    private int color=Color.WHITE;//线条颜色 默认白色

    private int HEIGHT;// view height;
    private int WIDTH;// view width
    private int LINE_WIDTH;// 线的宽度
    private boolean isOpen = false;//判断是否展开

    public LD_MenuButton(Context context) {
        super(context);
        initPaint();
    }

    public LD_MenuButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public LD_MenuButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }


    /**
     * 获取视图宽高以及初始化线宽
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        WIDTH = getWidth();
        HEIGHT = getHeight();
        LINE_WIDTH = HEIGHT / 15;
        paint1.setStrokeWidth(LINE_WIDTH);
        paint2.setStrokeWidth(LINE_WIDTH);
    }

    /**
     * 怎么绘制 定义怎么样的属性动画都是很自由的
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        paint2.setAlpha((int) ((1 - ratio) * 255));
        int step = (HEIGHT - LINE_WIDTH * 3) / 4;
        // **绘制上部的线
        canvas.drawLine(LINE_WIDTH, step + LINE_WIDTH / 2, WIDTH - LINE_WIDTH,
                step + LINE_WIDTH / 2 + 2 * ratio * (step + LINE_WIDTH), paint1);
        // **绘制下部的线
        canvas.drawLine(LINE_WIDTH, step + LINE_WIDTH / 2 + 2
                * (step + LINE_WIDTH), WIDTH - LINE_WIDTH, step + LINE_WIDTH
                / 2 + 2 * (1 - ratio) * (step + LINE_WIDTH), paint1);
        // **绘制中间线
        canvas.drawLine(LINE_WIDTH, HEIGHT / 2, WIDTH - LINE_WIDTH, HEIGHT / 2,
                paint2);
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        paint1 = new Paint();
        paint1.setColor(color);
        ;
        paint2 = new Paint();
        paint2.setColor(color);

    }


    /**
     * 供属性动画调用 必须要有
     * @param ratio
     */
    public void setRatio(float ratio) {
        this.ratio = ratio;

        invalidate();
    }

    /**
     * 开始动画,自定义属性动画
     */
    public void startAnimation() {
        if (isOpen) {
            ObjectAnimator.ofFloat(this, "ratio", 1.0f, 0).setDuration(300)
                    .start();
            isOpen = false;
        } else {
            ObjectAnimator.ofFloat(this, "ratio", 0, 1.0f).setDuration(300)
                    .start();
            isOpen = true;
        }

    }

    /**
     * 设置线条颜色
     * @param color
     */
    public void setColor(int color) {
        this.color = color;
        paint1.setColor(color);
        paint2.setColor(color);
        invalidate();
    }
}

OK,有时候没事研究下这类的动画效果还是蛮有意思的，另外希望大神推荐一些进阶书籍，或好的资源等。