很简单的一个组合动画，用好基本动画啥子效果都不怕

老规矩先上图

效果图.gif

ok 来 既然往下翻那就看看如何实现的吧

首先效果分为两部分

第一部分中间指针(其实这里就是一张图片)

第二部分就是波纹，哈哈 也是图片

给中间图片一个旋转动画，一直转的那种

波纹设置放大和渐变的组合动画，然后中间指针执行一次则波纹动画跟着执行一次

这里我把他自定义为一个ScanningView，直接可拿去使用

public class ScanningView extends FrameLayout {

private static final String TAG = "ScanningView";

/**

* 指针

*/

private ImageView ivNeedle;

/**

* 波纹

*/

private ImageView ivRipple;

/**

* 中间文字

*/

private TextView tvTitle;

/**

* 装波纹的容器

*/

private FrameLayout fl_move_circle;

private Context context;

public ScanningView(Context context) {

super(context);

this.context = context;

initView();

}

public ScanningView(Context context, AttributeSet attrs) {

super(context, attrs);

initView();

}

private Handler handler = new Handler() {

@Override

public void handleMessage(Message msg) {

switch (msg.what) {

case 1:

ivRipple.setVisibility(VISIBLE);

startOutCircleAnim();

break;

case 2:

addMoveCircle();

break;

}

}

};

/**

* 设置标题

* @param txt

*/

public void setTitle(String txt){

tvTitle.setText(txt);

}

private void initView(){

View v = LayoutInflater.from(getContext()).inflate(R.layout.rotate_view,null);

ivNeedle = v.findViewById(R.id.iv_btn);

ivRipple = v.findViewById(R.id.iv_out_circle);

tvTitle = v.findViewById(R.id.tv_title);

fl_move_circle = v.findViewById(R.id.fl_move_circle);

addView(v, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

startOutCircleAnim();

}

/**

* 发散波纹

*/

private void addMoveCircle() {

final ImageView imageView = new ImageView(getContext());

LayoutParams lp = new LayoutParams(dip2px(getContext(), 100), dip2px(getContext(), 100));

lp.gravity = Gravity.CENTER;

imageView.setLayoutParams(lp);

imageView.setImageResource(R.mipmap.outcircle);

fl_move_circle.addView(imageView);

ObjectAnimator outCircleAnimX = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 5f);

ObjectAnimator outCircleAnimY = ObjectAnimator.ofFloat(imageView, "scaleY", 1f, 5f);

ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(imageView, "alpha", 0.6f, 0);

outCircleAnimX.setDuration(5000);

outCircleAnimY.setDuration(5000);

alphaAnim.setDuration(5000);

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.playTogether(outCircleAnimX, outCircleAnimY, alphaAnim);

animatorSet.addListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animation) {

}

@Override

public void onAnimationEnd(Animator animation) {

//移除掉刚才添加的波纹

fl_move_circle.removeView(imageView);

}

@Override

public void onAnimationCancel(Animator animation) {

}

@Override

public void onAnimationRepeat(Animator animation) {

}

});

animatorSet.start();

}

/**

* 开始循环的放大缩小波纹

*/

private void startOutCircleAnim() {

ObjectAnimator outCircleAlpha = ObjectAnimator.ofFloat(ivRipple, "alpha", 0.2f, 0.6f);

outCircleAlpha.setDuration(1000);

ObjectAnimator outCircleAnimX = ObjectAnimator.ofFloat(ivRipple, "scaleX", 1f, 1.18f, 1f);

ObjectAnimator outCircleAnimY = ObjectAnimator.ofFloat(ivRipple, "scaleY", 1f, 1.18f, 1f);

outCircleAnimX.setDuration(2000);

outCircleAnimY.setDuration(2000);

outCircleAnimX.setRepeatCount(ValueAnimator.INFINITE);

outCircleAnimY.setRepeatCount(ValueAnimator.INFINITE);

outCircleAnimX.setInterpolator(new LinearInterpolator());

outCircleAnimY.setInterpolator(new LinearInterpolator());

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.playTogether(outCircleAnimX, outCircleAnimY, outCircleAlpha);

animatorSet.start();

}

/**

* 根据手机的分辨率从 dip 的单位 转成为 px(像素)

*/

public static int dip2px(Context context, float dpValue) {

final float scale = context.getResources().getDisplayMetrics().density;

return (int) (dpValue * scale + 0.5f);

}

/**

* 指针转动

*/

private void pressStart() {

AnimatorSet animatorSet = new AnimatorSet();

ObjectAnimator scaleYIn = ObjectAnimator.ofFloat(ivNeedle, "rotation", 0f, 360f);

scaleYIn.setDuration(1800);

scaleYIn.setInterpolator(new LinearInterpolator());

scaleYIn.setRepeatCount(ValueAnimator.INFINITE);

animatorSet.play(scaleYIn);

animatorSet.start();

}

/**

* 模拟开始

*/

public void onceClick(){

//取消掉循环的波纹

ivRipple.setVisibility(GONE);

pressStart();

new Timer().schedule(new TimerTask() {

@Override

public void run() {

handler.sendEmptyMessage(2);

}

},0,1800);

}

}

布局文件 rotate_view.xml

android:layout_width="match_parent"

android:background="#69C8FA"

android:layout_height="match_parent">

android:id="@+id/fl_move_circle"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#69C8FA" />

android:id="@+id/iv_out_circle"

android:layout_width="110dp"

android:layout_height="110dp"

android:layout_gravity="center"

android:background="#69C8FA"

android:alpha="0.6"

android:src="@mipmap/outcircle" />

android:id="@+id/iv_btn"

android:layout_width="120dp"

android:layout_height="120dp"

android:layout_gravity="center"

android:src="@mipmap/circle" />

android:id="@+id/tv_title"

android:layout_width="wrap_content"

android:textColor="#ffffff"

android:layout_gravity="center"

android:text="扫描中"

android:textSize="@dimen/sp_10"

android:layout_marginTop="@dimen/dp_13"

android:layout_height="wrap_content" />

直接在布局使用即可

android:id="@+id/scanning"

android:layout_width="match_parent"

android:layout_height="match_parent">

java代码中在调用 onceClick()方法可启动动画

scanningView.onceClick();

如果图片也要的话那就拿去吧

中间的指针

circle.png

波纹

outcircle.png

ok 回手掏，鬼刀一开看不见 ，走位，走位