支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能。

效果如下所示：

思路：

就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画

还有就是这是好几个圆,然后执行的动画有个延迟效果,其实这些动画是放在一起执行的,熟悉属性动画的知道已经给我们提供了同步执行动画和顺序执行动画的实现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仿支付宝咻一咻功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# android  # 支付宝咻一咻  # 自定义view  # Android中RecyclerView布局代替GridView实现类似支付宝的界面  # Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效  # Android app第三方支付宝支付接入教程  # Android支付宝支付封装代码  # Android支付宝和微信支付集成  # Android开发之实现GridView支付宝九宫格  # Android仿支付宝支付从底部弹窗效果  # Android支付宝支付设计开发  # 支付宝咻一咻怎么用 Android帮你实现咻一咻  # Android自定义View实现支付宝咻一咻效果  # 几个  # 水波纹  # 支付宝  # 小编  # 这是  # 会有  # 也会  # 有个  # 在此  # 给我们  # 上有  # 给大家  # 自定义  # 会说  # 人说  # 刚开始  # 可以使用  # 所示  # 个字  # 这几个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何彻底卸载建站之星软件？  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  Laravel distinct去重查询_Laravel Eloquent去重方法  高端云建站费用究竟需要多少预算？  活动邀请函制作网站有哪些,活动邀请函文案？  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  如何用已有域名快速搭建网站？  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  郑州企业网站制作公司,郑州招聘网站有哪些？  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  微信小程序 wx.uploadFile无法上传解决办法  如何用美橙互联一键搭建多站合一网站？  如何用PHP工具快速搭建高效网站？  如何快速搭建安全的FTP站点？  详解jQuery中的事件  如何快速建站并高效导出源代码？  如何在万网ECS上快速搭建专属网站？  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  Laravel中的Facade(门面)到底是什么原理  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  Laravel如何实现一对一模型关联？（Eloquent示例）  使用豆包 AI 辅助进行简单网页 HTML 结构设计  网站制作软件免费下载安装,有哪些免费下载的软件网站？  Swift中循环语句中的转移语句 break 和 continue  微信推文制作网站有哪些,怎么做微信推文，急？  如何在橙子建站上传落地页？操作指南详解  如何在万网主机上快速搭建网站？  Laravel如何与Docker（Sail）协同开发？（环境搭建教程）  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  如何在阿里云部署织梦网站？  Python并发异常传播_错误处理解析【教程】  Python自动化办公教程_ExcelWordPDF批量处理案例  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  在线制作视频的网站有哪些,电脑如何制作视频短片？  Laravel如何生成URL和重定向？（路由助手函数）  如何为不同团队 ID 动态生成多个非值班状态按钮  如何用IIS7快速搭建并优化网站站点？  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  如何在搬瓦工VPS快速搭建网站？  详解MySQL数据库的安装与密码配置  如何自定义建站之星模板颜色并下载新样式？  Laravel如何创建自定义中间件？（Middleware代码示例）  Laravel怎么判断请求类型_Laravel Request isMethod用法  制作企业网站建设方案,怎样建设一个公司网站？