web-dev-qa-db-ja.com

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

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

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

この間、高さは現在表示されている高さからわずかに減少した高さまで変化し、再び元に戻ります。

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

androidanimationflip
28
Gaurav Vaish

これは、ScaleAnimationsをViewFlipperに設定して行うことができます。私は2番目のスケールなしで同様のことをします。 2つのアニメーションがあります。1つは外に出るビュー用で、もう1つは入ってくるビュー用です。ここでは、それらを開始点として投稿します。

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>

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

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

私が言ったように、これはあなたが説明したものと正確には同じではありませんが、それはかなり近く、あなたを始めるでしょう。

-EDIT-

次に、pivotXとpivotYを使用するコードを示します（まあ、私の場合はピボットYだけです）。

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" />
43
CaseyB

CaseyBによって記述されたこの特定のアニメーション（フリップ）を含み、拡張する新しいライブラリ FlipView を開発したことを通知するだけです。つまり、Gmail画像のめくりを含め、あらゆる種類のビューやレイアウトを、あらゆる種類のアニメーションや形状に置き換えることができる、完全にカスタマイズ可能なライブラリです。

ぜひご覧ください。

3
Davideas

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

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();
2
s-hunter