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>

其效果图如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

  • Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果

    去年春节的时候支付宝推行的集福娃活动着实火的不能再火了,更给力的是春晚又可以全民参与咻一咻集福娃活动,集齐五福就可平分亿元大红包,只可惜没有敬业福--那时候在家没事写了个咻一咻插件,只要到了咻一咻的时间点插件就可以自动的点击咻一咻来咻红包,当时只是纯粹练习这部分技术代码没有公开,后续计划写篇关于插件这方面的文章,扯远了(*^__^*) --我们知道在支付宝的咻一咻页面有个雷达扩散的动画效果,当时感觉动画效果非常棒,于是私下尝试着实现了类似的效果,后来在github发现有大神也写有类似效果,于是读

  • Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效

    今年春节晚会没看尽兴,被支付宝集福给添了一段插曲,朋友们都在那数定时间段不停的咻一咻,哇,我咻到一个敬业福,不可能的,哈哈.那么咻一咻功能基于程序代码是怎么实现的呢?下面我们小编给大家分享本教程帮助大家学习Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效,具体内容如下所示: 先来看看这个效果 这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术不行,也太懒了 PS:这个view也是我模仿了人家的效果,参考了人家的思路写的,不是纯手撸,罪过罪过

  • Android开发中画廊视图Gallery的两种使用方法分析

    本文实例讲述了Android开发中画廊视图Gallery的两种使用方法.分享给大家供大家参考,具体如下: 第一种方法: 第一步:设计xml布局文件 代码如下:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_w

  • android实现支付宝咻一咻的几种思路方法

    支付宝咻一咻在过年的时候很火热.那么咻一咻具体有哪些实现方式呢?下面我们将一一介绍这几种思路的实现过程. 1.自定义View实现咻一咻 那么这种实现方法需要掌握Canvas以及Paint几乎所有的方法.其对程序员的专业知识要求极高. 用该种方式实现的优点有: ㈠这种是最复杂的实现方法,但其兼容性最高,其支持Android的所有设备. ㈡其对内存要求不大,几乎不占用任何内存. 下面我们来看看是怎样实现其效果的: public class XiuYiXiuView extends View { /*

  • android帮助文档打开慢的三种解决方法

    经查是因为本地文档中的网页有如下js代码会联网加载信息,将其注释掉后就好了 复制代码 代码如下: <script src="http://www.google.com/jsapi" type="text/javascript"></script> 用一下java代码就可以批量注释 复制代码 代码如下: package cn.sd.fxd.android; /* * 去掉Android文档中需要联网的javascript代码 */import

  • Android打开系统相机并拍照的2种显示方法

    本文实例为大家分享了Android打开系统相机并拍照的具体实现代码,供大家参考,具体内容如下 目标效果: 第二张为点击第一个按钮拍照后显示的,比较模糊,第三章为点击第二个按钮拍照后显示的,比较清楚. 1.activity_main.xml页面设置布局. activity_main.xml页面: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="h

  • 详解Android用Shape制作单边框图的两种思路和坑

    开发中遇到单/多边框的UI,简单的可以自己写shape图,复杂的一般都让设计配合制作9patch图了. 今天不说需要切图的情况,只聊简单的单/多边框,主要是实现思路. 效果很简单: 就以上图为例介绍,只有上边框,边框红色.宽1dp,其余为白色. 思路一 两层画布叠加:底层红色:上层白色: 上层白色画布下移1dp. 代码实现: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:andro

  • 将文件放到Android模拟器的SD卡中的两种解决方法

    两种方式:一.窗口界面操作1.打开DDMS页面2.打开File Explorer页,如果没有,在Window --> Show View -->File Explorer3.一般就在mnt --> sdcard中4.在sdcard中,点击你要将文件放到的目的文件夹,这里如mp3文件夹5.点击文件夹后,在File Explorer页的右边有两个图标,一个是pull,一个是push,pull是将mp3里面的文件拉出去,push是将外面,如硬盘上的文件推到mp3文件夹里面来. 二.命令行方式启

  • Android自定义View实现支付宝咻一咻效果

    本篇文章介绍自定义View配合属性动画来实现如下的效果 实现思路挺简单: 画一个半透明的圆 实现两种动画效果,点击时扩散和不点击时扩散回收 使用线程的方式将上面两步结合起来 首先看下画半透明圆的部分 public class ClickCircleView extends View { private Bitmap bitmap; private Paint paint; private Canvas canvas; private boolean isSpreadFlag = false;//

随机推荐