如何实现Facebook长按点赞图标触发的反应表情跳跃替换动画？

嘿，我完全懂你想要的那种丝滑点赞动画有多吸引人！作为新手，这种带交互的组合动画确实有点绕，但别担心，咱们一步步拆解来做，保证你能搞定它～

1. 先搞定布局结构 #

首先咱们需要两个核心部分：主点赞按钮，以及隐藏的表情选择菜单。用FrameLayout作为容器会方便后续定位临时动画视图：

<FrameLayout
    android:id="@+id/mainContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <!-- 主点赞按钮 -->
    <ImageView
        android:id="@+id/likeBtn"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_like_outline"
        android:clickable="true"
        android:focusable="true"
        android:layout_gravity="center_horizontal"/>

    <!-- 表情选择菜单，初始隐藏 -->
    <LinearLayout
        android:id="@+id/reactionMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:visibility="gone"
        android:orientation="horizontal"
        android:padding="8dp"
        android:background="@drawable/rounded_menu_bg">

        <ImageView
            android:id="@+id/reactionLike"
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:src="@drawable/ic_like_fill"
            android:clickable="true"
            android:padding="4dp"/>

        <ImageView
            android:id="@+id/reactionLove"
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:src="@drawable/ic_love"
            android:clickable="true"
            android:padding="4dp"/>

        <!-- 可以继续添加其他表情：哈哈、哇、悲伤、愤怒 -->
    </LinearLayout>
</FrameLayout>

2. 长按触发表情菜单 #

给主点赞按钮设置长按事件，显示菜单的时候加个淡入动画，让过渡更自然：

ImageView likeBtn = findViewById(R.id.likeBtn);
LinearLayout reactionMenu = findViewById(R.id.reactionMenu);
FrameLayout mainContainer = findViewById(R.id.mainContainer);

// 长按显示表情菜单
likeBtn.setOnLongClickListener(v -> {
    reactionMenu.setVisibility(View.VISIBLE);
    // 淡入动画
    reactionMenu.setAlpha(0f);
    reactionMenu.animate()
            .alpha(1f)
            .setDuration(200)
            .setInterpolator(new AccelerateDecelerateInterpolator())
            .start();
    return true;
});

// 点击空白处隐藏菜单
mainContainer.setOnClickListener(v -> {
    if (reactionMenu.getVisibility() == View.VISIBLE) {
        reactionMenu.animate()
                .alpha(0f)
                .setDuration(150)
                .withEndAction(() -> reactionMenu.setVisibility(View.GONE))
                .start();
    }
});

3. 核心：表情选择后的跳跃动画 #

你说BounceInterpolator效果不对，确实，它的弹跳太频繁了，Facebook的动画是先向上跳→略微放大→下落时轻微回弹，用OvershootInterpolator会更贴合这个效果，咱们组合多个动画来实现：

// 给每个表情设置点击事件，这里以爱心为例
ImageView reactionLove = findViewById(R.id.reactionLove);
ImageView reactionLike = findViewById(R.id.reactionLike);
setupReactionClick(reactionLove, likeBtn, reactionMenu, mainContainer);
setupReactionClick(reactionLike, likeBtn, reactionMenu, mainContainer);

// 把重复逻辑抽成方法，方便复用
private void setupReactionClick(ImageView reactionView, ImageView targetBtn, LinearLayout menu, FrameLayout container) {
    reactionView.setOnClickListener(v -> {
        // 先隐藏菜单
        menu.animate()
                .alpha(0f)
                .setDuration(150)
                .withEndAction(() -> menu.setVisibility(View.GONE))
                .start();

        // 创建临时ImageView播放跳跃动画（避免影响原按钮）
        ImageView tempReaction = new ImageView(this);
        tempReaction.setImageDrawable(reactionView.getDrawable());
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(48, 48);
        params.gravity = Gravity.CENTER_HORIZONTAL;
        params.topMargin = targetBtn.getTop(); // 和原点赞按钮同位置
        container.addView(tempReaction, params);

        // 组合动画：上跳+放大 → 下落+缩小+回弹
        ObjectAnimator jumpUp = ObjectAnimator.ofFloat(tempReaction, "translationY", 0f, -60f);
        jumpUp.setDuration(300);
        jumpUp.setInterpolator(new DecelerateInterpolator());

        ObjectAnimator jumpDown = ObjectAnimator.ofFloat(tempReaction, "translationY", -60f, 0f);
        jumpDown.setDuration(300);
        // Overshoot参数越大，回弹越明显，1.5是比较接近Facebook的效果
        jumpDown.setInterpolator(new OvershootInterpolator(1.5f));

        ObjectAnimator scaleUp = ObjectAnimator.ofFloat(tempReaction, "scaleX", 1f, 1.2f);
        ObjectAnimator scaleDown = ObjectAnimator.ofFloat(tempReaction, "scaleX", 1.2f, 1f);
        scaleUp.setDuration(300);
        scaleDown.setDuration(300);

        // 按顺序执行动画
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(jumpUp).with(scaleUp);
        animatorSet.play(jumpDown).with(scaleDown).after(jumpUp);

        // 动画结束后替换原按钮图标，移除临时View
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {}

            @Override
            public void onAnimationEnd(Animator animation) {
                targetBtn.setImageDrawable(reactionView.getDrawable());
                container.removeView(tempReaction);
            }

            @Override
            public void onAnimationCancel(Animator animation) {}

            @Override
            public void onAnimationRepeat(Animator animation) {}
        });

        animatorSet.start();
    });
}

4. 优化小细节 #

• 可以给表情菜单加个阴影背景，让它更有悬浮感
• 调整OvershootInterpolator的参数（比如1.2～1.8之间），找到最贴合你想要的回弹效果
• 如果想要更细腻的动画，可以给临时View加上透明度变化（比如上跳时稍微变亮，下落时恢复）
• 给主按钮加个短按直接点赞的逻辑，更符合用户习惯

内容的提问来源于stack exchange，提问作者ac297