Android 自定义属性动画应用之MenuButton
a6802739
8年前
<p>之前做App 有需要一个按钮需要有动画，点击展开变成X ，再次点击变回三根线，好像这东西在html中很好实现，于是我也在android里也做了一次小的应用，直接</p> <h3>效果图</h3> <p><img src="https://simg.open-open.com/show/b0ec328cec9084d9193bcf3cf922ae59.gif"></p> <p>menubtn.gif</p> <p>那么怎么实现呢？</p> <p>思路：</p> <p>① 首先要绘制三根线</p> <p>②观察发现，上下两根线只需要坐标互换下，也就是线的一端位置发生了变化，中间线由完全不透明变成透明</p> <p>③那么这种数值变化并且还需要动画的，我们自然而然的想到了</p> <h3>属性动画</h3> <p>④那么OK，我们只需要声明个属性radio，根据这个数值变化做属性变化绘制就OK了</p> <p>晕-----写完了怎么只保存到这---补全中------------</p> <h3>先上调用Activity了</h3> <pre> <code class="language-java">/** * 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(); } }); } }</code></pre> <h3>xml布局也比较简单</h3> <pre> <code class="language-java"><?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></code></pre> <h3>Ok，下面是重点了自定义MenuButton,注释应该比较清楚，就不多解释了，也可直接拉走用</h3> <pre> <code class="language-java">/** * 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(); } }</code></pre> <p>OK,有时候没事研究下这类的动画效果还是蛮有意思的，另外希望大神推荐一些进阶书籍，或好的资源等。</p> <p> </p> <p>来自：http://www.jianshu.com/p/a788e74663ea</p> <p> </p>