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

您只需使用代码启动一个Scale和Alpha Animation.

这一行:

animation.setRepeatMode(Animation.REVERSE);

显然在AnimationSet中不能很好地工作,所以你必须分别将它应用于每个动画.我会推荐这样的东西:

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

或者,当动画结束时,你的心会重新出现.