真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Android中如何實現(xiàn)抖音加載框之兩顆小球轉(zhuǎn)動效果-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)Android中如何實現(xiàn)抖音加載框之兩顆小球轉(zhuǎn)動效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、昌江網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為昌江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

安卓版抖音v2.5加載框：

效果圖如下所示：

Android中如何實現(xiàn)抖音加載框之兩顆小球轉(zhuǎn)動效果

本控件效果圖：

Android中如何實現(xiàn)抖音加載框之兩顆小球轉(zhuǎn)動效果

使用方法

源碼地址：Android仿抖音加載框之兩顆小球轉(zhuǎn)動控件

1、xml引用：

 

2、java使用：

 @BindView(R.id.dy1)
 DYLoadingView dy1;
 @OnClick(R.id.b1)
 void start() {
 dy1.setXXXXX; //設(shè)置屬性(可選）
 dy1.start(); //開始動畫
 }
 @OnClick(R.id.b2)
 void stop() {
 dy1.stop(); //停止動畫
 }

就醬。

可用屬性

名稱對應(yīng)xml屬性對應(yīng)java方法默認(rèn)值
球1半徑radius1setRadius()6dp
球2半徑radius2setRadius()6dp
兩球間隔gapsetRadius()0.8dp
球1顏色color1setColors()0XFFFF4040
球2顏色color2setColors()0XFF00EEEE
疊加色mixColorsetColors()0XFF000000
從右往左移動時小球大縮放倍數(shù)rtlScalesetScales()0.7f
從左往右移動時小球大縮放倍數(shù)ltrScalesetScales()1.3f
一次移動動畫時長durationsetDuration()350ms
一次移動動畫后停頓時長pauseDurationsetDuration()80ms
動畫進度在[0,scaleStartFraction]期間，小球大小逐漸縮放scaleStartFractionsetStartEndFraction()0.2f
動畫進度在[scaleEndFraction,1]期間，小球大小逐漸恢復(fù)scaleEndFractionsetStartEndFraction()0.8f

(rtl = right to left, ltr = left to right)

部分屬性說明：

?color格式為32位ARGB
?scaleStartFraction范圍[0,0.5]；scaleEndFraction范圍[0.5,1]
?假設(shè)ltrScale = 1.3，scaleStartFraction = 0.2，scaleEndFraction = 0.8；那么實際效果就是一顆小球從左邊開始向右移動

期間，進度在0%~20%時半徑逐漸從1倍放大到1.3倍，在20%~80%期間大小保持1.3倍，在80%~100%時半徑逐漸從1.3倍恢復(fù)至1倍

實現(xiàn)思路

要讓小球動，當(dāng)然要有一個動畫，通過動畫來獲得一個進度百分比fraction，然后小球在動畫過程中的坐標(biāo)、大小就可以通過這個值來計算：

 private void initAnim() {
 fraction = 0.0f;
 stop();
 anim = ValueAnimator.ofFloat(0.0f, 1.0f);
 anim.setDuration(duration);
 if (pauseDuration > 0) {
  anim.setStartDelay(pauseDuration);
  anim.setInterpolator(new AccelerateDecelerateInterpolator());
 } else {
  anim.setRepeatCount(ValueAnimator.INFINITE);
  anim.setRepeatMode(ValueAnimator.RESTART);
  anim.setInterpolator(new LinearInterpolator());
 }
 anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  fraction = animation.getAnimatedFraction();
  invalidate();
  }
 });
 anim.addListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationStart(Animator animation) {
  isLtr = !isLtr;
  }
  @Override
  public void onAnimationRepeat(Animator animation) {
  isLtr = !isLtr;
  }
  @Override
  public void onAnimationCancel(Animator animation) {
  isAnimCanceled = true;
  }
  @Override
  public void onAnimationEnd(Animator animation) {
  if (!isAnimCanceled) {
   anim.start();
  }
  }
 });
 }

代碼中看到，如果小球一次移動后不需要停頓（pauseDuration = 0），那么直接通過anim.setRepeatCount(ValueAnimator.INFINITE)讓動畫無限循環(huán)，否則的話就要通過anim.setStartDelay(pauseDuration)來設(shè)置停頓時間，然后在監(jiān)聽的onAnimationEnd里重啟動畫，以此實現(xiàn)每一次移動后小球能停頓一定時間。在onAnimationUpdate里，我們記錄了當(dāng)前動畫百分比fraction，然后通過invalidate()重繪，在之后的onDraw里將通過該值畫出小球。另外，每次動畫開始時（或是重復(fù)時），會將isLtr取反，這個標(biāo)志位的作用是標(biāo)明當(dāng)前哪顆球在【從左往右】移動，因為兩顆球的顏色、初始半徑是不一樣的嘛，onDraw里畫小球時是需要這個標(biāo)志位協(xié)助的。

有了動畫進度fraction和標(biāo)志位isLtr后，就可以在onDraw里畫出小球了。

**首先要計算小球當(dāng)前的坐標(biāo)**。y坐標(biāo)永遠(yuǎn)是固定的，不談，x坐標(biāo)隨著`fraction`的變化而變化。兩顆球之間最遠(yuǎn)距離為球1半徑+球2半徑+兩球間隔，即`distance = gap + radius1 + radius2;`，這個值就是兩顆球的移動范圍，由此可計算出，當(dāng)前【從左往右】移動的小球的x坐標(biāo)和當(dāng)前【從右往左】移動的小球x坐標(biāo)分別為:

float ltrX = getMeasuredWidth() / 2.0f - distance / 2.0f;
ltrX = ltrX + (distance * fraction);
float rtlX = getMeasuredWidth() / 2.0f + distance / 2.0f;
rtlX = rtlX - (distance * fraction);

