Форма Android Material Design

Question

Я хочу спросить о том, как создать анимацию для изменения формы в дизайне материалов Android. И это видео, которое я получил от руководства Android Material Design.

Material can change shape

Спасибо.

Answer 1

Это краткая реализация этой анимации, с которой вы связались. Он использует CardView из библиотеки поддержки, а также пользовательский PathInterpolator, чтобы сделать его более похожим на видео (по умолчанию AccelerateDecelerateInterpolator слишком крут, но вы идете с ним в устройствах до Lollipop). Это не произведение искусства, но, надеюсь, это должно дать вам представление об одном возможном способе создания этих бумажных анимаций.

Предлагается демонстрационное видео https://drive.google.com/file/d/0B7TH7VeIpgSQYkx2TVlSakZidXM/view.

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" 
    >