支付宝咻一咻怎么用 Android帮你实现咻一咻_Android

对于之前最火的无外乎集五福了，而五福除了加十个好友获得外，最直接的途径就是支付宝的咻一咻了。那么咻一咻具体有哪些实现方式呢？下面我们将一一介绍这几种思路的实现过程。

1.自定义View实现咻一咻

那么这种实现方法需要掌握Canvas以及Paint几乎所有的方法。其对程序员的专业知识要求极高。

用该种方式实现的优点有：

  • ㈠这种是最复杂的实现方法，但其兼容性最高，其支持android的所有设备。
  • ㈡其对内存要求不大，几乎不占用任何内存。

下面我们来看看是怎样实现其效果的：

public class XiuYiXiuView extends View {
 /***
  * 中心图片画笔
  */
 private Paint paint;
 /***
  * 水波圆圈画笔
  */
 private Paint circlePaint;
 /***
  * 用bitmap创建画布
  */
 private Bitmap bitmap;
 /***
  * 中心图片
  */
 private Bitmap imageBit;
 /***
  * 画布
  */
 private Canvas canvas;
 /***
  * 屏幕的宽
  */
 private int screenWidth;
 /***
  * 屏幕的高
  */
 private int screenHeight;
 /***
  * 图片右上角坐标
  */
 private Point pointLeftTop;
 /***
  * 图片右下角坐标
  */
 private Point pointRightBottom;
 /***
  * 记录圆圈
  */
 private List<LYJCircle> lyjCircleList;
 /***
  * 标记是否按下按钮，并且源泉是否扩散消失
  */
 private boolean isSpread=false;
 /***
  * 默认没有按动时候的圆圈
  */
 private LYJCircle defaultCircle;
 public XiuYiXiuView(Context context, AttributeSet attrs) {
  super(context, attrs);
  this.lyjCircleList=new ArrayList<>();
  screenWidth=LYJUtils.getScreenWidth((Activity) context);
  screenHeight=LYJUtils.getScreenHeight((Activity) context);
  bitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888); // 设置位图的宽高
  canvas = new Canvas();
  canvas.setBitmap(bitmap);
  paint=new Paint(Paint.DITHER_FLAG);
  paint.setAntiAlias(true);
  circlePaint=new Paint(Paint.DITHER_FLAG);
  circlePaint.setAntiAlias(true);
  imageBit= BitmapFactory.decodeResource(getResources(), R.drawable.bwa_homepage_yuyin);
  pointLeftTop=new Point((screenWidth/2)-(imageBit.getWidth()/2),(screenHeight/2)-(imageBit.getHeight()/2));
  pointRightBottom=new Point(pointLeftTop.x+imageBit.getWidth(),pointLeftTop.y+imageBit.getHeight());
  canvas.drawBitmap(imageBit,pointLeftTop.x,pointLeftTop.y,paint);
  //取图片上的颜色
  Palette.generateAsync(imageBit, new Palette.PaletteAsyncListener() {
   @Override
   public void onGenerated(Palette palette) {
    Palette.Swatch swatch1 = palette.getVibrantSwatch(); //充满活力的色板
    circlePaint.setColor(swatch1.getRgb());
    circlePaint.setStyle(Paint.Style.STROKE);
    circlePaint.setStrokeWidth(10);
    circlePaint.setAlpha(100);
    paint.setShadowLayer(15, 0, 0, swatch1.getRgb());//设置阴影效果
    int[] mColors = new int[] {//渲染颜色
      Color.TRANSPARENT,swatch1.getRgb()
    };
    //范围，这里可以微调，实现你想要的渐变
    float[] mPositions = new float[] {
      0f, 0.1f
    };
    Shader shader=new RadialGradient(screenWidth / 2,screenHeight / 2,imageBit.getWidth() / 2 + 10,mColors, mPositions,
      Shader.TileMode.MIRROR);
    circlePaint.setShader(shader);
    defaultCircle=new LYJCircle(screenWidth / 2, screenHeight / 2, imageBit.getWidth() / 2 + 10);
    clearScreenAndDrawList();
    Message message = handler.obtainMessage(1);
    handler.sendMessageDelayed(message, 1000); //发送message

   }
  });
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()){
   case MotionEvent.ACTION_DOWN:
    break;
   case MotionEvent.ACTION_MOVE:
    break;
   case MotionEvent.ACTION_UP:
    isSpread=true;//是否按下图片
    lyjCircleList.add(new LYJCircle(screenWidth / 2, screenHeight / 2, imageBit.getWidth() / 2 + 10));
    clearScreenAndDrawList();
    invalidate();
    break;
   default:
    break;
  }
  return true;
 }

 private Handler handler = new Handler(){
  public void handleMessage(Message msg){
   switch (msg.what) {
    case 1:
     //定时更新界面
     clearScreenAndDrawList();
     invalidate();
     Message message = handler.obtainMessage(1);
     handler.sendMessageDelayed(message, 200);
   }
   super.handleMessage(msg);
  }
 };

 /**
  * 清掉屏幕上所有的圆圈，然后画出集合里面的圆圈
  */
 private void clearScreenAndDrawList() {
  canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
  //判断是否按下图片，并且外圈执行完成没有。
  if(!isSpread){
    circlePaint.setMaskFilter(null);
    canvas.drawCircle(defaultCircle.getRoundX(), defaultCircle.getRoundY(),defaultCircle.getRadiuLoop(), circlePaint);// 画线
  }else{
   for (LYJCircle lyjCircle : lyjCircleList) {
    if(lyjCircle.getSpreadRadiu()==0){

    }else if(lyjCircle.getSpreadRadiu()>(lyjCircle.getRadiu()+99)){
     //如果圆圈扩散半径大于图片半径+99，那么设置边缘模糊，也就是淡出的效果
     circlePaint.setMaskFilter(new BlurMaskFilter(5, BlurMaskFilter.Blur.OUTER));
     canvas.drawCircle(lyjCircle.getRoundX(), lyjCircle.getRoundY(),lyjCircle.getSpreadRadiu(), circlePaint);// 画线
    }else{
     //不是则按正常的环形渲染来
     circlePaint.setMaskFilter(null);
     canvas.drawCircle(lyjCircle.getRoundX(), lyjCircle.getRoundY(),lyjCircle.getSpreadRadiu(), circlePaint);// 画线
    }
   }
  }
  canvas.drawBitmap(imageBit,pointLeftTop.x,pointLeftTop.y,paint);
  //释放小时了的圆圈
  for(int i=0;i<lyjCircleList.size();i++){
   if(lyjCircleList.get(i).getSpreadRadiu()==0){
    lyjCircleList.remove(i);
   }
  }
  //如果没有点击图片发射出去的圆圈，那么就恢复默认缩放。
  if(lyjCircleList.size()<=0){
   isSpread=false;
  }
 }

 @Override
 protected void onDraw(Canvas canvas) {
  canvas.drawBitmap(bitmap, 0, 0, null);
 }
}

