Android自定義view實現(xiàn)阻尼效果的加載動畫
更新時間：2016年11月08日 14:44:05 作者：安兒IT
這篇文章主要介紹了Android自定義view實現(xiàn)阻尼效果的加載動畫的相關(guān)資料,非常不錯，具有一定的參考借鑒加載，需要的朋友可以參考下
效果:
需要知識:
1. 二次貝塞爾曲線
2. 動畫知識
3. 基礎(chǔ)自定義view知識
先來解釋下什么叫阻尼運動
阻尼振動是指，由于振動系統(tǒng)受到摩擦和介質(zhì)阻力或其他能耗而使振幅隨時間逐漸衰減的振動，又稱減幅振動、衰減振動。[1] 不論是彈簧振子還是單擺由于外界的摩擦和介質(zhì)阻力總是存在，在振動過程中要不斷克服外界阻力做功，消耗能量，振幅就會逐漸減小，經(jīng)過一段時間，振動就會完全停下來。這種振幅隨時間減小的振動稱為阻尼振動．因為振幅與振動的能量有關(guān)，阻尼振動也就是能量不斷減少的振動．阻尼振動是非簡諧運動．阻尼振動系統(tǒng)屬于耗散系統(tǒng)。這里的阻尼是指任何振動系統(tǒng)在振動中，由于外界作用或系統(tǒng)本身固有的原因引起的振動幅度逐漸下降的特性，以及此一特性的量化表征。
本例中文字部分凹陷就是這種效果,當(dāng)然這篇文章知識帶你簡單的使用.
跳動的水果效果實現(xiàn)
剖析:從上面的效果圖中很面就是從頂端向下掉落然后再向上 期間旋轉(zhuǎn)即可.
那么我們首先自定義一個view繼承FrameLayout
public class My extends FrameLayout {
public My(Context context) {
super(context);
}
public My(Context context, AttributeSet attrs) {
super(context, attrs);
}
}
需要素材如下三張圖片:
也許有人會問我看到你效果圖到頂部或者底部就變成向上或者向下了.你三張夠嗎?
答:到頂部或者底部旋轉(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;
//圖片下沉高度(即從最高點到最低點的距離)
int 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,Animation.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,Animation.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.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
iv.setImageResource(allImgDown[indexImgFlag]);
rotation = ObjectAnimator.ofFloat(iv, "rotation", 180f, 360f);
rotation.setDuration(1000);
rotation.start();
}
@Override
public void onAnimationEnd(Animation animation) {
iv.startAnimation(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.setImageResource(allImgDown[indexImgFlag]);
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(Animation animation) {
}
});
}
以上代碼知識:
插值器:會讓一個動畫在播放時在某一時間段加快動畫或者減慢
//設(shè)置一個插值器 動畫將會播放越來越快 模擬重力
1.translateDown.setInterpolator(new AccelerateInterpolator());
這個插值器 速率表示圖:
可以從斜率看到使用此插值器 動畫將越來越快.意義在于模仿下落時重力的影響
////設(shè)置一個插值器 動畫將會播放越來越慢 模擬反重力
2. translateUp.setInterpolator(new DecelerateInterpolator());
速率圖:
最后我們初始化下圖片控件到我們的自定義view
private 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(allImgDown[0]);
this.addView(iv);
iv.measure(0,0);
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());
//計算最大彈力
maxElasticFactor = (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().addOnGlobalLayoutListener(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, oldh);
init();
}
此方法會在onmesure方法執(zhí)行完成后回調(diào) 這樣你就可以在此方法獲得自定義view的寬高了
效果圖:
畫文字成u形
首先你得知道如下知識
貝塞爾曲線:具體學(xué)習(xí)
這里我們用到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,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左上方)一樣那么在屏幕中的顯示效果如下
這里隨擴張下dispatchDraw和ondraw的區(qū)別
如果你的自定義view 是繼承view 那么 會先調(diào)用 ondraw->>dispatchDraw
如果你的自定義view 是繼承viewgroup那么會跳過ondraw方法直接調(diào)用dispathchDraw這里特別注意!!我們這個案例中繼承的是FrameLayout, 而frameLayout又是繼承自viewgroup所以….
那么我們回到主題 如何畫一個U形文字?簡單就是說按照我們畫出來的曲線在上面寫字 如: 文字是”CSDN開源中國” 如何讓這幾個字貼著我們的曲線寫出來?
這里介紹一個API
canvas.drawTextOnPath()
第一個參數(shù):文字 類型為字符串
第二個參數(shù):路徑 也就是我們前面的二次貝塞爾曲線
第三個參數(shù):沿著路徑文字開始的位置 說白了偏移量
第四個參數(shù):貼著路徑的高度的偏移量
hOffset:
The distance along the path to add to the text's starting position
vOffset:
The distance above(-) or below(+) the path to position the text
//ok我們看看他可以畫出什么樣子的文字
這種看大家對貝塞爾曲線的理解,你理解的越深那么你可以畫出的圖像越多,當(dāng)然不一定要用貝塞爾曲線
確定貝塞爾曲線的起點
我們在回過頭來看看我們的效果圖
我們可以看到文字應(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.measureText(“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 ImageView(getContext());
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
iv.setLayoutParams(params);
iv.setImageResource(allImgDown[0]);
this.addView(iv);
//畫筆的初始化
paint = new Paint();
paint.setStrokeWidth(1);
paint.setColor(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;
//初始化路徑
path = new Path();
iv.setX(getWidth()/2);
iv.measure(0,0);
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());
//計算最大彈力
maxElasticFactor = (float) (textHeight / elastic);
//初始化貝塞爾曲線
path.rQuadTo(textWidth / 2, 0, textWidth, 0);
//初始化上彈和下沉動畫
MyAnmation();
iv.startAnimation(translateDown);
}
}
});
}
我們現(xiàn)在寫一個類當(dāng)iv圖片(彈跳圖)碰到文字頂部時設(shè)置一個監(jiān)聽器 時間正好是彈圖向上到頂部的時間 期間不斷讓文字凹陷在恢復(fù)正常
//用于播放文字下沉和上浮動畫傳入的數(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.AnimatorUpdateListener() {
@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.getWidth()/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.Context;
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.AccelerateInterpolator;
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;
//要輸入的文本
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;
//下沉圖片
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 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 void 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 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.getWidth()/2, textHeight+iv.getHeight()+downHeight*iv.getHeight());
//畫二次貝塞爾曲線
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(animationDuration);
//設(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(animationDuration);
////設(shè)置一個插值器 動畫將會播放越來越慢 模擬反重力
translateUp.setInterpolator(new DecelerateInterpolator());
//當(dāng)下沉動畫完成時播放啟動上彈
translateDown.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
iv.setImageResource(allImgDown[indexImgFlag]);
rotation = 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)上移動畫完成時 播放下移動畫
translateUp.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
indexImgFlag = 1+indexImgFlag>=allImgDown.length?0:1+indexImgFlag;
iv.setImageResource(allImgDown[indexImgFlag]);
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(Animation animation) {
}
});
}
boolean flagMeure;
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
init();
}
private 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(allImgDown[0]);
this.addView(iv);
//畫筆的初始化
paint = new Paint();
paint.setStrokeWidth(1);
paint.setColor(Color.CYAN);
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(50);
paint.setAntiAlias(true);
//矩形
rect = new Rect();
//將文字畫入矩形目的是為了測量高度
paint.getTextBounds(printText, 0, printText.length(), rect);
//文本寬度
textWidth = paint.measureText(printText);
//獲得文字高度
textHeight = rect.bottom - rect.top;
//初始化路徑
path = new Path();
iv.setX(getWidth()/2);
iv.measure(0,0);
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());
//計算最大彈力
maxElasticFactor = (float) (textHeight / elastic);
//初始化貝塞爾曲線
path.rQuadTo(textWidth / 2, 0, textWidth, 0);
//初始化上彈和下沉動畫
MyAnmation();
iv.startAnimation(translateDown);
}
}
});
}
}
小人奉上源碼一封供大家 參考github源碼下載地址
以上所述是小編給大家介紹的Android自定義view實現(xiàn)阻尼效果的加載動畫，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Android 進度條按鈕ProgressButton的實現(xiàn)代碼
這篇文章主要介紹了Android 進度條按鈕實現(xiàn)(ProgressButton)代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Android中Service服務(wù),在前面一篇的基礎(chǔ)上進一步分析了Android Service的綁定服務(wù)與解綁服務(wù)的相關(guān)使用技巧,需要的朋友可以參考下2016-01-01
Android 狀態(tài)欄虛擬導(dǎo)航鍵透明效果的實現(xiàn)方法
這篇文章主要介紹了Android 狀態(tài)欄虛擬導(dǎo)航鍵透明效果的實現(xiàn)方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
現(xiàn)在Fragment的應(yīng)用真的是越來越廣泛了，之前Android在3.0版本加入Fragment的時候，主要是為了解決Android Pad屏幕比較大，空間不能充分利用的問題，但現(xiàn)在即使只是在手機上，也有很多的場景可以運用到Fragment了，這篇文章給大家介紹了Android中Fragment的解析和使用。2016-11-11
淺談Android Classloader動態(tài)加載分析
這篇文章主要介紹了淺談Android Classloader動態(tài)加載分析，詳細(xì)的介紹了ClassLoader概念、分類，具有一定的參考價值，有興趣的可以了解一下2018-03-03
Jetpack Compose按鈕組件使用實例詳細(xì)講解
這篇文章主要介紹了Jetpack Compose按鈕組件使用實例，按鈕組件Button是用戶和系統(tǒng)交互的重要組件之一，它按照Material Design風(fēng)格實現(xiàn)，我們先看下Button的參數(shù)列表，通過參數(shù)列表了解下Button的整體功能2023-04-04
這篇文章主要介紹了Android中實現(xiàn)可滑動的Tab的3種方式,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了RecyclerView使用的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了Android如何去除開屏廣告，幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā)，感興趣的朋友可以了解下2021-04-04
本文將利用AnimatedList組件實現(xiàn)列表元素的一些動態(tài)效果，例如添加元素時的漸現(xiàn)效果，刪除元素逐漸消失的效果等，感興趣的小伙伴可以了解一下2022-03-03