CardView
,加上自定义的PathInterpolator
,使其更像视频中的移动效果(默认的AccelerateDecelerateInterpolator
太突然了,但在早期版本的设备上可以使用)。这不是一件艺术品,但希望这能让您了解创建这些纸质动画的一种可能方式。final int origSize = getResources().getDimensionPixelSize(R.dimen.original_size);
final int origRadius = getResources().getDimensionPixelSize(R.dimen.original_radius);
final int targetRadius1 = getResources().getDimensionPixelSize(R.dimen.target_radius_1);
final int targetRadius2 = getResources().getDimensionPixelSize(R.dimen.target_radius_2);
final int targetSize1 = origSize * 2;
final int targetSize2 = origSize * 4;
final int ANIMATION_INTERVAL_MS = 600;
final int ANIMATION_DURATION_MS = 700;
private void doMaterialAnimation() {
ValueAnimator va1 = ObjectAnimator.ofFloat(1, 0);
va1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(origSize, targetSize1, origRadius, targetRadius1, animation);
}
});
ValueAnimator va2 = ObjectAnimator.ofFloat(1, 0);
va2.setStartDelay(ANIMATION_INTERVAL_MS);
va2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(targetSize1, targetSize2, targetRadius1, targetRadius2, animation);
}
});
ValueAnimator va3 = ObjectAnimator.ofFloat(1, 0);
va3.setStartDelay(ANIMATION_INTERVAL_MS);
va3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(targetSize2, origSize, targetRadius2, origRadius, animation);
}
});
AnimatorSet aset = new AnimatorSet();
aset.playSequentially(va1, va2, va3);
aset.setDuration(ANIMATION_DURATION_MS);
aset.setInterpolator(new PathInterpolator(0.75f, 0.1f, 0.25f, 0.9f));
aset.start();
}
private void transformMaterial(int origSize,
int targetSize,
int origRadius,
int targetRadius,
ValueAnimator animation) {
float fraction = (float) animation.getAnimatedValue();
cardView.setRadius(interpolate(origRadius, targetRadius, fraction));
cardView.getLayoutParams().width = cardView.getLayoutParams().height
= (int) ((targetSize - origSize) * (1 - fraction) + origSize);
cardView.requestLayout();
}
private float interpolate(int from, int to, float fraction) {
return ((from - to) * fraction) + to;
}
这是参考卡片,仅供参考。
<android.support.v7.widget.CardView
android:id="@+id/card"
android:background="@color/background_material_light"
app:cardCornerRadius="@dimen/original_radius"
android:layout_centerInParent="true"
android:layout_width="@dimen/original_size"
android:layout_height="@dimen/original_size"
>