圆类：

package com.example.liyuanjing.model;

/**
 * Created by liyuanjing on 2016/2/3.
 */
public class LYJCircle {
 private int roundX;//圆中心点X坐标
 private int roundY;//圆中心点Y坐标
 private int radiu;//圆半径
 private int currentRadiu;//当前radiu
 private int lastRadiu;//历史radiu
 private int spreadRadiu;//加速半径
 private int[] speed=new int[]{6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6};//半径扩大速度。这里为匀速
 private int speedLast=0;//记录历史值
 public LYJCircle(int roundX,int roundY,int radiu){
  this.roundX=roundX;
  this.roundY=roundY;
  this.radiu=radiu;
  this.spreadRadiu=radiu;
  this.currentRadiu=this.radiu;
  this.lastRadiu=this.currentRadiu;
 }

 //获取半径
 public int getRadiu() {
  return radiu;
 }

 public void setRadiu(int radiu) {
  this.radiu = radiu;
 }

 //获取加速半径
 public int getSpreadRadiu(){
  if(speedLast>=speed.length){
   return 0;
  }
  spreadRadiu+=speed[speedLast];
  ++speedLast;
  return spreadRadiu;
 }

 //获取循环缩放半径
 public int getRadiuLoop() {
  if(currentRadiu==lastRadiu){
   ++currentRadiu;
  }else if(currentRadiu>lastRadiu){
   if(currentRadiu>(radiu+20)){
    currentRadiu=19+radiu;
    lastRadiu=20+radiu;
   }else{
    lastRadiu=currentRadiu;
    currentRadiu+=5;
   }
  }else{
   if(currentRadiu<(radiu+9)){
    currentRadiu=10+radiu;
    lastRadiu=9+radiu;
   }else{
    lastRadiu=currentRadiu;
    currentRadiu-=5;
   }
  }
  return currentRadiu;
 }

