很简单的一个组合动画，用好基本动画啥子效果都不怕
老规矩先上图
效果图.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
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#69C8FA"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/fl_move_circle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#69C8FA" />
<ImageView
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" />
<ImageView
android:id="@+id/iv_btn"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:src="@mipmap/circle" />
<TextView
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" />
</FrameLayout>
直接在布局使用即可
<com.example.administrator.testnewaa.ScanningView
android:id="@+id/scanning"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.example.administrator.testnewaa.ScanningView>
java代码中在调用 onceClick（）方法可启动动画
scanningView.onceClick();
如果图片也要的话那就拿去吧
-
中间的指针
circle.png
-
波纹
outcircle.png
ok 回手掏，鬼刀一开看不见 ，走位，走位
网友评论