Android如何實(shí)現(xiàn)仿直播特效點(diǎn)贊飄心效果

小編這次要給大家分享的是Android如何實(shí)現(xiàn)仿直播特效點(diǎn)贊飄心效果,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)公司主營金林網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,App定制開發(fā),金林h5重慶小程序開發(fā)搭建,金林網(wǎng)站營銷推廣歡迎金林等地區(qū)企業(yè)咨詢

一、概述

老規(guī)矩先上圖

Android如何實(shí)現(xiàn)仿直播特效點(diǎn)贊飄心效果

好了,基本就是這個樣子,錄完的視頻用格式工廠轉(zhuǎn)換完就這個樣子了,將就看吧

二、定義我們自己的Layout

/** 
 * @author 劉洋巴金 
 * @date 2017-4-27 
 * 
 * 定義我們自己的布局 
 * */ 
public class LoveLayout extends RelativeLayout{ 
 
 private Context context; 
 private LayoutParams params; 
 private Drawable[] icons = new Drawable[4]; 
 private Interpolator[] interpolators = new Interpolator[4]; 
 private int mWidth; 
 private int mHeight; 
 
 public LoveLayout(Context context, AttributeSet attrs) { 
 super(context, attrs); 
  
 this.context = context; 
 initView(); 
 } 
 
 private void initView() { 
  
 // 圖片資源 
 icons[0] = getResources().getDrawable(R.drawable.green); 
 icons[1] = getResources().getDrawable(R.drawable.purple); 
 icons[2] = getResources().getDrawable(R.drawable.red); 
 icons[3] = getResources().getDrawable(R.drawable.yellow); 
  
 // 插值器 
 interpolators[0] = new AccelerateDecelerateInterpolator(); // 在動畫開始與結(jié)束的地方速率改變比較慢,在中間的時候加速 
 interpolators[1] = new AccelerateInterpolator(); // 在動畫開始的地方速率改變比較慢,然后開始加速 
 interpolators[2] = new DecelerateInterpolator(); // 在動畫開始的地方快然后慢 
 interpolators[3] = new LinearInterpolator(); // 以常量速率改變 
  
 int width = icons[0].getIntrinsicWidth(); 
 int height = icons[0].getIntrinsicWidth(); 
 params = new LayoutParams(width, height); 
 params.addRule(CENTER_HORIZONTAL, TRUE); 
 params.addRule(ALIGN_PARENT_BOTTOM, TRUE); 
 } 

基本就是做了初始化,聲明了4個drawable,也就是4個顏色的心,4個插值器,用于控制動畫速率的改變,設(shè)置初始位置為屏幕的下邊中點(diǎn)處。

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
 // TODO Auto-generated method stub 
 super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 mWidth = getMeasuredWidth(); 
 mHeight = getMeasuredHeight(); 
} 
 
public void addLoveView() { 
 // TODO Auto-generated method stub 
 final ImageView iv = new ImageView(context); 
 iv.setLayoutParams(params); 
 iv.setImageDrawable(icons[new Random().nextInt(4)]); 
 addView(iv); 
  
 // 開啟動畫,并且用完銷毀 
 AnimatorSet set = getAnimatorSet(iv); 
 set.start(); 
 set.addListener(new AnimatorListenerAdapter() { 
 @Override 
 public void onAnimationEnd(Animator animation) { 
  // TODO Auto-generated method stub 
  super.onAnimationEnd(animation); 
  removeView(iv); 
 } 
 }); 
} 

用于添加心型效果。動畫結(jié)束后,再移除

/** 
 * 獲取動畫集合 
 * @param iv 
 * */ 
private AnimatorSet getAnimatorSet(ImageView iv) { 
  
 // 1.alpha動畫 
 ObjectAnimator alpha = ObjectAnimator.ofFloat(iv, "alpha", 0.3f, 1f); 
  
 // 2.縮放動畫 
 ObjectAnimator scaleX = ObjectAnimator.ofFloat(iv, "scaleX", 0.2f, 1f); 
 ObjectAnimator scaleY = ObjectAnimator.ofFloat(iv, "scaleY", 0.2f, 1f); 
  
 // 動畫集合 
 AnimatorSet set = new AnimatorSet(); 
 set.playTogether(alpha, scaleX, scaleY); 
 set.setDuration(500); 
  
 // 貝塞爾曲線動畫 
 ValueAnimator bzier = getBzierAnimator(iv); 
  
 AnimatorSet set2 = new AnimatorSet(); 
 set2.playSequentially(set, bzier); 
 set2.setTarget(iv); 
 return set2; 
} 

playTogether:幾個動畫同時執(zhí)行
ObjectAnimator為屬性動畫,不熟悉可以百度了解下

然后是設(shè)置貝塞爾曲線動畫

playSequentially:動畫依次執(zhí)行

/** 
 * 貝塞爾動畫 
 * */ 
private ValueAnimator getBzierAnimator(final ImageView iv) { 
 // TODO Auto-generated method stub 
 PointF[] PointFs = getPointFs(iv); // 4個點(diǎn)的坐標(biāo) 
 BasEvaluator evaluator = new BasEvaluator(PointFs[1], PointFs[2]); 
 ValueAnimator valueAnim = ValueAnimator.ofObject(evaluator, PointFs[0], PointFs[3]); 
 valueAnim.addUpdateListener(new AnimatorUpdateListener() { 
  
 @Override 
 public void onAnimationUpdate(ValueAnimator animation) { 
  // TODO Auto-generated method stub 
  PointF p = (PointF) animation.getAnimatedValue(); 
  iv.setX(p.x); 
  iv.setY(p.y); 
  iv.setAlpha(1- animation.getAnimatedFraction()); // 透明度 
 } 
 }); 
 valueAnim.setTarget(iv); 
 valueAnim.setDuration(3000); 
 valueAnim.setInterpolator(interpolators[new Random().nextInt(4)]); 
 return valueAnim; 
} 
 