 public int getRoundX() {
  return roundX;
 }

 public int getRoundY() {
  return roundY;
 }
}

你可以修改如下两个地方，会产生视觉上真真的波纹效果：

①支付宝的背景图片是淡红色，衬托了红色的波纹。当然了你也可以将画布设置为透明淡红色。

②其为填充圆圈渲染，不是我的边框渲染效果，你可以将circlePaint.setStyle(Paint.Style.STROKE);换成Paint.Style.FILL.然后，微调shader的mPositions实现环形填充渐变。你也许会觉得，你看支付宝咻一咻圆圈弹开的时候内圈有波纹也像外弹开，其实那就是环形渐变，当你圆圈变大后，其渐变的范围也就变大了，自然你看到有颜色周围扩散的迹象。

2.属性动画实现咻一咻

其要掌握的只是基本只需要属性动画，在加一点线程方面有关的知识而已。

下面我们看看其实现步骤：

㈠自定义View实现一个圆即可,代码如下：

public class LYJCircleView extends View {
 private Bitmap bitmap;
 private Paint paint;
 private Canvas canvas;
 private int screenWidth;
 private int screenHeight;
 private boolean isSpreadFlag=false;//标记是否发射完成

 public boolean isSpreadFlag() {
  return isSpreadFlag;
 }

 public void setIsSpreadFlag(boolean isSpreadFlag) {
  this.isSpreadFlag = isSpreadFlag;
 }

 public LYJCircleView(Context context,int width,int height,int statusHeight) {
  super(context);
  screenWidth= LYJUtils.getScreenWidth((Activity) context);
  screenHeight=LYJUtils.getScreenHeight((Activity) context);
  bitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888); // 设置位图的宽高
  canvas = new Canvas();
  canvas.setBitmap(bitmap);
  paint=new Paint(Paint.DITHER_FLAG);
  paint.setAntiAlias(true);
  paint.setColor(Color.RED);
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(5);
  paint.setAlpha(100);
  paint.setShadowLayer(10, 0, 0, Color.RED);
  int[] mColors = new int[] {
    Color.TRANSPARENT,Color.RED
  };
  float[] mPositions = new float[] {
    0f, 0.1f
  };
  Shader shader=new RadialGradient(screenWidth / 2,screenHeight / 2,width / 2 + 10,mColors, mPositions,
    Shader.TileMode.MIRROR);
  paint.setShader(shader);
  canvas.drawCircle(screenWidth / 2, (screenHeight - statusHeight) / 2, width / 2 + 10, paint);
  invalidate();
 }

 @Override
 protected void onDraw(Canvas canvas) {
  canvas.drawBitmap(bitmap,0,0,null);
 }
}

代码与上面差不多，就不注释了。

㈡实现Activity即可

