Android波紋擴(kuò)散效果之仿支付寶咻一咻功能實(shí)現(xiàn)波紋擴(kuò)散特效
更新時(shí)間：2016年02月23日 15:38:56 作者：劉某人程序員
這篇文章主要介紹了Android波紋擴(kuò)散效果之仿支付寶咻一咻功能實(shí)現(xiàn)波紋擴(kuò)散特效的相關(guān)資料,需要的朋友可以參考下
今年春節(jié)晚會(huì)沒看盡興，被支付寶集福給添了一段插曲，朋友們都在那數(shù)定時(shí)間段不停的咻一咻，哇，我咻到一個(gè)敬業(yè)福，不可能的，哈哈。那么咻一咻功能基于程序代碼是怎么實(shí)現(xiàn)的呢？下面腳本之家小編給大家分享本教程幫助大家學(xué)習(xí)Android波紋擴(kuò)散效果之仿支付寶咻一咻功能實(shí)現(xiàn)波紋擴(kuò)散特效，具體內(nèi)容如下所示：
先來看看這個(gè)效果
這是我的在Only上添加的效果，說實(shí)話，Only現(xiàn)在都還只是半成品，臺(tái)面都上不了，怪自己技術(shù)不行，也太懶了
PS：這個(gè)view也是我模仿了人家的效果，參考了人家的思路寫的，不是純手?jǐn)]，罪過罪過，網(wǎng)上應(yīng)該也能找到很多這樣的效果，我只是加入了一些自己的需求在里面
我么新建一個(gè)工程——Whew
RoundImageView
這個(gè)之前講過網(wǎng)上 的粒子，把頭像變成圓形的，這里就不多說了，直接擼代碼吧！
package com.lgl.whew;
/**
* 圓形頭像
* Created by LGL on 2016/1/12.
*/
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.NinePatchDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
* 圓形ImageView，可設(shè)置最多兩個(gè)寬度不同且顏色不同的圓形邊框。
*
* 設(shè)置顏色在xml布局文件中由自定義屬性配置參數(shù)指定
*/
public class RoundImageView extends ImageView {
private int mBorderThickness = 0;
private Context mContext;
private int defaultColor = 0xFFFFFFFF;
// 如果只有其中一個(gè)有值，則只畫一個(gè)圓形邊框
private int mBorderOutsideColor = 0;
private int mBorderInsideColor = 0;
// 控件默認(rèn)長(zhǎng)、寬
private int defaultWidth = 0;
private int defaultHeight = 0;
public RoundImageView(Context context) {
super(context);
mContext = context;
}
public RoundImageView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
setCustomAttributes(attrs);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mContext = context;
setCustomAttributes(attrs);
}
private void setCustomAttributes(AttributeSet attrs) {
TypedArray a = mContext.obtainStyledAttributes(attrs,
R.styleable.roundedimageview);
mBorderThickness = a.getDimensionPixelSize(
R.styleable.roundedimageview_border_thickness, 0);
mBorderOutsideColor = a
.getColor(R.styleable.roundedimageview_border_outside_color,
defaultColor);
mBorderInsideColor = a.getColor(
R.styleable.roundedimageview_border_inside_color, defaultColor);
}
@Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
this.measure(0, 0);
if (drawable.getClass() == NinePatchDrawable.class)
return;
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
if (defaultWidth == 0) {
defaultWidth = getWidth();
}
if (defaultHeight == 0) {
defaultHeight = getHeight();
}
int radius = 0;
if (mBorderInsideColor != defaultColor
&& mBorderOutsideColor != defaultColor) {// 定義畫兩個(gè)邊框，分別為外圓邊框和內(nèi)圓邊框
radius = (defaultWidth < defaultHeight ? defaultWidth
: defaultHeight) / 2 - 2 * mBorderThickness;
// 畫內(nèi)圓
drawCircleBorder(canvas, radius + mBorderThickness / 2,
mBorderInsideColor);
// 畫外圓
drawCircleBorder(canvas, radius + mBorderThickness
+ mBorderThickness / 2, mBorderOutsideColor);
} else if (mBorderInsideColor != defaultColor
&& mBorderOutsideColor == defaultColor) {// 定義畫一個(gè)邊框
radius = (defaultWidth < defaultHeight ? defaultWidth
: defaultHeight) / 2 - mBorderThickness;
drawCircleBorder(canvas, radius + mBorderThickness / 2,
mBorderInsideColor);
} else if (mBorderInsideColor == defaultColor
&& mBorderOutsideColor != defaultColor) {// 定義畫一個(gè)邊框
radius = (defaultWidth < defaultHeight ? defaultWidth
: defaultHeight) / 2 - mBorderThickness;
drawCircleBorder(canvas, radius + mBorderThickness / 2,
mBorderOutsideColor);
} else {// 沒有邊框
radius = (defaultWidth < defaultHeight ? defaultWidth
: defaultHeight) / 2;
}
Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);
canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight
/ 2 - radius, null);
}
/**
* 獲取裁剪后的圓形圖片
*/
public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {
Bitmap scaledSrcBmp;
int diameter = radius * 2;
// 為了防止寬高不相等，造成圓形圖片變形，因此截取長(zhǎng)方形中處于中間位置最大的正方形圖片
int bmpWidth = bmp.getWidth();
int bmpHeight = bmp.getHeight();
int squareWidth = 0, squareHeight = 0;
int x = 0, y = 0;
Bitmap squareBitmap;
if (bmpHeight > bmpWidth) {// 高大于寬
squareWidth = squareHeight = bmpWidth;
x = 0;
y = (bmpHeight - bmpWidth) / 2;
// 截取正方形圖片
squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
squareHeight);
} else if (bmpHeight < bmpWidth) {// 寬大于高
squareWidth = squareHeight = bmpHeight;
x = (bmpWidth - bmpHeight) / 2;
y = 0;
squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
squareHeight);
} else {
squareBitmap = bmp;
}
if (squareBitmap.getWidth() != diameter
|| squareBitmap.getHeight() != diameter) {
scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,
diameter, true);
} else {
scaledSrcBmp = squareBitmap;
}
Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),
scaledSrcBmp.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
Paint paint = new Paint();
Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),
scaledSrcBmp.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawCircle(scaledSrcBmp.getWidth() / 2,
scaledSrcBmp.getHeight() / 2,
scaledSrcBmp.getWidth() / 2,
paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);
bmp = null;
squareBitmap = null;
scaledSrcBmp = null;
return output;
}
/**
* 邊緣畫圓
*/
private void drawCircleBorder(Canvas canvas, int radius, int color) {
Paint paint = new Paint();
/* 去鋸齒 */
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
paint.setColor(color);
/* 設(shè)置paint的 style 為STROKE：空心 */
paint.setStyle(Paint.Style.STROKE);
/* 設(shè)置paint的外框?qū)挾?*/
paint.setStrokeWidth(mBorderThickness);
canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);
}
}
這里值得注意的是，要使用這個(gè)必須自定義一些屬性，我們?cè)趘alues下新建一個(gè)attr.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="roundedimageview"> <attr name="border_thickness" format="dimension" /> <attr name="border_inside_color" format="color" /> <attr name="border_outside_color" format="color"></attr> </declare-styleable> </resources>
然后在xml文件中引入命名空間
xmlns:imagecontrol=http://schemas.android.com/apk/res-auto
我們直接看layout_mian.xml吧
layout_mian.xml
就一些布局咯
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:imagecontrol="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <com.lgl.whew.WhewView android:id="@+id/wv" android:layout_width="match_parent" android:layout_height="match_parent" /> <com.lgl.whew.RoundImageView android:id="@+id/my_photo" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" android:src="@drawable/myphoto" imagecontrol:border_inside_color="#bc0978" imagecontrol:border_outside_color="#ba3456" imagecontrol:border_thickness="1dp" /> </RelativeLayout> </LinearLayout>
這樣你就可以使用圓形圖片了，我們接下來看波紋的繪制
WhewView
package com.lgl.whew;
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
/**
* 模仿咻一咻
*
* @author LGL
*
*/
public class WhewView extends View {
private Paint paint;
private int maxWidth = 255;
// 是否運(yùn)行
private boolean isStarting = false;
private List<String> alphaList = new ArrayList<String>();
private List<String> startWidthList = new ArrayList<String>();
public WhewView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
init();
}
public WhewView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
init();
}
public WhewView(Context context) {
super(context);
// TODO Auto-generated constructor stub
init();
}
private void init() {
paint = new Paint();
// 設(shè)置博文的顏色
paint.setColor(0x0059ccf5);
alphaList.add("255");// 圓心的不透明度
startWidthList.add("0");
}
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
setBackgroundColor(Color.TRANSPARENT);// 顏色：完全透明
// 依次繪制 同心圓
for (int i = 0; i < alphaList.size(); i++) {
int alpha = Integer.parseInt(alphaList.get(i));
// 圓半徑
int startWidth = Integer.parseInt(startWidthList.get(i));
paint.setAlpha(alpha);
// 這個(gè)半徑?jīng)Q定你想要多大的擴(kuò)散面積
canvas.drawCircle(getWidth() / 2, getHeight() / 2, startWidth + 50,
paint);
// 同心圓擴(kuò)散
if (isStarting && alpha > 0 && startWidth < maxWidth) {
alphaList.set(i, (alpha - 1) + "");
startWidthList.set(i, (startWidth + 1) + "");
}
}
if (isStarting
&& Integer
.parseInt(startWidthList.get(startWidthList.size() - 1)) == maxWidth / 5) {
alphaList.add("255");
startWidthList.add("0");
}
// 同心圓數(shù)量達(dá)到10個(gè)，刪除最外層圓
if (isStarting && startWidthList.size() == 10) {
startWidthList.remove(0);
alphaList.remove(0);
}
// 刷新界面
invalidate();
}
// 執(zhí)行動(dòng)畫
public void start() {
isStarting = true;
}
// 停止動(dòng)畫
public void stop() {
isStarting = false;
}
// 判斷是都在不在執(zhí)行
public boolean isStarting() {
return isStarting;
}
}
這里我們看到，對(duì)外有幾個(gè)方法，一個(gè)開始動(dòng)畫，一個(gè)停止動(dòng)畫，一個(gè)檢測(cè)是否正在運(yùn)行
MainActivity
這里就是我們的需求了，我反編譯了一下支付寶的APK，并沒有找到他的咻一咻的音效，就在他的raw目錄下隨便找了一個(gè)，我們現(xiàn)在是需要這樣一個(gè)需求
點(diǎn)擊圖片執(zhí)行動(dòng)畫，并且每隔五分鐘響一次
再次點(diǎn)擊圖片，停止動(dòng)畫，停止音效
我們先新建一個(gè)raw文件夾把音效拷貝進(jìn)去吧
package com.lgl.whew;
import android.app.Activity;
import android.media.AudioManager;
import android.media.SoundPool;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.View.OnClickListener;
public class MainActivity extends Activity {
private WhewView wv;
private RoundImageView my_photo;
private static final int Nou = 1;
// 聲明一個(gè)SoundPool
private SoundPool sp;
// 定義一個(gè)整型用load（）；來設(shè)置suondIDf
private int music;
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
if (msg.what == Nou) {
// 每隔10s響一次
handler.sendEmptyMessageDelayed(Nou, 5000);
sp.play(music, 1, 1, 0, 0, 1);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
// 第一個(gè)參數(shù)為同時(shí)播放數(shù)據(jù)流的最大個(gè)數(shù)，第二數(shù)據(jù)流類型，第三為聲音質(zhì)量
sp = new SoundPool(10, AudioManager.STREAM_SYSTEM, 5);
// 把你的聲音素材放到res/raw里，第2個(gè)參數(shù)即為資源文件，第3個(gè)為音樂的優(yōu)先級(jí)
music = sp.load(this, R.raw.hongbao_gq, 1);
wv = (WhewView) findViewById(R.id.wv);
my_photo = (RoundImageView) findViewById(R.id.my_photo);
my_photo.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(wv.isStarting()){
//如果動(dòng)畫正在運(yùn)行就停止，否則就繼續(xù)執(zhí)行
wv.stop();
//結(jié)束進(jìn)程
handler.removeMessages(Nou);
}else{
// 執(zhí)行動(dòng)畫
wv.start();
handler.sendEmptyMessage(Nou);
}
}
});
}
}
相信這里的邏輯不是很難吧，對(duì)了，我們?cè)诮Y(jié)束activity的時(shí)候也是要銷毀這個(gè)進(jìn)程的，不然…你懂的
@Override
protected void onDestroy() {
// TODO Auto-generated method stub
super.onDestroy();
handler.removeMessages(Nou);
}
我們運(yùn)行一下，想聽效果的可以下載Demo運(yùn)行一下，我們這里做一個(gè)簡(jiǎn)單的演示
您可能感興趣的文章:
- Android 實(shí)現(xiàn)圓圈擴(kuò)散水波動(dòng)畫效果兩種方法
- Android實(shí)現(xiàn)水波紋擴(kuò)散效果的實(shí)例代碼
- Android自定義View控件實(shí)現(xiàn)多種水波紋漣漪擴(kuò)散效果
- Android實(shí)現(xiàn)點(diǎn)擊Button產(chǎn)生水波紋效果
- Android特效之水波紋的實(shí)現(xiàn)
- Android項(xiàng)目實(shí)戰(zhàn)手把手教你畫圓形水波紋loadingview
- Android仿水波紋流量球進(jìn)度條控制器
- Android實(shí)現(xiàn)水波紋效果
- Android自定義View 實(shí)現(xiàn)水波紋動(dòng)畫引導(dǎo)效果
- Android自定義view實(shí)現(xiàn)圓的擴(kuò)散效果
相關(guān)文章
Android 夜間模式的實(shí)現(xiàn)代碼示例
本篇文章主要介紹了Android 夜間模式的實(shí)現(xiàn)代碼示例，實(shí)現(xiàn)能夠根據(jù)不同的設(shè)定，呈現(xiàn)不同風(fēng)格的界面給用戶，有興趣的可以了解一下。2017-03-03
這篇文章我們將利用Android封裝一個(gè)可以自定義配置前景色和背景色的Loading組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-08-08
本篇文章主要介紹了Android中PopupMenu組件的使用實(shí)例，詳細(xì)的介紹了PopupMenu組件的使用，具體一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
Android使用注解進(jìn)行代碼檢查的實(shí)現(xiàn)方法
這篇文章主要介紹了Android如何使用注解進(jìn)行代碼檢查,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
大家好，本篇文章主要講的是Android顯示富文本+夜間深色模式，感興趣的同學(xué)趕快來看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽2022-01-01
android開發(fā)教程之清除android數(shù)據(jù)緩存示例(清除本地?cái)?shù)據(jù)緩存)
android清除本地?cái)?shù)據(jù)緩存示例,主要功能清除內(nèi)/外緩存，清除數(shù)據(jù)庫(kù)，清除sharedPreference，清除files和清除自定義目錄,需要的朋友可以參考下2014-02-02
Android 7.0調(diào)用相機(jī)崩潰詳解及解決辦法
這篇文章主要介紹了 Android 7.0調(diào)用相機(jī)崩潰詳解及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-12-12
Android自定義view之太極圖的實(shí)現(xiàn)教程
這篇文章主要給大家介紹了關(guān)于Android自定義view之太極圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Android編程實(shí)現(xiàn)自定義title功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)自定義title功能,結(jié)合具體實(shí)例形式分析了Android自定義title的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
Android編程實(shí)現(xiàn)擦除Bitmap中某一塊的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)擦除Bitmap中某一塊的方法,涉及Android操作Bitmap顏色像素值調(diào)整的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11