Instagram的心形动画模仿——FadeScale动画

Question

我正在尝试创建一个类似于 instagram 双击动画的动画，其中心脏在淡入时从中心放大，然后保持可见一段时间，然后在淡出时缩小到中心。

我正在使用这个动画：

public void animateHeart(final ImageView view) {
AnimationSet animation = new AnimationSet(true);
animation.addAnimation(new AlphaAnimation(0.0f, 1.0f));
animation.addAnimation(new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f));
animation.setDuration(700);
animation.setRepeatMode(Animation.REVERSE);
view.startAnimation(animation);
}

出现动画效果很好，但动画不会反转。另外，我希望它只播放一次动画。

有人可以告诉我我做错了什么吗？提前致谢。

Answer 1

您仅使用您的代码启动一个缩放和 Alpha 动画。

这一行：

animation.setRepeatMode(Animation.REVERSE);

显然在 AnimationSet 中效果不佳，因此您必须将其分别应用于每个 Animation。我会推荐这样的东西：

public void animateHeart(final ImageView view) {
    ScaleAnimation scaleAnimation = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    prepareAnimation(scaleAnimation);

    AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
    prepareAnimation(alphaAnimation);

    AnimationSet animation = new AnimationSet(true);
    animation.addAnimation(alphaAnimation);
    animation.addAnimation(scaleAnimation);
    animation.setDuration(700);
    animation.setFillAfter(true);

    view.startAnimation(animation);

}

private Animation prepareAnimation(Animation animation){
    animation.setRepeatCount(1);
    animation.setRepeatMode(Animation.REVERSE);
    return animation;
}

别忘了

animation.setFillAfter(true);

否则动画结束后你的心会重新出现

Answer 2

           final Animation myAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.bounce);

                // Use bounce interpolator with amplitude 0.2 and frequency 20
                MyBounceInterpolator interpolator = new MyBounceInterpolator(0.1, 15);
                myAnim.setInterpolator(interpolator);

                imgFavourite.startAnimation(myAnim);

在res文件夹中添加anim文件夹。添加 bounce.xml

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="2000"
        android:fromXScale="0.3"
        android:toXScale="1.0"
        android:fromYScale="0.3"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%" />
</set>

创建 MyBounceInterpolator.java class

public class MyBounceInterpolator implements android.view.animation.Interpolator {
    private double mAmplitude = 1;
    private double mFrequency = 10;

    public MyBounceInterpolator(double amplitude, double frequency) {
        mAmplitude = amplitude;
        mFrequency = frequency;
    }

    public float getInterpolation(float time) {
        return (float) (-1 * Math.pow(Math.E, -time / mAmplitude) *
                Math.cos(mFrequency * time) + 1);
    }
}

Instagram的心形动画模仿——FadeScale动画

Instagram's heart animation mimic - FadeScale animation

animation

android

android-imageview