想做一个点击弹出窗口的动画,万变不离其宗吧。
开始准备
或许原图是这样
然后动画的过程,应该是这样。
讲解一下
首先点击红点,出现一个半径R的圆,并且面积一点一点扩大,最终整个窗口弹出。那么,我们使用PopupWindow来做动画。
ok,过程了解完毕,那么,我们需要开始动画的制作。首先我们需要一个layout作为我们的窗体的视图。简单就好
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="120dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="你好!"
/>
</android.support.constraint.ConstraintLayout>
接着我们需要将这视图绑定到PopupWindow上面。
MainActivity.java
if (id == R.id.action_settings) {
ConstraintLayout layout = (ConstraintLayout) getLayoutInflater().inflate(R.layout.popwindow, null);
PopupWindow popupWindow = new PopupWindow(layout,
ViewGroup.LayoutParams.MATCH_PARENT,
dip2px(120));
//点击空白处时,隐藏掉pop窗口
popupWindow.setFocusable(true);
popupWindow.showAtLocation(item.getActionView(), Gravity.BOTTOM, 0, 200);
return true;
}
简单看一下效果
ok,不太好看,将就着吧。为了和实现的图片一致,我们吧fab移到上面去。好了,开始构思我们的动画效果。
首先我们需要构思动画过程,有了上图就很清晰。
决定如何移动,通过点,以点决定线,决定面
差不多就以上两个方面,我们一步一步来。
在此之前,我们先想想系统提供的动画效果有没有有用的!
帧动画,补间动画,emmm这两个肯定pass。毕竟一开始就是一个完整的图
那么强大的属性动画呢?顾名思义,操作属性,这个可以思考为操作宽度,高度,实现另类的效果(因为是矩形),所以我们需要造轮子啦!
来吧,从心干,自定义View开始。
图片看到一个圆。那么我们开始画圆。
必备的参数
//左上
public static final int LEFT_TOP = 1;
//左下
public static final int LEFT_BOTTOM = 2;
//右上
public static final int RIGHT_TOP = 3;
//右下
public static final int RIGHT_BOTTOM = 4;
//绘制进度-----[0,1]
private float rate;
private int width;
private int height;
private double totalRadius;
private int startPosition = RIGHT_TOP;
画圈的地方
public void drawNow(Paint paint,Canvas canvas){
paint.reset();
paint.setColor(Color.parseColor("#ecffff00"));
paint.setAntiAlias(true);
canvas.drawCircle(width,0, (float) (totalRadius*rate),paint);
}
记着,我们要注意rate
这个值,代表我们当前加载到了哪个地方,我们通过这个来表示我们应该画到哪了。
因为我们是自定义的View,所以每一次绘制都要刷新一下。so
public void setRate(float rate) {
this.rate = rate;
invalidate();
}
有set肯定有get,所以我们可以联想到ObjectAnimator
ObjectAnimator animator = ObjectAnimator.ofFloat(layout, "rate",0f,1f);
animator.setDuration(3000);
animator.start();
最后看看我们的效果。