自定義view實現(xiàn)阻尼效果的加載動畫

1、自定義view實現(xiàn)阻尼效果的加載動畫需要知識: 1. 二次貝塞爾曲線 2. 動畫知識 3. 基礎(chǔ)自定義view知識先來解釋下什么叫阻尼運動阻尼振動是指，由于振動系統(tǒng)受到摩擦和介質(zhì)阻力或其他能耗而使振幅隨時間逐漸衰減的振動，又稱減幅振動、衰減振動。1 不論是彈簧振子還是單擺由于外界的摩擦和介質(zhì)阻力總是存在，在振動過程中要不斷克服外界阻力做功，消耗能量，振幅就會逐漸減小，經(jīng)過一段時間，振動就會完全停下來。這種振幅隨時間減小的振動稱為阻尼振動因為振幅與振動的能量有關(guān)，阻尼振動也就是能量不斷減少的振動阻尼振動是非簡諧運動阻尼振動系統(tǒng)屬于耗散系統(tǒng)。這里的阻尼是指任何振動系統(tǒng)在振動中，由于外界作用或系統(tǒng)本

2、身固有的原因引起的振動幅度逐漸下降的特性，以及此一特性的量化表征。本例中文字部分凹陷就是這種效果,當(dāng)然這篇文章知識帶你簡單的使用.跳動的水果效果實現(xiàn)剖析:從上面的效果圖中很面就是從頂端向下掉落然后再向上 期間旋轉(zhuǎn)即可. 那么我們首先自定義一個view繼承FrameLayoutpublic class My extends FrameLayout public My(Context context) super(context); public My(Context context, AttributeSet attrs) super(context, attrs); 也許有人會問我看到你效果圖

3、到頂部或者底部就變成向上或者向下了.你三張夠嗎? 答:到頂部或者底部旋轉(zhuǎn)180度即可 我們現(xiàn)在自定義中定義幾個變量 /用于記錄當(dāng)前圖片使用數(shù)組中的哪張 int indexImgFlag = 0; /下沉圖片 前面三個圖片的id int allImgDown = R.mipmap.p2,R.mipmap.p4,R.mipmap.p6,R.mipmap.p8; /動畫效果一次下沉或上彈的時間 animationDuration*2=一次完整動畫時間 int animationDuration = 1000; /彈起來的圖片 ImageView iv; /圖片下沉高度(即從最高點到最低點的距離) i

