Android 自定義view仿支付寶咻一咻功能

支付寶上有一個咻一咻的功能,就是點擊圖片後四周有水波紋的這種效果,今天也寫一個類似的功能。

效果如下所示：

思路：

就是幾個圓的半徑不斷在變大,這個可以使用動畫縮放實現,還有透明動畫

還有就是這是好幾個圓,然後執行的動畫有個延遲效果,其實這些動畫是放在一起執行的,熟悉屬性動畫的知道已經給我們提供了同步執行動畫和順序執行動畫的實現api,也會會有人說這幾個view就是在onDraw()方法中畫幾個圓,可能會說我還要繼承容器view去onLayout()方法中這些子view添加在某個特定的區域,當然這也是可以的,其實簡單的就是以圖片為中心(圖片imageview在父view的中心),然後畫圓,指定每個字view的寬和高就行了,具體看代碼：

package com.zhifubaoxiuyixiu.view;
import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.FrameLayout;
import java.util.ArrayList;
/**
 * Created by admin on 2016/12/29.
 */
public class ZhifubaoFrameLayout extends FrameLayout {
 private int rippleColor = Color.parseColor("#0099CC");//水波紋的顏色
 private int radius = 0;//水波紋圓的半徑
 private long anim_duration = 3000;//動畫執行的時間
 private int water_ripple_count = 6;
 private int scale = 6;//動畫縮放比例
 private long animDelay;//動畫延遲的時間
 private Paint paint;
 private AnimatorSet animatorSet;
 private ArrayList<Animator> animatorList;
 private FrameLayout.LayoutParams rippleParams;
 private ArrayList<WateRipple> rippleViewList=new ArrayList<WateRipple>();
 private boolean isAnimRunning = false;
 public ZhifubaoFrameLayout(Context context) {
  this(context,null);
 }
 public ZhifubaoFrameLayout(Context context, AttributeSet attrs) {
  this(context,attrs,0);
 }
 public ZhifubaoFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initPaint();
  addChildView();
  initAnim();
 }
 /**
  * 初始化動畫
  */
 private void initAnim() {
  animatorSet = new AnimatorSet();
  animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
  animatorList=new ArrayList<Animator>();
  for(int i=0;i<rippleViewList.size();i++){//幾個水波紋
   final ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "ScaleX", 1.0f, scale);
   scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE);
   scaleXAnimator.setRepeatMode(ObjectAnimator.RESTART);
   scaleXAnimator.setStartDelay(i * animDelay);
   scaleXAnimator.setDuration(anim_duration);
   animatorList.add(scaleXAnimator);
   final ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "ScaleY", 1.0f, scale);
   scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE);
   scaleYAnimator.setRepeatMode(ObjectAnimator.RESTART);
   scaleYAnimator.setStartDelay(i * animDelay);
   scaleYAnimator.setDuration(anim_duration);
   animatorList.add(scaleYAnimator);
   final ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "Alpha", 1.0f, 0f);
   alphaAnimator.setRepeatCount(ObjectAnimator.INFINITE);
   alphaAnimator.setRepeatMode(ObjectAnimator.RESTART);
   alphaAnimator.setStartDelay(i * animDelay);
   alphaAnimator.setDuration(anim_duration);
   animatorList.add(alphaAnimator);
  }
  animatorSet.playTogether(animatorList);
 }
 /**
  * 添加水波紋子view
  */
 private void addChildView() {
  radius = 32;
  animDelay=350;
  rippleParams=new FrameLayout.LayoutParams((int)(2*(radius)),(int)(2*(radius)));
  rippleParams.gravity = Gravity.CENTER;
  for(int i=0;i<water_ripple_count;i++){//幾個水波紋
   WateRipple rippleView=new WateRipple(getContext(),paint);
   addView(rippleView,rippleParams);
   rippleViewList.add(rippleView);
  }
 }

 /**
  * 初始化畫筆
  */
 private void initPaint() {
  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setColor(rippleColor);
  paint.setStyle(Paint.Style.FILL);
 }
 /**
  * 開啟動畫
  */
 public void startRippleAnimation(){
  if(!isRunning()){
   for(WateRipple wateRipple:rippleViewList){
    wateRipple.setVisibility(VISIBLE);
   }
   animatorSet.start();
   isAnimRunning=true;
  }
 }
 /**
  * 動畫停止運行
  */
 public void stopAnimation(){
  if(isRunning()){
   animatorSet.cancel();
   isAnimRunning=false;
  }
 }
 /**
  * 判斷是否動畫在運行
  * @return
  */
 public boolean isRunning(){
  return isAnimRunning;
 }
 /**
  * ui不可見時關閉動畫
  * @param visibility
  */
 @Override
 protected void onWindowVisibilityChanged(int visibility) {
  super.onWindowVisibilityChanged(visibility);
  if(visibility==View.INVISIBLE||visibility ==View.GONE){
   stopAnimation();
  }
 }
}

每個水波紋view

package com.zhifubaoxiuyixiu.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;
/**
 * Created by admin on 2016/12/29.
 */
public class WateRipple extends View {
 private Paint mPaint;
 public WateRipple(Context context, Paint paint){
  super(context);
  if(paint==null){
   this.mPaint = new Paint();
  }else{
   this.mPaint = paint;
  }
  setVisibility(View.INVISIBLE);//剛開始設置不可見
 }
 public WateRipple(Context context) {
  super(context);
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  int radius=(Math.min(getWidth(),getHeight()))/2;
  canvas.drawCircle(radius,radius,radius,mPaint);
 }
}

圓形圖片：

package com.zhifubaoxiuyixiu.view;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.view.View;
import com.zhifubaoxiuyixiu.R;
/**
 * Created by admin on 2016/12/29.
 */
public class CircleView extends View {
 private BitmapShader bitmapShaderp ;
 private ShapeDrawable shapeDrawable;
 public CircleView(Context context) {
  this(context,null);
 }
 public CircleView(Context context, AttributeSet attrs) {
  this(context, attrs,0);
 }
 public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initBitmap();
 }
 private void initBitmap() {
  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.grid);
  shapeDrawable = new ShapeDrawable(new OvalShape());
  bitmapShaderp = new BitmapShader(bitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
  shapeDrawable.getPaint().setShader(bitmapShaderp);
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  shapeDrawable.setBounds(0,0,getWidth(),getHeight());
  shapeDrawable.draw(canvas);
 }
}

布局文件：

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 <com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/root"
  >
  <com.zhifubaoxiuyixiu.view.CircleView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_centerInParent="true"
   android:id="@+id/imageView"
   android:layout_gravity="center"
   android:src="@mipmap/grid"/>
 </com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout>
</RelativeLayout>

使用：

package com.zhifubaoxiuyixiu;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import com.zhifubaoxiuyixiu.view.CircleView;
import com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout;
public class MainActivity extends Activity {
 private CircleView imageView;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  imageView = (CircleView) findViewById(R.id.imageView);
  final ZhifubaoFrameLayout root = (ZhifubaoFrameLayout) findViewById(R.id.root);
  imageView.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    root.startRippleAnimation();
   }
  });
 }
}

以上所述是小編給大家介紹的Android 自定義view仿支付寶咻一咻功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對本站網站的支持！