Hình dạng Thiết kế Vật liệu Android

Question

Tôi muốn hỏi về cách tạo hoạt ảnh để thay đổi hình dạng trong thiết kế material design android. Và đây là video tôi nhận được từ nguyên tắc Thiết kế Material Design của Android.

Material can change shape

Cảm ơn bạn.

Answer 1

Đây là triển khai nhanh về hoạt ảnh mà bạn đã liên kết. Nó đang sử dụng CardView từ thư viện hỗ trợ, cộng với một tùy chỉnh PathInterpolator để làm cho nó di chuyển giống như trong video (mặc định AccelerateDecelerateInterpolator quá đột ngột, nhưng bạn đi với một trong các thiết bị trước Lollipop). Nó không phải là một tác phẩm nghệ thuật, nhưng hy vọng điều này sẽ cung cấp cho bạn một ý tưởng về một cách có thể những hình ảnh động giấy có thể được tạo ra.

Đây là video giới thiệu 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; 
} 

Đây là thẻ, chỉ để tham khảo.

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