实现支付宝咻一咻的几种思路

Posted ljbguanli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现支付宝咻一咻的几种思路相关的知识,希望对你有一定的参考价值。

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


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>



其效果图例如以下:


技术分享


3.Android 5.0逆天实现咻一咻


这个仅标记出来,不做解说,只是有几个知识提示一下。你就明确了。只是此种方式实现仅仅兼容5.0以上设备,不兼容5.0以下设备。


我们都知道5.0中提供例如以下两个属性:


android:background="?android:attr/selectableItemBackground"波纹有边界


android:background="?

android:attr/selectableItemBackgroundBorderless"波纹超出边界


设置以下这个就会绘制一个圆形的波纹(无论你的控件是不是圆形)。


通过android:colorControlHighlight设置波纹颜色。


那么好了就,介绍这么多了,时间匆促,要过春节了。最后附上本文源代码:


https://github.com/liyuanjinglyj/XiuYiXiuDemo


























































以上是关于实现支付宝咻一咻的几种思路的主要内容,如果未能解决你的问题,请参考以下文章

Web产品实现个人收款的几种方式

探讨一下实现幂等性的几种方式

最近接触的几种APP支付方式——支付宝支付

Laravel:如何在控制器的几种方法中重用代码片段

一张图帮你记忆,Spring Boot 应用在启动阶段执行代码的几种方式

PHP实现执行定时任务的几种思路详解