**接下來要計算小球當(dāng)前的大小**。小球的大小也是隨著動畫進度變化的，上面已經(jīng)說明了`scaleStartFraction`和`scaleEndFraction`屬性的含義。 以當(dāng)前小球【從左往右】移動為例，當(dāng)動畫進度為0時，小球大小為初始1倍大?。划?dāng)動畫進度到scaleStartFraction時，小球大小將縮放到`ltrScale`倍，當(dāng)動畫進度為[scaleStartFraction,scaleEndFraction]范圍時，小球大小保持`ltrScale`倍，當(dāng)動畫進度到[scaleEndFraction,1]范圍時，小球則從`ltrScale`倍逐漸恢復(fù)至1倍。 為了便于計算，首先將`[0,scaleStartFraction]`轉(zhuǎn)換為`[0,1.0]`的真實百分比，根據(jù)`y = kx + b`（就這么個入門公式。。我都要在紙上算一遍T-T）,可以得出：`float scaleFraction = 1.0f / scaleStartFraction * fraction; `,有了這個真實百分比，那么該區(qū)間里小球當(dāng)前半徑就好計算了：

ltrBallRadius = ltrInitRadius * (1 + (ltrScale - 1) * scaleFraction);
rtlBallRadius = rtlInitRadius * (1 + (rtlScale - 1) * scaleFraction);

應(yīng)該好懂的吧。另外[scaleEndFraction,1]區(qū)間里小球當(dāng)前半徑計算思路是一樣的，不談。

最后就是要畫出小球。這里主要是如何畫出實現(xiàn)兩球疊加的部分的顏色。

 思路1：通過xfermode方式實現(xiàn)：

Android中如何實現(xiàn)抖音加載框之兩顆小球轉(zhuǎn)動效果

從上圖可以看出用Darken、Lighten、Screen模式可以做到讓疊加處上色，但是顏色不能自定義。

 思路2：通過path的OP操作實現(xiàn)（API19)：

Android中如何實現(xiàn)抖音加載框之兩顆小球轉(zhuǎn)動效果

（圖片摘自http://www.gcssloop.com/customview/Path_Over）

 因此，可以先構(gòu)造兩個小球的Path，然后再將這兩個Path進行INTERSECT操作，即可獲得疊加處的Path，這樣就可以做到自定義疊加處的顏色了。

onDraw完整代碼：

@Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 float centerY = getMeasuredHeight() / 2.0f;
 float ltrInitRadius, rtlInitRadius;
 Paint ltrPaint, rtlPaint;
 //確定當(dāng)前【從左往右】移動的是哪顆小球
 if (isLtr) {
  ltrInitRadius = radius1;
  rtlInitRadius = radius2;
  ltrPaint = paint1;
  rtlPaint = paint2;
 } else {
  ltrInitRadius = radius2;
  rtlInitRadius = radius1;
  ltrPaint = paint2;
  rtlPaint = paint1;
 }
 float ltrX = getMeasuredWidth() / 2.0f - distance / 2.0f;
 ltrX = ltrX + (distance * fraction);//當(dāng)前從左往右的球的X坐標(biāo)
 float rtlX = getMeasuredWidth() / 2.0f + distance / 2.0f;
 rtlX = rtlX - (distance * fraction);//當(dāng)前從右往左的球的X坐標(biāo)
 //計算小球移動過程中的大小變化
 float ltrBallRadius, rtlBallRadius;
 if (fraction <= scaleStartFraction) { //動畫進度[0,scaleStartFraction]時，球大小由1倍逐漸縮放至ltrScale/rtlScale倍
  float scaleFraction = 1.0f / scaleStartFraction * fraction; //百分比轉(zhuǎn)換 [0,scaleStartFraction]] -> [0,1]
  ltrBallRadius = ltrInitRadius * (1 + (ltrScale - 1) * scaleFraction);
  rtlBallRadius = rtlInitRadius * (1 + (rtlScale - 1) * scaleFraction);
 } else if (fraction >= scaleEndFraction) { //動畫進度[scaleEndFraction,1]，球大小由ltrScale/rtlScale倍逐漸恢復(fù)至1倍
  float scaleFraction = (fraction - 1) / (scaleEndFraction - 1); //百分比轉(zhuǎn)換，[scaleEndFraction,1] -> [1,0]
  ltrBallRadius = ltrInitRadius * (1 + (ltrScale - 1) * scaleFraction);
  rtlBallRadius = rtlInitRadius * (1 + (rtlScale - 1) * scaleFraction);
 } else { //動畫進度[scaleStartFraction,scaleEndFraction]，球保持縮放后的大小
  ltrBallRadius = ltrInitRadius * ltrScale;
  rtlBallRadius = rtlInitRadius * rtlScale;
 }
 ltrPath.reset();
 ltrPath.addCircle(ltrX, centerY, ltrBallRadius, Path.Direction.CW);
 rtlPath.reset();
 rtlPath.addCircle(rtlX, centerY, rtlBallRadius, Path.Direction.CW);
 mixPath.op(ltrPath, rtlPath, Path.Op.INTERSECT);
 canvas.drawPath(ltrPath, ltrPaint);
 canvas.drawPath(rtlPath, rtlPaint);
 canvas.drawPath(mixPath, mixPaint);
 }

關(guān)于“Android中如何實現(xiàn)抖音加載框之兩顆小球轉(zhuǎn)動效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。


網(wǎng)站欄目：Android中如何實現(xiàn)抖音加載框之兩顆小球轉(zhuǎn)動效果-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/cccigd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部