public class XiuYiXiuActivity extends AppCompatActivity {
 private ImageButton mImageButton;
 private LYJCircleView lyjCircleView;
 private RelativeLayout relativeLayout;
 private List<LYJCircleView> lyjCircleViewList;
 private int statusBarHeight;
 private Animator anim;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.xiuyixiu_activity_main);
  this.mImageButton=(ImageButton)findViewById(R.id.xiuyixiu_imagebutton);
  this.relativeLayout=(RelativeLayout)findViewById(R.id.xiuyixiu_relativelayout);
  this.lyjCircleViewList=new ArrayList<>();
  this.mImageButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    lyjCircleView.setVisibility(View.GONE);//发射圆圈，即将循环动画View隐藏
    final LYJCircleView item=new LYJCircleView(XiuYiXiuActivity.this, mImageButton.getWidth(), mImageButton.getHeight(), statusBarHeight);
    Animator spreadAnim = AnimatorInflater.loadAnimator(XiuYiXiuActivity.this, R.animator.circle_spread_animator);
    spreadAnim.addListener(new Animator.AnimatorListener() {
     @Override
     public void onAnimationStart(Animator animation) {

     }

     @Override
     public void onAnimationEnd(Animator animation) {
      item.setIsSpreadFlag(true);//动画执行完成，标记一下
     }

     @Override
     public void onAnimationCancel(Animator animation) {

     }

     @Override
     public void onAnimationRepeat(Animator animation) {

     }
    });
    spreadAnim.setTarget(item);
    spreadAnim.start();
    lyjCircleViewList.add(item);
    relativeLayout.addView(item);
    relativeLayout.invalidate();
    Message message = handler.obtainMessage(1);
    handler.sendMessageDelayed(message, 10); //发送message,定时释放LYJCircleView
   }
  });
 }

 private Handler handler = new Handler(){
  public void handleMessage(Message msg){
   switch (msg.what) {
    case 1:
     for(int i=0;i<lyjCircleViewList.size();i++){
      if(lyjCircleViewList.get(i).isSpreadFlag()){
       relativeLayout.removeView(lyjCircleViewList.get(i));
       lyjCircleViewList.remove(i);
       relativeLayout.invalidate();
      }
     }
     if(lyjCircleViewList.size()<=0){
      lyjCircleView.setVisibility(View.VISIBLE);
     }
     Message message = handler.obtainMessage(1);
     handler.sendMessageDelayed(message, 10);
   }
   super.handleMessage(msg);
  }
 };

 @Override
 public void onWindowFocusChanged(boolean hasFocus) {
  super.onWindowFocusChanged(hasFocus);
  //获取状态栏高度
  Rect frame = new Rect();
  getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
  statusBarHeight = frame.top;
  this.mImageButton.post(new Runnable() {
   @Override
   public void run() {
    lyjCircleView = new LYJCircleView(XiuYiXiuActivity.this, mImageButton.getWidth(), mImageButton.getHeight(), statusBarHeight);
    relativeLayout.addView(lyjCircleView);
    relativeLayout.postInvalidate();
    // 加载动画
    anim = AnimatorInflater.loadAnimator(XiuYiXiuActivity.this, R.animator.circle_scale_animator);
    anim.addListener(new Animator.AnimatorListener() {
     @Override
     public void onAnimationStart(Animator animation) {

     }

     @Override
     public void onAnimationEnd(Animator animation) {
      anim.start();//循环执行动画
     }

     @Override
     public void onAnimationCancel(Animator animation) {

     }

     @Override
     public void onAnimationRepeat(Animator animation) {

     }
    });
    anim.setTarget(lyjCircleView);
    anim.start();
   }
  });
 }
}

㈢布局文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/xiuyixiu_relativelayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <ImageButton
  android:id="@+id/xiuyixiu_imagebutton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:background="@drawable/bwa_homepage_yuyin"/>

</RelativeLayout>

当然上面两个实现方法，我都只设置圆边框，没有填充，你可以设置为填充后，在微调渐变值。

其属性动画文件circle_scale_animator.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:ordering="together">
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleX"
  android:valueFrom="1.0"
  android:valueTo="1.2"
  android:valueType="floatType">
 </objectAnimator>
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleY"
  android:valueFrom="1.0"
  android:valueTo="1.2"
  android:valueType="floatType">
 </objectAnimator>
 <objectAnimator
  android:startOffset="1000"
  android:duration="1000"
  android:propertyName="scaleX"
  android:valueFrom="1.2"
  android:valueTo="1.0"
  android:valueType="floatType">
 </objectAnimator>
 <objectAnimator
  android:startOffset="1000"
  android:duration="1000"
  android:propertyName="scaleY"
  android:valueFrom="1.2"
  android:valueTo="1.0"
  android:valueType="floatType">
 </objectAnimator>
</set>

另一个circle_spread_animator.xml为：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleY"
  android:valueFrom="1.0"
  android:valueTo="2.0"
  android:valueType="floatType">
 </objectAnimator>
 <objectAnimator
  android:duration="1000"
  android:propertyName="scaleX"
  android:valueFrom="1.0"
  android:valueTo="2.0"
  android:valueType="floatType">
 </objectAnimator>
</set>

以上就是本文的详细内容，希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索android
， 支付宝
咻一咻
android 支付宝咻一咻、ios 咻一咻功能实现、android咻一咻效果、android 咻一咻动画、支付宝咻一咻，以便于您获取更多的相关知识。

时间： 2024-12-27 18:53:58

支付宝咻一咻怎么用 Android帮你实现咻一咻_Android的相关文章

支付宝咻一咻怎么用 Android帮你实现咻一咻

对于之前最火的无外乎集五福了,而五福除了加十个好友获得外,最直接的途径就是支付宝的咻一咻了.那么咻一咻具体有哪些实现方式呢?下面我们将一一介绍这几种思路的实现过程. 1.自定义View实现咻一咻 那么这种实现方法需要掌握Canvas以及Paint几乎所有的方法.其对程序员的专业知识要求极高. 用该种方式实现的优点有: ㈠这种是最复杂的实现方法,但其兼容性最高,其支持android的所有设备. ㈡其对内存要求不大,几乎不占用任何内存. 下面我们来看看是怎样实现其效果的: public class

