支付寶咻一咻怎么用 Android幫你實現(xiàn)咻一咻
更新時間：2016年02月12日 18:55:16 作者：Git_Android
Android幫你實現(xiàn)咻一咻，這篇文章主要為大家介紹了支付寶咻一咻的幾種思路，感興趣的朋友可以參考一下
對于之前最火的無外乎集五福了，而五福除了加十個好友獲得外，最直接的途徑就是支付寶的咻一咻了。那么咻一咻具體有哪些實現(xiàn)方式呢？下面我們將一一介紹這幾種思路的實現(xiàn)過程。
1.自定義View實現(xiàn)咻一咻
那么這種實現(xiàn)方法需要掌握Canvas以及Paint幾乎所有的方法。其對程序員的專業(yè)知識要求極高。
用該種方式實現(xiàn)的優(yōu)點有：
- ㈠這種是最復雜的實現(xiàn)方法，但其兼容性最高，其支持android的所有設備。
- ㈡其對內(nèi)存要求不大，幾乎不占用任何內(nèi)存。
下面我們來看看是怎樣實現(xiàn)其效果的：
public class XiuYiXiuView extends View {
/***
* 中心圖片畫筆
*/
private Paint paint;
/***
* 水波圓圈畫筆
*/
private Paint circlePaint;
/***
* 用bitmap創(chuàng)建畫布
*/
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()
};
//范圍，這里可以微調(diào)，實現(xiàn)你想要的漸變
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); //發(fā)送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);
//判斷是否按下圖片，并且外圈執(zhí)行完成沒有。
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{
//不是則按正常的環(huán)形渲染來
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);
}
}
//如果沒有點擊圖片發(fā)射出去的圓圈，那么就恢復默認縮放。
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;
}
//獲取循環(huán)縮放半徑
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;
}
}
你可以修改如下兩個地方，會產(chǎn)生視覺上真真的波紋效果：
①支付寶的背景圖片是淡紅色，襯托了紅色的波紋。當然了你也可以將畫布設置為透明淡紅色。
②其為填充圓圈渲染，不是我的邊框渲染效果，你可以將circlePaint.setStyle(Paint.Style.STROKE);換成Paint.Style.FILL.然后，微調(diào)shader的mPositions實現(xiàn)環(huán)形填充漸變。你也許會覺得，你看支付寶咻一咻圓圈彈開的時候內(nèi)圈有波紋也像外彈開，其實那就是環(huán)形漸變，當你圓圈變大后，其漸變的范圍也就變大了，自然你看到有顏色周圍擴散的跡象。
2.屬性動畫實現(xiàn)咻一咻
其要掌握的只是基本只需要屬性動畫，在加一點線程方面有關(guān)的知識而已。
下面我們看看其實現(xiàn)步驟：
㈠自定義View實現(xiàn)一個圓即可,代碼如下：
public class LYJCircleView extends View {
private Bitmap bitmap;
private Paint paint;
private Canvas canvas;
private int screenWidth;
private int screenHeight;
private boolean isSpreadFlag=false;//標記是否發(fā)射完成
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);
}
}
代碼與上面差不多，就不注釋了。
㈡實現(xiàn)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);//發(fā)射圓圈，即將循環(huán)動畫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);//動畫執(zhí)行完成，標記一下
}
@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); //發(fā)送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);
//獲取狀態(tài)欄高度
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();//循環(huán)執(zhí)行動畫
}
@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>
當然上面兩個實現(xiàn)方法，我都只設置圓邊框，沒有填充，你可以設置為填充后，在微調(diào)漸變值。
其屬性動畫文件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>
以上就是本文的詳細內(nèi)容，希望對大家的學習有所幫助。
相關(guān)文章
大部分的 Android 開發(fā)者使用的主要語言都是 Kotlin / Java,他們的崩潰棧信息非常清晰,也非常好定位到問題,本文小編給大家介紹了Android如何解讀Native崩潰棧信息,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了Android采用雙緩沖技術(shù)實現(xiàn)畫板的相關(guān)資料，思路清晰，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
Flutter 快速實現(xiàn)聊天會話列表效果示例詳解
這篇文章主要為大家介紹了Flutter 快速實現(xiàn)聊天會話列表效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了Android自定義View仿IOS圓盤時間選擇器,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了Android自定義轉(zhuǎn)盤菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了Android實現(xiàn)從相冊截圖的功能，簡單介紹了Android實現(xiàn)從相冊截圖功能的步驟，供大家參考，感興趣的小伙伴們可以參考一下2016-01-01
Android實現(xiàn)Activity界面切換添加動畫特效的方法
這篇文章主要介紹了Android實現(xiàn)Activity界面切換添加動畫特效的方法,非常實用的技巧,需要的朋友可以參考下2014-08-08
Android開發(fā)之a(chǎn)ndroid_gps定位服務簡單實現(xiàn)
這篇文章主要介紹了Android開發(fā)之a(chǎn)ndroid_gps定位服務簡單實現(xiàn) ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
Android viewpager中動態(tài)添加view并實現(xiàn)偽無限循環(huán)的方法
這篇文章主要介紹了Android viewpager中動態(tài)添加view并實現(xiàn)偽無限循環(huán)的方法,涉及Android使用viewpager動態(tài)加載view及view無限循環(huán)顯示的相關(guān)技巧,需要的朋友可以參考下2016-01-01
EditText限制輸入數(shù)字,精確到小數(shù)點后1位的設置方法
下面小編就為大家?guī)硪黄狤ditText限制輸入數(shù)字,精確到小數(shù)點后1位的設置方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04