版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】Android實(shí)現(xiàn)炫酷播放效果的方法
在下給大家分享一下Android實(shí)現(xiàn)炫酷播放效果的方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!具體內(nèi)容如下一、首先看效果二、實(shí)現(xiàn)原理使用貝塞爾曲線實(shí)現(xiàn)滑動(dòng)效果,在使用屬性動(dòng)畫實(shí)現(xiàn)水波紋效果,然后就能實(shí)現(xiàn)以上效果三、實(shí)現(xiàn)1、先封裝動(dòng)畫框架,創(chuàng)建動(dòng)畫基礎(chǔ)類PathPoint.javapublic
class
PathPoint
{
public
static
final
int
MOVE
=
0;
public
static
final
int
LINE
=
1;
public
static
final
int
CURVE
=
2;
float
mControl0X,
mControl0Y;
float
mControl1X,
mControl1Y;
public
float
mX,
mY;
int
mOperation;
//line/move
private
PathPoint(int
operation,
float
x,
float
y)
{
this.mOperation
=
operation;
this.mX
=
x;
this.mY
=
y;
}
//curve
private
PathPoint(float
c0X,
float
c0Y,
float
c1X,
float
c1Y,
float
x,
float
y)
{
this.mControl0X
=
c0X;
this.mControl0Y
=
c0Y;
this.mControl1X
=
c1X;
this.mControl1Y
=
c1Y;
this.mX
=
x;
this.mY
=
y;
this.mOperation
=
CURVE;
}
public
static
PathPoint
moveTo(float
x,
float
y)
{
return
new
PathPoint(MOVE,
x,
y);
}
public
static
PathPoint
lineTo(float
x,
float
y)
{
return
new
PathPoint(LINE,
x,
y);
}
public
static
PathPoint
curveTo(float
c0X,
float
c0Y,
float
c1X,
float
c1Y,
float
x,
float
y)
{
return
new
PathPoint(c0X,
c0Y,
c1X,
c1Y,
x,
y);
}
}2、創(chuàng)建動(dòng)畫集合類,并且保存繪制軌跡AnimatorPathpublic
class
AnimatorPath
{
//記錄軌跡
private
List<PathPoint>
mPoints
=
new
ArrayList<>();
public
void
moveTo(float
x,
float
y)
{
mPoints.add(PathPoint.moveTo(x,
y));
}
public
void
lineTo(float
x,
float
y)
{
mPoints.add(PathPoint.lineTo(x,
y));
}
public
void
curveTo(float
c0X,
float
c0Y,
float
c1X,
float
c1Y,
float
x,
float
y)
{
mPoints.add(PathPoint.curveTo(c0X,
c0Y,
c1X,
c1Y,
x,
y));
}
public
Collection<PathPoint>
getPoints()
{
return
mPoints;
}
}3、實(shí)現(xiàn)頁(yè)面布局<?xml
version="1.0"
encoding="utf-8"?>
<RelativeLayout
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffe8e8e8">
<ImageView
android:id="@+id/album_cover"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#22eeff"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_below="@id/album_cover"
android:layout_marginTop="-15dp"
android:background="@color/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:paddingLeft="72dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:text="大海大海"
android:textColor="#FFF"
android:textSize="30sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:fontFamily="sans-serif-light"
android:text="王小二"
android:textColor="#9cffffff"
android:textSize="18sp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="@+id/fab_container"
android:layout_width="match_parent"
android:layout_height="128dp"
android:layout_below="@id/album_cover"
android:layout_marginTop="-30dp"
android:elevation="10dp">
<LinearLayout
android:id="@+id/media_controls_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:scaleX="0"
android:scaleY="0"
android:src="@mipmap/play"
/>
<ImageView
android:id="@+id/iv_pause_play"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:scaleX="0"
android:scaleY="0"
android:src="@mipmap/play"
/>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="50dp"
android:scaleX="0"
android:scaleY="0"
android:src="@mipmap/play"
/>
</LinearLayout>
<ImageButton
android:id="@+id/fab"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="top|right"
android:layout_marginRight="72dp"
android:background="@drawable/ripple"
android:elevation="5dp"
android:onClick="onPabPressed"
android:transitionName="button_fab"
/>
</FrameLayout>
</RelativeLayout>4、獲取控件,并且設(shè)置點(diǎn)擊事件,設(shè)置一些動(dòng)畫常量private
View
mFab;
private
FrameLayout
mFabcontainer;
private
LinearLayout
mControlsContainer;
//從什么時(shí)候開(kāi)始執(zhí)行動(dòng)畫
private
static
final
float
SCALE_FACTOR
=
13f;
//持續(xù)時(shí)間
private
static
final
long
ANIMATION_DURATION
=
300;
//貝塞爾曲線滑動(dòng)到什么時(shí)候開(kāi)始執(zhí)行動(dòng)畫
private
static
final
float
MINIMUN_X_DISTANCE
=
200;
private
boolean
mRevealFlag;
private
float
mFabSize;5、給mFab設(shè)置點(diǎn)擊事件private
void
onFabPressed(View
view)
{
final
float
startX
=
mFab.getX();
//開(kāi)始動(dòng)畫
AnimatorPath
path
=
new
AnimatorPath();
path.moveTo(0,
0);
path.curveTo(-200,
200,
-400,
100,
-600,
50);
//
path.lineTo(-600,50);
ObjectAnimator
anim
=
ObjectAnimator.ofObject(this,
"fabLoc",
new
PathEvaluator(),
path.getPoints().toArray());
anim.setInterpolator(new
AccelerateInterpolator());
//
anim.setRepeatCount(ValueAnimator.INFINITE);
//
anim.setRepeatMode(ValueAnimator.REVERSE);
anim.setDuration(ANIMATION_DURATION);
anim.start();
anim.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener()
{
@Override
public
void
onAnimationUpdate(ValueAnimator
valueAnimator)
{
//到了path路徑中的某個(gè)位置就是開(kāi)始擴(kuò)散動(dòng)畫
if
(Math.abs(startX
-
mFab.getX())
>
MINIMUN_X_DISTANCE)
{
if
(!mRevealFlag)
{
ImageButton
fab
=
(ImageButton)
mFab;
fab.setImageDrawable(new
BitmapDrawable());
//看布局里邊的FabContainer要比toolbar背景高mFabSize/2(為了最初的半個(gè)fab效果)
mFabcontainer.setY(mFabcontainer.getY()
+
mFabSize
/
2);
//fab放大動(dòng)畫
mFab.animate()
.scaleXBy(SCALE_FACTOR)
.scaleYBy(SCALE_FACTOR)
.setListener(mEndRevealListener)
.setDuration(ANIMATION_DURATION);
mRevealFlag
=
true;
}
}
}
});
}
public
void
setFabLoc(PathPoint
newLoc)
{
mFab.setTranslationX(newLoc.mX);
if
(mRevealFlag)
{
//因?yàn)椴季掷镞叺膍Fabcontainer要比toolbar背景高mFabSize/2,所以fab為了看起來(lái)平順,需要上移mFabSize/2
mFab.setTranslationY(newLoc.mY
-
(mFabSize
/
2));
}
else
{
mFab.setTranslationY(newLoc.mY);
}
}
private
AnimatorListenerAdapter
mEndRevealListener
=
new
AnimatorListenerAdapter()
{
@Override
public
void
onAnimationEnd(Animator
animation)
{
super.onAnimationEnd(animation);
mFab.setVisibility(View.INVISIBLE);
mFabcontainer.setBackgroundColor(getResources().getColor(R.color.colorAccent));
//reveal動(dòng)畫完畢后,接著每一個(gè)子控件都有個(gè)縮放動(dòng)畫(依次順序出來(lái))
for
(int
i
=
0;
i
<
mControlsContainer.getChildCount();
i++)
{
View
v
=
mControlsContainer.getChildAt(i);
ViewPropertyAnimator
animate
=
v.animate()
.scaleX(1)
.scaleY(1)
.setDuration(ANIMATION_DURATION);
animate.setStartDelay(i
*
50);
animate.start();
}
}
};PathEvaluatorpublic
class
PathEvaluator
implements
TypeEvaluator<PathPoint>
{
@Override
public
PathPoint
evaluate(float
t,
PathPoint
startValue,
PathPoint
endValue)
{
//t執(zhí)行的百分比
(0~1)
floa
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 寧夏銀川一中2025屆高三3月份模擬考試數(shù)學(xué)試題含解析
- 《數(shù)學(xué)活動(dòng)》課件
- 12.《拿來(lái)主義》課件 2024-2025學(xué)年統(tǒng)編版高中語(yǔ)文必修上冊(cè)
- 安徽省安慶市潛山市第二中學(xué)2025屆高三下學(xué)期第六次檢測(cè)數(shù)學(xué)試卷含解析
- 2025屆福建省三明市高三最后一模語(yǔ)文試題含解析
- 河北衡水市安平中學(xué)2025屆高三第二次聯(lián)考語(yǔ)文試卷含解析
- 江蘇省南通巿啟東中學(xué)2025屆高考臨考沖刺英語(yǔ)試卷含解析
- 8.1 《荷花淀》課件 2024-2025學(xué)年統(tǒng)編版高中語(yǔ)文選擇性必修中冊(cè)
- 江蘇省鎮(zhèn)江市第一中學(xué)2025屆高三第二次診斷性檢測(cè)英語(yǔ)試卷含解析
- 四川省資陽(yáng)市安岳縣石羊中學(xué)2025屆高三3月份第一次模擬考試語(yǔ)文試卷含解析
- 2023年公需科目考試試題及答案
- 年產(chǎn)1w噸生物柴油工廠設(shè)計(jì)-畢業(yè)(論文)設(shè)計(jì)
- 談?wù)勄嗄甏髮W(xué)生在中國(guó)式現(xiàn)代化征程上的使命與擔(dān)當(dāng)范文(6篇)
- DB13-T 5660-2023 水文水井分層抽水技術(shù)規(guī)范
- 二年級(jí)上冊(cè)綜合實(shí)踐測(cè)試卷
- 互聯(lián)網(wǎng)金融外文文獻(xiàn)翻譯
- 產(chǎn)前篩查、診斷及新生兒疾病篩查
- 小學(xué)《科學(xué)》期末測(cè)評(píng)方案
- 友邦保險(xiǎn)“愈從容”重疾專案管理服務(wù)手冊(cè)(完整版)
- 會(huì)計(jì)師事務(wù)所筆試題目整理
- 2023年消防接警員崗位理論知識(shí)考試參考題庫(kù)(濃縮500題)
評(píng)論
0/150
提交評(píng)論