很簡單的一個組合動畫，用好基本動畫啥子效果都不怕

老規矩先上圖

效果圖.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 回手掏，鬼刀一開看不見 ，走位，走位

總結

以上是生活随笔為你收集整理的android 上下扫描动画,Android扫描雷达动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。