Hoạt ảnh trên Android - Flip

Question

Tôi cần tạo hoạt ảnh - Lật chế độ xem và hiển thị một chế độ xem khác.

Chiều rộng của chế độ xem hiện được hiển thị giảm từ từ xuống 0 và sau đó chiều rộng của chế độ xem được hiển thị phải tăng từ 0.

Trong thời gian này, chiều cao chuyển từ chiều cao hiện tại được hiển thị sang chiều cao giảm nhẹ và ngược lại.

Làm thế nào tôi có thể đạt được điều này ... bằng cách sử dụng một ViewFlipper.

Answer 1

Bạn có thể làm điều đó với ScaleAnimations đặt trên ViewFlipper. Tôi làm một điều tương tự mà không có quy mô thứ hai. Tôi có hai hình ảnh động, một cho xem ra đi và một cho xem sắp tới in Tôi sẽ gửi chúng ở đây như là một điểm khởi đầu cho bạn.

shrink_to_middle.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <scale 
     android:interpolator="@android:anim/linear_interpolator" 
     android:fromXScale="1.0" 
     android:toXScale="1.0" 
     android:fromYScale="1.0" 
     android:toYScale="0.0" 
     android:fillAfter="false" 
     android:duration="200" /> 
    <translate 
     android:fromYDelta="0" 
     android:toYDelta="50%" 
     android:duration="200"/> 
</set> 

grow_from_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <scale 
     android:interpolator="@android:anim/linear_interpolator" 
     android:fromXScale="1.0" 
     android:toXScale="1.0" 
     android:fromYScale="0.0" 
     android:toYScale="1.0" 
     android:fillAfter="false" 
     android:startOffset="200" 
     android:duration="200" /> 
    <translate 
     android:fromYDelta="50%" 
     android:toYDelta="0" 
     android:startOffset="200" 
     android:duration="200"/> 
</set> 

Sau đó, trong ứng dụng tôi đặt chúng vào các ViewFlipper như thế này:

mViewFlipper.setInAnimation(context, R.anim.grow_from_middle); 
mViewFlipper.setOutAnimation(context, R.anim.shrink_to_middle); 

Như tôi đã nói, đây không phải chính xác những gì bạn mô tả, nhưng nó khá gần và sẽ giúp bạn bắt đầu.

--EDIT--

Đây là mã bằng cách sử dụng pivotX và pivotY (tốt, chỉ pivotY trong trường hợp của tôi):

shrink_to_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<scale 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/linear_interpolator" 
    android:fromXScale="1.0" 
    android:toXScale="1.0" 
    android:fromYScale="1.0" 
    android:toYScale="0.0" 
    android:pivotY="50%" 
    android:fillAfter="false" 
    android:duration="200" /> 

grow_from_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<scale 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/linear_interpolator" 
    android:fromXScale="1.0" 
    android:toXScale="1.0" 
    android:fromYScale="0.0" 
    android:toYScale="1.0" 
    android:pivotY="50%" 
    android:fillAfter="false" 
    android:startOffset="200" 
    android:duration="200" /> 

Answer 2

Chỉ cần thông báo rằng tôi đã phát triển một thư viện mới FlipView bao gồm và mở rộng hoạt ảnh cụ thể này (lật) được mô tả bởi CaseyB. Tôi có nghĩa là một thư viện hoàn toàn tùy chỉnh, nơi bạn sẽ có thể trao đổi bất kỳ loại quan điểm và bố trí với bất kỳ loại hình ảnh động và hình dạng mà bạn mong muốn, bao gồm hình ảnh của Gmail lật.

Vui lòng xem.

Answer 3

Sử dụng hoạt ảnh tỷ lệ từ câu trả lời của CaseyB với đối tượngAnimator. Nếu bạn không có thư mục animator dưới res, tạo một thư mục, nó yêu cầu bố trí đối tượngAnimator để cư trú trong trình làm hoạt hoạ này.

res/phim hoạt hình/shrink_to_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
     android:valueFrom="1.0" 
     android:valueTo="0.0" 
     android:propertyName="scaleX" 
     android:duration="200"/> 
</set> 

res/phim hoạt hình/grow_from_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
     android:valueFrom="0.0" 
     android:valueTo="1.0" 
     android:propertyName="scaleX" 
     android:duration="200" 
     android:startOffset="200"/> 
</set> 

Mã:

ImageView iv = (ImageView) findViewById(R.id.my_image); 
AnimatorSet shrinkSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.shrink_to_middle); 
shrinkSet.setTarget(iv); 
shrinkSet.start(); 

iv.setImageResource(R.drawable.another_image); 

AnimatorSet growSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.grow_from_middle); 
growSet.setTarget(iv); 
growSet.start();