Şekil Android Materyal Tasarımı

Question

Android materyal tasarımında şekil değiştirmek için nasıl animasyon oluşturulacağını öğrenmek istiyorum. Ve bu, Android Material Design yönergelerinden aldığım video.

Material can change shape

teşekkür ederiz.

Answer 1

Bağlantınızdaki bu animasyonun hızlı bir şekilde uygulanması. Destek kitaplığından CardView kullanıyor, ayrıca videoda daha fazla hareket etmesini sağlamak için özel bir PathInterpolator kullanıyor (varsayılan AccelerateDecelerateInterpolator çok hızlı değil, ancak bunu önceden Lollipop aygıtlarında yapıyorsunuz). Bu bir sanat eseri değil, ama umarım bu, bu kâğıt canlandırmalarının yaratılmasının olası bir yolu hakkında size bir fikir vermelidir.

İşte bir tanıtım videosu 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; 
} 

Bu, yalnızca referans amaçlı bir karttır.

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