Android 自定義屬性動畫應用之MenuButton
之前做App 有需要一個按鈕需要有動畫，點擊展開變成X ，再次點擊變回三根線，好像這東西在html中很好實現，于是我也在android里也做了一次小的應用，直接
效果圖
menubtn.gif
那么怎么實現呢？
思路：
① 首先要繪制三根線
②觀察發現，上下兩根線只需要坐標互換下，也就是線的一端位置發生了變化，中間線由完全不透明變成透明
③那么這種數值變化并且還需要動畫的，我們自然而然的想到了
屬性動畫
④那么OK，我們只需要聲明個屬性radio，根據這個數值變化做屬性變化繪制就OK了
暈-----寫完了怎么只保存到這---補全中------------
先上調用Activity了
/**
* 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();
}
});
}
}
xml布局也比較簡單
<?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>
Ok，下面是重點了自定義MenuButton,注釋應該比較清楚，就不多解釋了，也可直接拉走用
/**
* 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,有時候沒事研究下這類的動畫效果還是蠻有意思的，另外希望大神推薦一些進階書籍，或好的資源等。
來自：http://www.jianshu.com/p/a788e74663ea
本文由用戶 a6802739 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！