Android带双阴影数字的并发缩放+透明度动画实现方案咨询

嘿，这个需求我刚好折腾过类似的，给你两个靠谱的方案，优先推荐用TextView实现，既能搞定双阴影，又完全不用担心低端设备卡顿的问题！

一、优先方案：自定义TextView实现（轻量又灵活） #

你担心TextView做不了双阴影？其实用自定义绘制或者LayerDrawable就能轻松搞定，而且比ImageView省资源太多了。

1. 实现双阴影效果 #

方式1：用LayerDrawable做容器阴影

如果阴影是围绕数字容器的，直接在drawable里写个分层背景：
创建drawable/text_shadow_bg.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 红色阴影层，轻微偏移 -->
    <item android:left="5dp" android:top="5dp">
        <shape>
            <solid android:color="#FF3333" />
            <corners android:radius="2dp" /> <!-- 可选加圆角优化视觉 -->
        </shape>
    </item>
    <!-- 青色阴影层，反方向偏移 -->
    <item android:right="5dp" android:bottom="5dp">
        <shape>
            <solid android:color="#33FFFF" />
            <corners android:radius="2dp" />
        </shape>
    </item>
    <!-- 黑色背景层，覆盖在最上层 -->
    <item android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp">
        <shape>
            <solid android:color="#000000" />
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

然后在TextView布局里设置android:background="@drawable/text_shadow_bg"，文字居中、颜色用白色即可。

方式2：自定义TextView给文字加双阴影

如果是文字本身要带双阴影，写个自定义TextView就好：

public class DoubleShadowTextView extends androidx.appcompat.widget.AppCompatTextView {
    private Paint redShadowPaint;
    private Paint cyanShadowPaint;

    public DoubleShadowTextView(Context context) {
        super(context);
        initPaints();
    }

    public DoubleShadowTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaints();
    }

    private void initPaints() {
        // 红色阴影画笔，和原文字样式保持一致
        redShadowPaint = new Paint(getPaint());
        redShadowPaint.setColor(Color.RED);
        redShadowPaint.setShadowLayer(0, 3, 3, Color.RED); // 偏移量可按需调整

        // 青色阴影画笔
        cyanShadowPaint = new Paint(getPaint());
        cyanShadowPaint.setColor(Color.CYAN);
        cyanShadowPaint.setShadowLayer(0, -3, -3, Color.CYAN);

        // 关闭原生阴影，用自定义绘制的阴影
        setShadowLayer(0, 0, 0, Color.TRANSPARENT);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 先画两个阴影层，再绘制原文字
        String text = getText().toString();
        canvas.drawText(text, getPaddingLeft() + 3, getBaseline() + 3, redShadowPaint);
        canvas.drawText(text, getPaddingLeft() - 3, getBaseline() - 3, cyanShadowPaint);
        super.onDraw(canvas);
    }
}

布局里直接使用这个自定义View，设置黑色背景、屏幕1/3大小并居中：

<com.yourpackagename.DoubleShadowTextView
    android:id="@+id/tv_number"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#000000"
    android:gravity="center"
    android:text="6"
    android:textColor="#FFFFFF"
    android:textSize="72sp"
    app:layout_constraintWidth_percent="0.33"
    app:layout_constraintHeight_percent="0.33"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

2. 实现并发的缩放+透明动画 #

两个动画要同时执行，用AnimatorSet组合属性动画就行，性能比旧的Animation框架好太多：

DoubleShadowTextView numberView = findViewById(R.id.tv_number);

// 缩放动画：100% → 1000%
ObjectAnimator scaleX = ObjectAnimator.ofFloat(numberView, "scaleX", 1f, 10f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(numberView, "scaleY", 1f, 10f);

// 透明度动画：100% → 0%
ObjectAnimator alpha = ObjectAnimator.ofFloat(numberView, "alpha", 1f, 0f);

// 组合动画，同时执行，时长1秒
AnimatorSet animSet = new AnimatorSet();
animSet.playTogether(scaleX, scaleY, alpha);
animSet.setDuration(1000);
animSet.start();

二、ImageView方案的卡顿优化（如果你坚持用这个） #

如果一定要用ImageView，只要做好这几点，低端设备也不会卡顿：

1. 用矢量图（VectorDrawable）代替位图：矢量图缩放不会失真，体积小渲染压力低，用Android Studio的Vector Asset工具生成带双阴影的数字矢量图即可。
2. 开启硬件加速：默认已开启，保险起见可在布局里加android:hardwareAccelerated="true"，或在Activity的Manifest中全局开启。
3. 用属性动画：和TextView的动画逻辑一致，用AnimatorSet组合缩放和透明动画，避免使用旧的ScaleAnimation和AlphaAnimation。

总结 #

• 优先选自定义TextView方案：资源占用少，动画流畅，双阴影效果还能灵活调整，完全没卡顿顾虑。
• 要是非得用ImageView，记得用矢量图+属性动画，能把卡顿概率降到最低。

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