Android特效之水波纹的实现_Android

前言 水波纹特效,想必大家或多或少见过,在我的印象中,大致有如下几种:      支付宝 "咻咻咻" 式      流量球 "荡漾" 式      真实的水波纹效果,基于Bitmap处理式 话不多说,先来看看效果: 填充式水波纹,间距相等 非填充式水波纹,间距相等 非填充式水波纹,间距不断变大 填充式水波纹,间距不断变小 想必大家已经知道基本的原理了,就是用Canvas来画嘛,但可不是简单的画哦,请往下看. 分析 这种类型的水波纹,其实无非就是画圆而已,在给定的矩形

Android中ListView Item布局优化技巧_Android

本文实例讲述了Android中ListView Item布局优化技巧.分享给大家供大家参考,具体如下: 之前一直都不知道ListView有多种布局的优化方法,只能通过隐藏来实现,自己也知道效率肯定是很低的,但是也不知道有什么方法,这些天又查了一些资料,然后知道 其实google早就帮我们想好了优化方案了. 假设你的ListView Item有三种布局样式的可能:就比如很简单的显示一行字,要靠左,居中,靠右. 这时我们就可以在BaseAdapter里面重写两个方法: private static

Android开发学习路线的七大阶段_Android

看了专业的培训机构的课程大纲,才知道,自己学习android的路途才刚刚开始!特此整理分享一下,希望能帮到那些准备学习android开发,或者正在学习android开发,但是又没有找到明确路线的童鞋们!(PS:特此声明,这篇文章不是给培训机构做广告哈,本人也是在自学android开发!!) 第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环. 2.String和StringBuffer的使用.正则表达式. 3.面向对象的抽象,封装,继承,多态,类与对象,对象初始化和回收:

Android生成带圆角的Bitmap图片_Android

本文实例讲述了Android生成带圆角的Bitmap图片.分享给大家供大家参考.具体如下: 有时候我们在开发Android应用时,会遇到圆角图片的问题,那么,我们如何在Android中用代码来生成圆角Bitmap图片呢?下面这段代码也许能够帮到你. 该方法主要用到了drawRoundRect来画圆角矩形,然后通过drawBitmap来画图片. //生成圆角图片 public static Bitmap GetRoundedCornerBitmap(Bitmap bitmap) { try { B

android底部菜单栏实现原理与代码_Android

上一个项目已经做完了,这周基本上没事,所以整理了下以前的项目,想把一些通用的部分封装起来,这样以后遇到相似的项目就不用重复发明轮子了,也节省了开发效率.今天把demo贴出来一是方便以后自己查询,二是希望同时也能帮到大家. 底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏做.我这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下

Android RecyclerView滑动删除和拖动排序_Android

本篇是接着上面三篇之后的一个对RecyclerView的介绍,这里多说两句,如果你还在使用ListView的话,可以放弃掉ListView了.RecyclerView自动帮我们缓存Item视图(ViewHolder),允许我们自定义各种动作的动画和分割线,允许我们对Item进行一些手势操作.另外,因为Design库的推出大大方便我们编写带有Material风格的App,而ListView是不兼容这个库的,比如滑动的相互协调,只有RecyclerView能做到. 先看本篇内容的效果图:   效果内

Android AIDL——进程通信机制详解_Android

Android  AIDL, Android进程机制通信机制,这里就整理下AIDL 的知识,帮助大家学习理解此部分知识! 什么是 AIDL AIDL 全称 Android Interface Definition Language,即 安卓接口描述语言.听起来很深奥,其实它的本质就是生成进程间通信接口的辅助工具.它的存在形式是一种 .aidl 文件,开发者需要做的就是在该文件中定义进程间通信的接口,编译的时候 IDE 就会根据我们的 .aidl 接口文件生成可供项目使用的 .java 文件,这和

Android中CountDownTimer倒计时器用法实例_Android

本文实例讲述了Android中CountDownTimer倒计时器用法.分享给大家供大家参考,具体如下: 在平时我们编程的时候,经常会用到倒计时这个功能,很多人不知道Android已经帮封装好了一个类,往往都自己写.现在发现了这个类,大家共享一下: 在一个TextView不断显示剩下的时间,代码如下: private TextView vertifyView; private CountDownTimer timer = new CountDownTimer(10000, 1000) { @Ov