web-dev-qa-db-ja.com

ImageViewをプログラムでアニメーション化する方法

上記の画像ビューがクリックされたときにImageViewをアニメーション化しようとしています。

具体的には、ImageViewのサイズを大きくして（たとえば.20大きくして）、すぐに元のサイズに縮小する必要があります。

これまでのところ、私はこのコードを試してみましたが、運がありませんでした。

// thumbLike is the imageView I would like to animate.
button.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 2.5f, 1.0f, 2.5f,
                                    Animation.RELATIVE_TO_SELF, 0.5f,
                                    Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnim.setInterpolator(new LinearInterpolator());
        scaleAnim.setDuration(1500);
        thumbLike.startAnimation(scaleAnim);
        thumbLike.setAnimation(null);
    }
});

誰かが可能な解決策を私に提案できますか？

編集＃1

Hardik4560が回答したように、XMLを介して機能しています。

// finally i use this code to execute the animation
Animation animationScaleUp = AnimationUtils.loadAnimation(this, R.anim.scale_up);
Animation animationScaleDown = AnimationUtils.loadAnimation(this, R.anim.scale_down);

AnimationSet growShrink = new AnimationSet(true);
growShrink.addAnimation(animationScaleUp);
growShrink.addAnimation(animationScaleDown);
thumbLike.startAnimation(growShrink);

およびXML

SCALE_UP
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:interpolator="@Android:anim/linear_interpolator">
    <scale
        Android:fromXScale="1.0"
        Android:toXScale="1.5"
        Android:fromYScale="1.0"
        Android:toYScale="1.5"
        Android:pivotX="50%"
        Android:pivotY="50%"
        Android:duration="1000" />
</set>

SCALE_DOWN
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:interpolator="@Android:anim/linear_interpolator">
    <scale
        Android:fromXScale="1.5"
        Android:toXScale="1.0"
        Android:fromYScale="1.5"
        Android:toYScale="1.0"
        Android:pivotX="50%"
        Android:pivotY="50%"
        Android:duration="1000" />
</set>

ps：私はすでに答えを受け入れたので、これは厄介です。 @tharkbadと@ Hardik4560の回答を組み合わせようとしていますが、アニメーションの方法がスムーズに見えません。

scale_upアニメーション中は、アニメーションの最後まで「スキップ」して、すぐにscale_downアニメーションを開始するように見えます。私はそれを少しいじる必要があると思います。

androidandroid-animationscaletransform
10
Jeremy

私はこれを使ってポピンポップアウト効果を達成します、

それがあなたに役立つかどうかを確認してください

飛び出る。

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:interpolator="@Android:anim/bounce_interpolator"    >
    <scale
        Android:pivotX="50%"
        Android:pivotY="50%"
        Android:fromXScale="0.5"
        Android:fromYScale="0.5"
        Android:toXScale="1.0"
        Android:toYScale="1.0"
        Android:duration="500" />

</set>

ポップイン

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:interpolator="@Android:anim/bounce_interpolator"    >
    <scale
        Android:pivotX="50%"
        Android:pivotY="50%"
        Android:fromXScale="1.0"
        Android:fromYScale="1.0"
        Android:toXScale="0.0"
        Android:toYScale="0.0"
        Android:duration="500" />

</set>
6
Hardik4560

XMLなしでこれを実装したい場合は、次のようにすることができます

final float growTo = 1.2f;
final long duration = 1200;

ScaleAnimation grow = new ScaleAnimation(1, growTo, 1, growTo, 
                                         Animation.RELATIVE_TO_SELF, 0.5f,
                                         Animation.RELATIVE_TO_SELF, 0.5f);
grow.setDuration(duration / 2);
ScaleAnimation shrink = new ScaleAnimation(growTo, 1, growTo, 1,
                                           Animation.RELATIVE_TO_SELF, 0.5f,
                                           Animation.RELATIVE_TO_SELF, 0.5f);
shrink.setDuration(duration / 2);
shrink.setStartOffset(duration / 2);
AnimationSet growAndShrink = new AnimationSet(true);
growAndShrink.setInterpolator(new LinearInterpolator());
growAndShrink.addAnimation(grow);
growAndShrink.addAnimation(shrink);
thumbLike.startAnimation(growAndShrink);

もちろん、 NineOldAndroids を使用して、新しいアニメーションメソッドを使用することもできます。

元のエラーはこの行だと思います。開始したばかりのアニメーションがビューから再び削除されます。

thumbLike.setAnimation(null);
19
Thrakbad

Kotlinを使用して同じアニメーションを作成しました。

リポジトリ：https://github.com/David-Hackro/Bounce-Animation

要素を作成し、何か（ImageView、Buttonなど）を拡張する必要があります。私の場合は、BounceWidgetという名前のクラスを作成しました。

enter image description here

xmlに要素を追加

<hackro.tutorials.com.bounceWidget.widget.BounceWidget
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" />

プログラムで要素を追加する

val xpp = resources.getXml(R.xml.bouncewidget)
val attr = Xml.asAttributeSet(xpp)
val layout : LinearLayout = findViewById(R.id.layout)
val octocat1 : BounceWidget = BounceWidget(this,attr)

//you can change this values and have default values

//octocat1.id_resource(R.mipmap.bounceimage) // change image --> default : R.mipmap.ic_launcher
//octocat1.positionX = 1 //position X starting --> default : 0
//octocat1.positionY = 1 //position Y starting--> default : 0
//octocat1.velocityX = 1 //Velocity X --> default : 20
//octocat1.velocityY = 1 //Velocity Y --> default : 15

octocat1.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)

layout.addView(octocat1)
0
David Hackro