【移動應(yīng)用開發(fā)技術(shù)】Android實(shí)現(xiàn)炫酷播放效果的方法

【移動應(yīng)用開發(fā)技術(shù)】Android實(shí)現(xiàn)炫酷播放效果的方法

在下給大家分享一下Android實(shí)現(xiàn)炫酷播放效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！具體內(nèi)容如下一、首先看效果二、實(shí)現(xiàn)原理使用貝塞爾曲線實(shí)現(xiàn)滑動效果，在使用屬性動畫實(shí)現(xiàn)水波紋效果，然后就能實(shí)現(xiàn)以上效果三、實(shí)現(xiàn)1、先封裝動畫框架，創(chuà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)建動畫集合類，并且保存繪制軌跡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)頁面布局<?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è)置一些動畫常量private

View

mFab;

private

FrameLayout

mFabcontainer;

private

LinearLayout

mControlsContainer;

//從什么時候開始執(zhí)行動畫

private

static

final

float

SCALE_FACTOR

=

13f;

//持續(xù)時間

private

static

final

long

ANIMATION_DURATION

=

300;

//貝塞爾曲線滑動到什么時候開始執(zhí)行動畫

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();

//開始動畫

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路徑中的某個位置就是開始擴(kuò)散動畫

if

(Math.abs(startX

-

mFab.getX())

>

MINIMUN_X_DISTANCE)

{

if

(!mRevealFlag)

{

ImageButton

fab

=

(ImageButton)

mFab;

fab.setImageDrawable(new

BitmapDrawable());

//看布局里邊的FabContainer要比toolbar背景高mFabSize/2(為了最初的半個fab效果)

mFabcontainer.setY(mFabcontainer.getY()

+

mFabSize

/

2);

//fab放大動畫

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為了看起來平順，需要上移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動畫完畢后，接著每一個子控件都有個縮放動畫（依次順序出來）

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