Android自定义View实现搜索动画效果

Android自定义View实现搜索动画效果

近来看到的一个效果，不多bb上图

画图分析

wtf？上图就是我们需要实现这个效果应该画的图？ 对的没错，只是你还需要一点动画的帮忙。

由效果我们可以分析这个搜索的状态可以分为原始状态NONE,开始搜索状态START,正在搜索状态SEARCHING,搜索完成状态END

可以将以上4种状态图解一下分别是如图所示：

源代码

代码如下所示，注释有很好的说明，如果相关方法不知道具体使用，请面向百度，或者找我要资料

/**
* Created by zhanghs on 2017/12/4/004.
*/

public class SearchIcon extends View {
private int mWidth,mHeight;//画布的宽高
private float smallRadii=25f,bigRadii=50f,varySet=0,start,end,length;//大圆的半径，及小圆的半径，变化的参数，和三个变量，下面有说明
private Path pathSearch,pathBig,pathStart,pathSearching,pathEnd;//绘制的路径
private Paint paintNormal;//画笔
private float[] pointXY=new float[2];//获取搜索的把柄的末尾坐标
private PathMeasure measureSearch=new PathMeasure(),measureBig=new PathMeasure();//测量path的工具
private TYPE type=TYPE.NONE;//状态
private ValueAnimator animatorStart,animatorSearching,animatorDone;
enum TYPE{
NONE,START,SEARCHING,DONE
}
private Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
if(msg.what==0){
switch (type){
case NONE://默认状态
type=TYPE.START;
animatorStart.start();
break;
case START://开始搜索
type=TYPE.SEARCHING;
animatorSearching.start();
break;
case SEARCHING://正在搜索
type=TYPE.DONE;
animatorDone.start();
break;
case DONE://搜索完成
type=TYPE.NONE;
break;
default:
break;
}
}
}
};

public SearchIcon(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initPaint();
initPath();
initValueAnimator();
}

/**
* 初始化动画
*/
private void initValueAnimator() {
animatorStart=ValueAnimator.ofFloat(0f,1.000f);
animatorStart.addUpdateListener(upListener);
animatorStart.setInterpolator(new LinearInterpolator());
animatorStart.addListener(listener);
animatorStart.setRepeatCount(0);
animatorStart.setDuration(1500);

animatorSearching=ValueAnimator.ofFloat(0f,1.000f);
animatorSearching.addUpdateListener(upListener);
animatorSearching.setInterpolator(new LinearInterpolator());
animatorSearching.addListener(listener);
animatorSearching.setRepeatCount(2);
animatorSearching.setDuration(2000);

animatorDone=ValueAnimator.ofFloat(1.000f,0f);
animatorDone.addUpdateListener(upListener);
animatorDone.setInterpolator(new LinearInterpolator());
animatorDone.addListener(listener);
animatorDone.setRepeatCount(0);
animatorDone.setDuration(1500);

}

/**
* 初始化路径
*/
private void initPath() {
pathSearch=new Path();
pathSearch.addArc(new RectF(-smallRadii,-smallRadii,smallRadii,smallRadii),45,359.9f);
pathBig=new Path();
pathBig.addArc(new RectF(-bigRadii,-bigRadii,bigRadii,bigRadii),45,359.9f);
measureBig=new PathMeasure();
measureBig.setPath(pathBig,false);
measureBig.getPosTan(0,pointXY,null);
pathSearch.lineTo(pointXY[0],pointXY[1]);
measureSearch=new PathMeasure();
measureSearch.setPath(pathSearch,false);
length= (float) (Math.PI*bigRadii*2/4);
}

/**
* 初始化画笔
*/
private void initPaint() {
paintNormal=new Paint();
paintNormal.setAntiAlias(true);
paintNormal.setStrokeWidth(5);
paintNormal.setColor(Color.BLUE);
paintNormal.setStyle(Paint.Style.STROKE);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.translate(mWidth/2,mHeight/2);
drawSearch(canvas);
}

/**
* 画
* @param canvas
*/
private void drawSearch(Canvas canvas) {
switch (type){
case NONE:
canvas.drawPath(pathSearch,paintNormal);
break;
case START:
pathStart=new Path();
//这里是画原pathSearch中截取的一段路径
measureSearch.getSegment(varySet*measureSearch.getLength(),measureSearch.getLength(),pathStart,true);
canvas.drawPath(pathStart,paintNormal);
break;
case SEARCHING:
end=measureBig.getLength()*varySet;
start=(float) (end - ((0.5 - Math.abs(varySet - 0.5)) * length));
pathSearching=new Path();
//这里是画原pathBig中截取的一段路径
measureBig.getSegment(start,end,pathSearching,true);
canvas.drawPath(pathSearching,paintNormal);
break;
case DONE:
pathEnd=new Path();
//这里是画原pathSearch中截取的一段路径
measureSearch.getSegment(varySet*measureSearch.getLength(),measureSearch.getLength(),pathEnd,true);
canvas.drawPath(pathEnd,paintNormal);
break;
default:
break;
}
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth=w;
mHeight=h;
}
private ValueAnimator.AnimatorUpdateListener upListener= new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
varySet= (float) valueAnimator.getAnimatedValue();
invalidate();
}
};
private Animator.AnimatorListener listener=new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
handler.sendEmptyMessage(0);
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
};

/**
* 开始搜索
*/
public void start(){
if(type==TYPE.NONE){
handler.sendEmptyMessage(0);
}
}
}

效果图

注意这个控件的搜索完成是要你自己去控制的，我这里只是为了展示写的很简单，看你操作就行了

抠脚来的，不喜勿喷