如何通过编程实现ImageView动画

Question

如何通过编程实现ImageView动画

10

当单击该图像视图时，我想要对ImageView进行动画处理。

具体来说，我希望ImageView的大小变大一点（比如增加0.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>

顺便提一下，既然我已经接受了一个答案，这让我感到有些尴尬。我试图将 @tharkbad 和 @Hardik4560 的答案结合起来，但现在它的动画效果看起来不太流畅。

在 scale_up 动画期间，它看起来像是被“跳过”到动画的末尾，然后立即开始 scale_down 动画。我想我得再琢磨一下。

- Jeremy

它是否产生任何错误？ - Kitkat

不是的。它只是什么也没做。 - Jeremy

3个回答

6

我使用这个来实现弹入弹出效果，看看它是否对你有用。

弹出。

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

- Hardik4560

嗨，是的，现在它正在工作。谢谢。我暂时无法接受你的答案。 - Jeremy

没问题先生。很高兴能帮到您。也许以后您会接受 :) - Hardik4560

@username55，请等待5分钟，然后您就可以接受这个答案了。 - Kitkat

你好，你能否提供一个Java代码示例，演示如何实现基于XML的动画？ - Jeremy

1

pop = AnimationUtils.loadAnimation(mAppContext, R.anim.pop); 和 v.startAnimation(pop); - Hardik4560

0

我使用 Kotlin 创建了相同的动画： Repo：https://github.com/David-Hackro/Bounce-Animation 你需要创建你自己的元素并扩展任何内容（ImageView、Button 等），在我的情况下，我创建了一个名为 BounceWidget 的类。

在 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)

- David Hackro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thrakbad · Accepted Answer

如果你想不使用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);