private PointF[] getPointFs(ImageView iv) { 
 // TODO Auto-generated method stub 
 PointF[] PointFs = new PointF[4]; 
 PointFs[0] = new PointF(); // p0 
 PointFs[0].x = (mWidth- params.width)/ 2; 
 PointFs[0].y = mHeight - params.height; 
 
 PointFs[1] = new PointF(); // p1 
 PointFs[1].x = new Random().nextInt(mWidth); 
 PointFs[1].y = new Random().nextInt(mHeight /2) + mHeight / 2 + params.height; 
 
 PointFs[2] = new PointF(); // p2 
 PointFs[2].x = new Random().nextInt(mWidth); 
 PointFs[2].y = new Random().nextInt(mHeight /2); 
  
 PointFs[3] = new PointF(); // p3 
 PointFs[3].x = new Random().nextInt(mWidth); 
 PointFs[3].y = 0; 
 return PointFs; 
} 

先獲得4個點(diǎn)的坐標(biāo)

Android如何實(shí)現(xiàn)仿直播特效點(diǎn)贊飄心效果

p0坐標(biāo):x坐標(biāo)((布局的寬-心形圖片寬)除以2),y坐標(biāo)(布局的高 -心形圖片高),這樣獲得的是頂部部水平中心點(diǎn)的坐標(biāo)。

p1坐標(biāo):x坐標(biāo)(橫坐標(biāo)中的隨機(jī)位置),y坐標(biāo)(布局一半的高度 加上 0到一半高度范圍內(nèi)的隨機(jī)坐標(biāo)+心形的高度的一半)。這樣取到的橫坐標(biāo)是在布局寬度之內(nèi)的隨機(jī)坐標(biāo),縱坐標(biāo)為整個路徑高度中部以上的隨機(jī)坐標(biāo)。

p2坐標(biāo):與p1類似,橫坐標(biāo)是在布局寬度之內(nèi)的隨機(jī)坐標(biāo),縱坐標(biāo)為整個路徑高度中部以下的隨機(jī)坐標(biāo)。

p3坐標(biāo):控件底部中心點(diǎn)

好了知道4個坐標(biāo)了,那么開始計(jì)算路徑

首先為了計(jì)算貝塞爾曲線,我們先寫一個估值器

/** 
 * @author 劉洋巴金 
 * @date 2017-4-27 
 * 
 * 估值器,計(jì)算路徑 
 * */ 
public class BasEvaluator implements TypeEvaluator<PointF> { 
 
 private PointF p1; 
 private PointF p2; 
 
 public BasEvaluator(PointF p1, PointF p2) { 
 super(); 
 this.p1 = p1; 
 this.p2 = p2; 
 } 
 
 @Override 
 public PointF evaluate(float fraction, PointF p0, PointF p3) { 
 // TODO Auto-generated method stub 
 PointF pointf = new PointF(); 
  
 // 貝塞爾曲線公式 p0*(1-t)^3 + 3p1*t*(1-t)^2 + 3p2*t^2*(1-t) + p3^3 
 pointf.x = p0.x * (1-fraction) *(1-fraction ) * (1-fraction) 
   +3*p1.x * fraction *(1-fraction )*(1-fraction ) 
   +3*p2.x *fraction *fraction *(1-fraction ) 
   +p3.x*fraction *fraction *fraction ; 
 pointf.y = p0.y * (1-fraction ) *(1-fraction ) * (1-fraction ) 
  +3*p1.y * fraction *(1-fraction )*(1-fraction ) 
  +3*p2.y *fraction *fraction *(1-fraction ) 
  +p3.y*fraction *fraction *fraction ; 
 return pointf; 
 } 
} 

TypeEvaluator:估值器回調(diào)evaluate方法,用于動態(tài)的改變動畫的屬性值。
evaluate三個參數(shù):

1.fraction,默認(rèn)傳入的就是(currentTime - startTime) / duration,動畫執(zhí)行的時間除以總的時間比值,可以理解為變化率。當(dāng)duration到了的時候,正好,起始點(diǎn)變到終點(diǎn)。

2.起始點(diǎn)

3.終點(diǎn)

根據(jù)三個參數(shù),計(jì)算點(diǎn)的根據(jù)每毫秒的變化率,計(jì)算點(diǎn)的路徑軌跡。

好了貝塞爾曲線動畫就講完了,然后再把動畫綁定到控件上。

最后在MainActivity中根據(jù)點(diǎn)擊事件,進(jìn)行增加心型就好了。

btn_press = (Button)findViewById(R.id.btn_press); 
ll_love = (LoveLayout)findViewById(R.id.ll_love); 
btn_press.setOnClickListener(new OnClickListener() { 
  
 @Override 
 public void onClick(View v) { 
 // TODO Auto-generated method stub 
 ll_love.addLoveView(); 
 } 
}); 

三、Demo

Android實(shí)現(xiàn)點(diǎn)贊飄心效果

看完這篇關(guān)于Android如何實(shí)現(xiàn)仿直播特效點(diǎn)贊飄心效果的文章,如果覺得文章內(nèi)容寫得不錯的話,可以把它分享出去給更多人看到。

當(dāng)前文章:Android如何實(shí)現(xiàn)仿直播特效點(diǎn)贊飄心效果
本文地址:http://www.muchs.cn/article28/ihepjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、小程序開發(fā)、App開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)