Android炫酷广东快乐十分搭建的播放效果

使用广东快乐十分搭建述 dsluntan.com 贝塞尔曲线实现滑动效果，在使用属性动画实现水波纹效果，然后就能实现以上效果

三、实现

1、先封装动画框架，创建动画基础类

PathPoint.java

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

}

}
创建动画集合类，并且保存绘制轨迹

AnimatorPath
public 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、实现页面布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/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、获取控件，并且设置点击事件，设置一些动画常量

private View mFab;
private FrameLayout mFabcontainer;
private LinearLayout mControlsContainer;

扫描二维码关注公众号，回复： 2817327 查看本文章

//从什么时候开始执行动画
private static final float SCALE_FACTOR = 13f;
//持续时间
private static final long ANIMATION_DURATION = 300;
//贝塞尔曲线滑动到什么时候开始执行动画
private static final float MINIMUN_X_DISTANCE = 200;
private boolean mRevealFlag;
private float mFabSize;

5，给mFab设置点击事件

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() {br/>@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//到了path路径中的某个位置就是开始扩散动画
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) {
        //因为布局里边的mFabcontainer要比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();
        }
    }
};

PathEvaluator
public class PathEvaluator implements TypeEvaluator<PathPoint> {br/>@Override
public PathPoint evaluate(float t, PathPoint startValue, PathPoint endValue) {
//t执行的百分比 (0~1)
float x, y;
if (endValue.mOperation == PathPoint.CURVE) {
//三阶贝塞尔曲线公式
float oneMinusT = 1 - t;
x = oneMinusT oneMinusT oneMinusT startValue.mX +
3 oneMinusT oneMinusT t endValue.mControl0X +
3 oneMinusT t t endValue.mControl1X +
t t t endValue.mX;
y = oneMinusT oneMinusT oneMinusT startValue.mY +
3 oneMinusT oneMinusT t endValue.mControl0Y +
3 oneMinusT t t endValue.mControl1X +
t t t endValue.mY;
} else if (endValue.mOperation == PathPoint.LINE) {
//x=起始点+t起始点和终点的距离
x = startValue.mX + t (endValue.mX - startValue.mX);
y = startValue.mY + t * (endValue.mY - startValue.mY);
} else {
x = endValue.mX;
y = endValue.mY;

    }
    return PathPoint.moveTo(x, y);
}

}
注意：属性动画既可以改变属性，也可以改变一个变量或者方法

Android炫酷广东快乐十分搭建的播放效果

猜你喜欢