支付宝咻一咻怎么用 Android帮你实现咻一咻
作者：Git_Android
字体：[ ] 类型：转载 时间：
Android帮你实现咻一咻，这篇文章主要为大家介绍了支付宝咻一咻的几种思路，感兴趣的朋友可以参考一下
对于之前最火的无外乎集五福了，而五福除了加十个好友获得外，最直接的途径就是支付宝的咻一咻了。那么咻一咻具体有哪些实现方式呢？下面我们将一一介绍这几种思路的实现过程。
1.自定义View实现咻一咻
那么这种实现方法需要掌握Canvas以及Paint几乎所有的方法。其对程序员的专业知识要求极高。
用该种方式实现的优点有：
㈠这种是最复杂的实现方法，但其兼容性最高，其支持android的所有设备。
㈡其对内存要求不大，几乎不占用任何内存。
下面我们来看看是怎样实现其效果的：
public class XiuYiXiuView extends View {
* 中心图片画笔
* 水波圆圈画笔
private Paint circleP
* 用bitmap创建画布
* 中心图片
private Bitmap imageB
* 屏幕的宽
private int screenW
* 屏幕的高
private int screenH
* 图片右上角坐标
private Point pointLeftT
* 图片右下角坐标
private Point pointRightB
* 记录圆圈
private List&LYJCircle& lyjCircleL
* 标记是否按下按钮，并且源泉是否扩散消失
private boolean isSpread=
* 默认没有按动时候的圆圈
private LYJCircle defaultC
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() {
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[] {
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
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
isSpread=//是否按下图片
lyjCircleList.add(new LYJCircle(screenWidth / 2, screenHeight / 2, imageBit.getWidth() / 2 + 10));
clearScreenAndDrawList();
invalidate();
private Handler handler = new Handler(){
public void handleMessage(Message msg){
switch (msg.what) {
//定时更新界面
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);// 画线
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);// 画线
//不是则按正常的环形渲染来
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){
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap, 0, 0, null);
package com.example.liyuanjing.
* Created by liyuanjing on .
public class LYJCircle {
private int roundX;//圆中心点X坐标
private int roundY;//圆中心点Y坐标
private int currentR//当前radiu
private int lastR//历史radiu
private int spreadR//加速半径
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=
this.spreadRadiu=
this.currentRadiu=this.
this.lastRadiu=this.currentR
//获取半径
public int getRadiu() {
public void setRadiu(int radiu) {
this.radiu =
//获取加速半径
public int getSpreadRadiu(){
if(speedLast&=speed.length){
spreadRadiu+=speed[speedLast];
return spreadR
//获取循环缩放半径
public int getRadiuLoop() {
if(currentRadiu==lastRadiu){
++currentR
}else if(currentRadiu&lastRadiu){
if(currentRadiu&(radiu+20)){
currentRadiu=19+
lastRadiu=20+
lastRadiu=currentR
currentRadiu+=5;
if(currentRadiu&(radiu+9)){
currentRadiu=10+
lastRadiu=9+
lastRadiu=currentR
currentRadiu-=5;
return currentR
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 int screenW
private int screenH
private boolean isSpreadFlag=//标记是否发射完成
public boolean isSpreadFlag() {
return isSpreadF
public void setIsSpreadFlag(boolean isSpreadFlag) {
this.isSpreadFlag = isSpreadF
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[] {
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();
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap,0,0,null);
代码与上面差不多，就不注释了。
㈡实现Activity即可
public class XiuYiXiuActivity extends AppCompatActivity {
private ImageButton mImageB
private LYJCircleView lyjCircleV
private RelativeLayout relativeL
private List&LYJCircleView& lyjCircleViewL
private int statusBarH
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() {
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() {
public void onAnimationStart(Animator animation) {
public void onAnimationEnd(Animator animation) {
item.setIsSpreadFlag(true);//动画执行完成，标记一下
public void onAnimationCancel(Animator animation) {
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) {
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);
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
//获取状态栏高度
Rect frame = new Rect();
getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
statusBarHeight = frame.
this.mImageButton.post(new Runnable() {
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() {
public void onAnimationStart(Animator animation) {
public void onAnimationEnd(Animator animation) {
anim.start();//循环执行动画
public void onAnimationCancel(Animator animation) {
public void onAnimationRepeat(Animator animation) {
anim.setTarget(lyjCircleView);
anim.start();
㈢布局文件代码如下：
&?xml version="1.0" encoding="utf-8"?&
&RelativeLayout xmlns:android="/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="/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&
另一个circle_spread_animator.xml为：
&?xml version="1.0" encoding="utf-8"?&
&set xmlns:android="/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&
以上就是本文的详细内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具支付宝，咻一咻，晒晒你们平分多少钱呗，应该大家都想知道吧！
支付宝，咻一咻，晒晒你们平分多少钱呗，应该大家都想知道吧！天极网用户登录
您现在的位置：
错过了微信的摇一摇 你还有支付宝的咻一咻Yesky天极新闻 21:20
　　相信大家都被昨晚的红包“照骗”刷屏了!小编也凑了个热闹，居然还真的有人发红包来看，弄得宝宝都不好意思了……
　　就要过年了，不管是微信还是，都变着法儿地在红包上吸引大众的眼球。只要出现“红包”二字，不管怎样的形式，都能引起人们的骚动，没办法，谁让这社会就是这么现实呢。
　　昨晚8点和9点，微信摇一摇中可以摇到红包，虽然能很明显地看到理财通、微票儿等一系列赞助商，摇到的金额也都是几毛钱，但最起码是现金红包，放到零钱里面可以花的。
　　相比于微信红包来说，支付宝最近推出的咻一咻红包也很火。每天上午10点，打开支付宝的咻一咻，就有“咻一咻抢惊喜”，400万个礼包等着用户来拿，附上抢红包时间表。(怎么听起来像是打广告……)
　　可是当小编期待满满地打开这个时间表的时候，激情澎湃的心瞬间跌落谷底。这都是什么啊，满100减10块的礼包、满300减30的礼包……一点诚意都没有!我可是咻咻咻了半天，搞得隔壁工位的同事一直盯着我看，害得我都羞羞了。也不是现金红包，不管抢到多少只有在消费的时候才能用。暂且不说这么多家店能咻到几家，就算咻到了，难道我要因为这减了10块的礼包特意去消费一次？
　　另外，支付宝最近推出了可定制口令的群红包。在去年春节的时候，支付宝也推出了红包游戏，用户可以输入数字口令领取红包，也可以猜红包金额，猜对之后可以平分。于是你就能看到，一堆不认识的人拿走了你的红包……
　　这两天的微信可是火了，然后人家还憋着劲儿地在除夕放大招。想必支付宝也坐不住了，虽然已经明确表示春晚当天会发出史上最大的现金红包，但估计这时候支付宝也在想着怎么能把微信打趴下。
　　作为我们这种劳苦大众，就等着看好戏了，打得越激烈，发得红包越多，我们是越开心的。
　　奉劝支付宝一句：你学学人家微信，虽然红包金额小了点，但好歹是现金啊，你弄一堆优惠券算怎么回事……
　　最后，奉上彩蛋一枚：
（作者：王卉竹责任编辑：王卉竹）
IT新闻微信公众平台
第一时间获取新鲜资讯
使用手机扫描左方二维码
您可能想看的内容
看过本文的人还看过
大家都在看
* 网友发言均非本站立场，本站不在评论栏推荐任何网店、经销商，谨防上当受骗！
天极网官方微信
你身边的科技媒体
最给力的互动都在这里
最近一个火热的大事件莫过于微信零钱提现收费，网络上闹得沸沸扬扬……
IT新闻汇：自3月1日起，个人用户的微信零钱提现功能开始对超额部分收取…
MWC 2016前瞻，有哪些新款旗舰手机可期待呢？三星S7系列还是LG…
2014年LINE从微软手中收购了流媒体音乐服务MixRadio，如今…
三星印度尼西亚官方已经放出了Galaxy S7 Edge的宣传视频,无…
最近一个火热的大事件莫过于微信零钱提现收费，网络上闹得沸沸扬扬……
天极网IT新闻汇：思科公布了2016财年第二季度财报情况，第二财季营收…
天极网IT新闻汇：Samsung Pay也将随着新机Galaxy S7…
天极网IT新闻汇：HTC One M10手机正面清晰照片曝光，并采用三…
天极网IT新闻汇：作为一款平价车，特斯拉Model 3将于3月31日起…
MWC 2016前瞻，有哪些新款旗舰手机可期待呢？三星S7系列还是LG…
天极网IT新闻汇：特斯拉将售后保养服务价格上调200美元，并禁止随车转…
技术的发展是永不停歇的，随着2016年的到来，消费性技术又将朝着什么方…
天极网IT新闻汇：外媒报道称苹果将为iPhone 7引入 Lightn…
IT新闻汇：自3月1日起，个人用户的微信零钱提现功能开始对超额部分收取…
每日IT极热支付宝咻一咻怎么玩？春晚咻红包攻略 - 科学知识,科技知识 - 科技讯-中国第一科技门户，报道最新科技新闻
> 支付宝咻一咻怎么玩？春晚咻红包攻略
支付宝咻一咻怎么玩？春晚咻红包攻略
　　【讯】1月29日消息，成为今年春节抢红包的主要阵地，而支付宝也特此为用户增加了一项新功能&&咻一咻，那么，支付宝咻一咻怎么玩?想必很多人都在寻找这个问题的答案，那么今天我们就来一起看看这个神秘的咻一咻。
　　首先，打开支付宝，在首页右上角的位置上，与扫一扫、付款、卡券处在同一排，就是咻一咻啦!
　　当前，咻一咻已经进入到春节抢红包活动当中，每天上午10点准时发送海量红包让用户们high翻天。今天中午有1000万超市红包，而1月30日上午10点将会有600万超市红包。随后，每天将有不同种类的红包供大家一起来抢。