之前做App 有需要一个按钮需要有动画，点击展开变成X ，再次点击变回三根线，好像这东西在html中很好实现，于是我也在android里也做了一次小的应用，直接
menubtn.gif
那么怎么实现呢？</h3>
思路：
① 首先要绘制三根线
②观察发现，上下两根线只需要坐标互换下，也就是线的一端位置发生了变化，中间线由完全不透明变成透明
③那么这种数值变化并且还需要动画的，我们自然而然的想到了<h3>属性动画</h3>
④那么OK，我们只需要声明个属性radio，根据这个数值变化做属性变化绘制就OK了
晕-----写完了怎么只保存到这---补全中------------
<h3>先上调用Activity了</h3>
/**
* Created by LiuDong on 2016/12/30.
* Email:15002102128@126.com
*/
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();
}
});
}
}
<h3>xml布局也比较简单</h3>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<com.dadong.ld_tools.widget.LD_MenuButton
android:id="@+id/menu_red"
android:background="@color/ld_White"
android:layout_width="40dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:layout_height="40dp" />
<com.dadong.ld_tools.widget.LD_MenuButton
android:id="@+id/menu_white"
android:background="@color/ld_Black"
android:layout_width="40dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:layout_height="40dp" />
<com.dadong.ld_tools.widget.LD_MenuButton
android:id="@+id/menu_big"
android:background="@color/ld_White"
android:layout_width="80dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:layout_height="80dp" />
<com.dadong.ld_tools.widget.LD_MenuButton
android:id="@+id/menu_huge"
android:background="@color/ld_White"
android:layout_width="match_parent"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:layout_height="200dp" />
</LinearLayout>
<h3>Ok，下面是重点了自定义MenuButton,注释应该比较清楚，就不多解释了，也可直接拉走用</h3>
/**
* Created by LiuDong on 2016/12/30.
* Email:15002102128@126.com
*/
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,有时候没事研究下这类的动画效果还是蛮有意思的，另外希望大神推荐一些进阶书籍，或好的资源等。
网友评论