4、nt downHeight = 2; /掉下去的動畫 private Animation translateDown; /彈起動畫 private Animation translateUp; /旋轉(zhuǎn)動畫 private ObjectAnimator rotation;我們再來看看初始化動畫的方法(此方法使用了遞歸思想,實現(xiàn)無限播放動畫,大家可以看看哪里不理解) /初始化彈跳動畫 public void MyAnmation() /下沉效果動畫 translateDown = new TranslateAnimation( Animation.RELATIVE_TO_SELF,0,Animat

5、ion.RELATIVE_TO_SELF,0, Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,downHeight); translateDown.setDuration(animationDuration); /設(shè)置一個插值器 動畫將會播放越來越快 模擬重力 translateDown.setInterpolator(new AccelerateInterpolator(); /上彈動畫 translateUp = new TranslateAnimation( Animation.RELATIVE_TO_SELF,0,Ani

6、mation.RELATIVE_TO_SELF,0, Animation.RELATIVE_TO_SELF,downHeight,Animation.RELATIVE_TO_SELF,0 ); translateUp.setDuration(animationDuration); /設(shè)置一個插值器 動畫將會播放越來越慢 模擬反重力 translateUp.setInterpolator(new DecelerateInterpolator(); /當(dāng)下沉動畫完成時播放啟動上彈 translateDown.setAnimationListener(new Animation.AnimationL

7、istener() Override public void onAnimationStart(Animation animation) iv.setImageResource(allImgDownindexImgFlag); rotation = ObjectAnimator.ofFloat(iv, "rotation", 180f, 360f); rotation.setDuration(1000); rotation.start(); Override public void onAnimationEnd(Animation animation) iv.startAn

8、imation(translateUp); Override public void onAnimationRepeat(Animation animation) ); /當(dāng)上移動畫完成時 播放下移動畫 translateUp.setAnimationListener(new Animation.AnimationListener() Override public void onAnimationStart(Animation animation) indexImgFlag = 1+indexImgFlag>=allImgDown.length?0:1+indexImgFlag; iv

9、.setImageResource(allImgDownindexImgFlag); rotation = ObjectAnimator.ofFloat(iv, "rotation", 0.0f, 180f); rotation.setDuration(1000); rotation.start(); Override public void onAnimationEnd(Animation animation) /遞歸 iv.startAnimation(translateDown); Override public void onAnimationRepeat(Anim

10、ation animation) );以上代碼知識:插值器:會讓一個動畫在播放時在某一時間段加快動畫或者減慢/設(shè)置一個插值器 動畫將會播放越來越快 模擬重力 1. translateDown.setInterpolator(new AccelerateInterpolator(); 這個插值器 速率表示圖:可以從斜率看到使用此插值器 動畫將越來越快.意義在于模仿下落時重力的影響/設(shè)置一個插值器 動畫將會播放越來越慢 模擬反重力 2. translateUp.setInterpolator(new DecelerateInterpolator(); 速率圖:最后我們初始化下圖片控件到我們的自定義

11、viewprivate void init() /初始化彈跳圖片 控件 iv = new ImageView(getContext(); ViewGroup.LayoutParams params = new ViewGroup.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); iv.setLayoutParams(params); iv.setImageResource(allImgDown0); this.addView(iv); iv.measure(0,0);

12、 iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() Override public void onGlobalLayout() if (!flagMeure) flagMeure =true; /由于畫文字是由基準(zhǔn)線開始 path.moveTo(iv.getX()-textWidth/2+iv.getWidth()/2, textHeight+iv.getHeight()+downHeight*iv.getHeight(); /計算最大彈力 maxEl

13、asticFactor = (float) (textHeight / elastic); /初始化貝塞爾曲線 path.rQuadTo(textWidth / 2, 0, textWidth, 0); /初始化上彈和下沉動畫 MyAnmation(); iv.startAnimation(translateDown); );上面的知識: 1. iv.measure(0,0);主動通知系統(tǒng)去測量此控件 不然iv.getwidth = 0; /下面這個是同理 等iv測量完時回調(diào) 不然iv.getwidth = 0; 2. iv.getViewTreeObserver().addOnGlobalL

14、ayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() 原因:TextView tv = new TextView() 或者 LayoutInflat 填充布局都是 異步所以你在new出來或者填充時直接獲取自然返回0到現(xiàn)在為止你只需要在自定義view 的onSizeChanged回調(diào)方法中調(diào)用init()即可看到動畫的彈動Override protected void onSizeChanged(int w, int h, int oldw, int oldh) super.onSizeChanged(w, h, oldw, ol

15、dh); init(); 此方法會在onmesure方法執(zhí)行完成后回調(diào) 這樣你就可以在此方法獲得自定義view的寬高了效果圖:畫文字成u形首先你得知道如下知識貝塞爾曲線這里我們用到2此貝塞爾曲線 我們看看大概是什么叫2次貝塞爾曲線我們看看 三個點 p0 p1 p2 我們 把p0 稱為 開始點 p1 為控制點 p2 結(jié)束點,那么可以用貝塞爾公式畫出如圖曲線這里寫圖片描述這里大家沒必要深究怎么畫出來. 也不需要你懂 這個要數(shù)學(xué)基礎(chǔ)的那么我們在安卓中怎么畫呢? Path path = new Path();/p0的x y坐標(biāo)path.moveTo(p0.x,y);path.rQuadTo(p1.x,

16、p1.y,p2.x,p2.y);這就是API調(diào)用方法是不是很簡單?那么你又會問那么怎么畫出來呢? 很簡單在 dispatchDraw方法 或者onDraw中 調(diào)用 Override protected void dispatchDraw(Canvas canvas) super.dispatchDraw(canvas); canvas.drawPath(path,paint); 那么你畫出來的效果應(yīng)該和在Ps用鋼筆畫出來的差不多 ps中鋼筆工具就是二次貝塞爾曲線(借用下圖片)如果你的三個點的位置如剛開的圖片 p0 p1 p2 (p1在p0右上方并且 p1在p2左上方)一樣那么在屏幕中的顯示效果

17、如下這里隨擴(kuò)張下dispatchDraw和ondraw的區(qū)別 如果你的自定義view 是繼承view 那么 會先調(diào)用 ondraw->>dispatchDraw 如果你的自定義view 是繼承viewgroup那么會跳過ondraw方法直接調(diào)用dispathchDraw這里特別注意!我們這個案例中繼承的是FrameLayout, 而frameLayout又是繼承自viewgroup所以.那么我們回到主題 如何畫一個U形文字?簡單就是說按照我們畫出來的曲線在上面寫字 如: 文字是”CSDN開源中國” 如何讓這幾個字貼著我們的曲線寫出來? 這里介紹一個API canvas.drawTe

18、xtOnPath()第一個參數(shù):文字 類型為字符串 第二個參數(shù):路徑 也就是我們前面的二次貝塞爾曲線 第三個參數(shù):沿著路徑文字開始的位置 說白了偏移量 第四個參數(shù):貼著路徑的高度的偏移量hOffset: The distance along the path to add to the texts starting position vOffset: The distance above(-) or below(+) the path to position the text/ok我們看看他可以畫出什么樣子的文字這種看大家對貝塞爾曲線的理解,你理解的越深那么你可以畫出的圖像越多,當(dāng)然不一定要用

19、貝塞爾曲線確定貝塞爾曲線的起點我們在回過頭來看看我們的效果圖我們可以看到文字應(yīng)該是在iv(彈跳的圖片中央位置且正好在 iv彈到底部的位置)這里我們先補充知識在考慮計算我們來學(xué)習(xí)一下文字的測量我們來看幅圖我們調(diào)用畫文字的API時 canvas.drawTextOnPath或者canvas.drawText 是從基準(zhǔn)線開始畫的也就是說途中的baseline開始畫. 如: canvas.drawText(“FMY”,0,0,paint); 那么你將看不到文字 只能在屏幕看到文字底部如下圖:另一個同理API drawTextOnPath 也是再看看幾個簡單的API 1 . paint.measureT

20、ext(“FMY”);返回在此畫筆paint下寫FMY文字的寬度 下面的API會把文字的距離左邊left 上邊top 右邊right 底部的bottom的值寫入此矩形 那么 rect.right-rect.left=文字寬度 rect.bottom-rect.top=文字高度 /矩形 Rect rect = new Rect(); /將文字畫入矩形目的是為了測量高度 paint.getTextBounds(printText, 0, printText.length(), rect);那么請看: private void init() /初始化彈跳圖片 控件 iv = new ImageVie

21、w(getContext(); ViewGroup.LayoutParams params = new ViewGroup.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); iv.setLayoutParams(params); iv.setImageResource(allImgDown0); this.addView(iv); /畫筆的初始化 paint = new Paint(); paint.setStrokeWidth(1); paint.setColor(

22、Color.CYAN); paint.setStyle(Paint.Style.FILL); paint.setTextSize(50); paint.setAntiAlias(true); /矩形 Rect rect = new Rect(); /將文字畫入矩形目的是為了測量高度 paint.getTextBounds(printText, 0, printText.length(), rect); /文本寬度 textWidth = paint.measureText(printText); /獲得文字高度 textHeight = rect.bottom - rect.top; /初始化

23、路徑 path = new Path(); iv.setX(getWidth()/2); iv.measure(0,0); iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLoutListener() Override public void onGlobalLayout() if (!flagMeure) flagMeure =true; /由于畫文字是由基準(zhǔn)線開始 path.moveTo(iv.getX()-textWidth/2+iv.getWidth()/2, textHei

24、ght+iv.getHeight()+downHeight*iv.getHeight(); /計算最大彈力 maxElasticFactor = (float) (textHeight / elastic); /初始化貝塞爾曲線 path.rQuadTo(textWidth / 2, 0, textWidth, 0); /初始化上彈和下沉動畫 MyAnmation(); iv.startAnimation(translateDown); ); 我們現(xiàn)在寫一個類當(dāng)iv圖片(彈跳圖)碰到文字頂部時設(shè)置一個監(jiān)聽器 時間正好是彈圖向上到頂部的時間 期間不斷讓文字凹陷在恢復(fù)正常 /用于播放文字下沉和上浮

25、動畫傳入的數(shù)值必須是 圖片下沉和上升的一次時間 public void initAnimation(int duration) /這里為什maxElasticFactor/4 好看.另一個同理 這個數(shù)值大家自行調(diào)整 ValueAnimator animator = ValueAnimator.ofFloat(maxElasticFactor/4, (float) (maxElasticFactor / 1.5),0); animator.setDuration(duration/2); animator.addUpdateListener(new ValueAnimator.AnimatorU

26、pdateListener() Override public void onAnimationUpdate(ValueAnimator animation) calc();/重新畫路徑 nowElasticFactor= (float) animation.getAnimatedValue(); postInvalidate(); ); animator.start(); 再來一個重新繪畫路徑計算的方法 public void calc() /重置路徑 path.reset(); /由于畫文字是由基準(zhǔn)線開始 path.moveTo(iv.getX()-textWidth/2+iv.getWi

27、dth()/2, textHeight+iv.getHeight()+downHeight*iv.getHeight(); /畫二次貝塞爾曲線 path.rQuadTo(textWidth / 2, nowElasticFactor, textWidth, 0); 好了到這里我們看看完整源碼吧:package com.example.administrator.myapplication;import android.animation.ObjectAnimator;import android.animation.ValueAnimator;import android.content.Co

28、ntext;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.Rect;import android.util.AttributeSet;import android.view.ViewGroup;import android.view.ViewTreeObserver;import android.view.animation.AccelerateInter

29、polator;import android.view.animation.Animation;import android.view.animation.DecelerateInterpolator;import android.view.animation.TranslateAnimation;import android.widget.FrameLayout;import android.widget.ImageView;public class My extends FrameLayout /畫筆 private Paint paint; /路徑 private Path path;

30、/要輸入的文本 private String printText = "正在加載" /文本寬 private float textWidth; /文本高 private float textHeight; /測量文字寬高的時候使用的矩形 private Rect rect; /最大彈力系數(shù) private float elastic = 1.5f; /最大彈力 private float maxElasticFactor; /當(dāng)前彈力 private float nowElasticFactor; /用于記錄當(dāng)前圖片使用數(shù)組中的哪張 int indexImgFlag = 0

31、; /下沉圖片 int allImgDown = R.mipmap.p2,R.mipmap.p4,R.mipmap.p6,R.mipmap.p8; /動畫效果一次下沉或上彈的時間 animationDuration*2=一次完整動畫時間 int animationDuration = 1000; /彈起來的圖片 ImageView iv; /圖片下沉高度(即從最高點到最低點的距離) int downHeight = 2; private Animation translateDown; private Animation translateUp; private ObjectAnimator

32、rotation; public My(Context context) super(context); public My(Context context, AttributeSet attrs) super(context, attrs); Override protected void dispatchDraw(Canvas canvas) super.dispatchDraw(canvas); canvas.drawTextOnPath(printText, path, 0, 0, paint); /用于播放文字下沉和上浮動畫傳入的數(shù)值必須是 圖片下沉和上升的一次時間 public v

33、oid initAnimation(int duration) /這里為什maxElasticFactor/4為什么 ValueAnimator animator = ValueAnimator.ofFloat(maxElasticFactor/4, (float) (maxElasticFactor / 1.5),0); animator.setDuration(duration/2); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() Override public void onAnimationU

34、pdate(ValueAnimator animation) calc(); nowElasticFactor= (float) animation.getAnimatedValue(); postInvalidate(); ); animator.start(); public void calc() /重置路徑 path.reset(); /由于畫文字是由基準(zhǔn)線開始 path.moveTo(iv.getX()-textWidth/2+iv.getWidth()/2, textHeight+iv.getHeight()+downHeight*iv.getHeight(); /畫二次貝塞爾曲線

35、 path.rQuadTo(textWidth / 2, nowElasticFactor, textWidth, 0); /初始化彈跳動畫 public void MyAnmation() /下沉效果動畫 translateDown = new TranslateAnimation( Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0, Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,downHeight); translateDown.setDuration(an

36、imationDuration); /設(shè)置一個插值器 動畫將會播放越來越快 模擬重力 translateDown.setInterpolator(new AccelerateInterpolator(); /上彈動畫 translateUp = new TranslateAnimation( Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0, Animation.RELATIVE_TO_SELF,downHeight,Animation.RELATIVE_TO_SELF,0 ); translateUp.setDuration(

37、animationDuration); /設(shè)置一個插值器 動畫將會播放越來越慢 模擬反重力 translateUp.setInterpolator(new DecelerateInterpolator(); /當(dāng)下沉動畫完成時播放啟動上彈 translateDown.setAnimationListener(new Animation.AnimationListener() Override public void onAnimationStart(Animation animation) iv.setImageResource(allImgDownindexImgFlag); rotatio

38、n = ObjectAnimator.ofFloat(iv, "rotation", 180f, 360f); rotation.setDuration(1000); rotation.start(); Override public void onAnimationEnd(Animation animation) iv.startAnimation(translateUp); initAnimation(animationDuration); Override public void onAnimationRepeat(Animation animation) ); /當(dāng)

39、上移動畫完成時 播放下移動畫 translateUp.setAnimationListener(new Animation.AnimationListener() Override public void onAnimationStart(Animation animation) indexImgFlag = 1+indexImgFlag>=allImgDown.length?0:1+indexImgFlag; iv.setImageResource(allImgDownindexImgFlag); rotation = ObjectAnimator.ofFloat(iv, "rotation", 0.0f, 180f); rotation.setDuration(1000); rotation.start(); Override public void onAnimationEnd(Animation animation) /遞歸 iv.startAnimation(translateDown); Override public void onAnimationRepeat(Animatio