안 드 로 이 드 시 크 한 재생 효과 구현
첫째,우선 효과
2.실현 원리
베 어 셀 곡선 을 사용 하여 미끄럼 효 과 를 실현 하고 속성 애니메이션 을 사용 하여 물결 무늬 효 과 를 실현 한 다음 에 상기 효 과 를 실현 할 수 있다.
실현
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;
}
}
<?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>
private View mFab;
private FrameLayout mFabcontainer;
private LinearLayout mControlsContainer;
//
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;
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
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();
}
}
};
public class PathEvaluator implements TypeEvaluator<PathPoint> {
@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);
}
}이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
