android - Android アニメーション - フリップ

Question

アニメーションを作成する必要があります - ビューを反転して別のビューを表示します。

現在表示されているビューの幅はゼロまでゆっくりと減少し、その後、表示されるビューの幅はゼロから増加する必要があります。

この間、高さは現在表示されている高さからわずかに下がった高さになり、また元に戻ります。

どうすればこれを達成できますか... ViewFlipperを使用します。

Answer 1

ScaleAnimationsset on aでそれを行うことができますViewFlipper。2番目のスケールなしで同様のことを行います。2 つのアニメーションがあります。1 つは外に出るビュー用、もう 1 つは入ってくるビュー用です。出発点としてここに掲載します。

シュリンク_to_ミドル.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>

次に、アプリで次のViewFlipperように設定しました。

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

私が言ったように、これはあなたが説明したものとまったく同じではありませんが、かなり近いものであり、始めることができます.

- 編集 -

これは、pivotX と pivotY を使用したコードです (私の場合は、pivotY だけです)。

シュリンク_to_ミドル.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

objectAnimator で CaseyB の回答のスケール アニメーションを使用します。res の下にアニメーター フォルダーがない場合は作成します。このアニメーター フォルダーに objectAnimator レイアウトが存在する必要があります。

res/animator/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/animator/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>

コード：

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();

Answer 3

CaseyB によって記述されたこの特定のアニメーション (フリップ) を含み、拡張する新しいライブラリFlipViewを開発したことをお知らせします。あらゆる種類のビューやレイアウトを、Gmail の画像フリッピングを含む、あらゆる種類のアニメーションや形状と交換できる、完全にカスタマイズ可能なライブラリを意味します。

ご覧ください。