如何将Figma锥形（径向）渐变正确转换为可用的Android Vector Drawable？

Android Vector Drawable 实现多渐变叠加效果方案 #

你遇到的转换失效问题核心是Android原生Vector Drawable对CSS的圆锥渐变、多图层混合模式存在版本限制，以下是可直接使用的实现方案：

版本兼容说明 #

• API 24及以上支持sweep类型渐变（对应CSS的conic-gradient）
• API 29及以上支持图层混合模式blendMode属性
• 低于上述版本建议使用预合成图片方案保证效果统一

API 24+ 高还原度实现代码 #

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="312dp"
    android:height="474dp"
    android:viewportWidth="312"
    android:viewportHeight="474"
    android:alpha="0.5">

    <!-- 底层彩色线性渐变 -->
    <path android:pathData="M8,0h296a8,8 0 0 1 8,8v458a8,8 0 0 1 -8,8H8a8,8 0 0 1 -8,-8V8a8,8 0 0 1 8,-8z">
        <gradient
            android:type="linear"
            android:angle="151.68"
            android:startX="0"
            android:startY="0"
            android:endX="312"
            android:endY="474">
            <item android:offset="0.0054" android:color="#1DC4BD" />
            <item android:offset="0.1764" android:color="#F9F042" android:alpha="0.981" />
            <item android:offset="0.425" android:color="#F8A5FD" android:alpha="0.893" />
            <item android:offset="0.6011" android:color="#A2ACF9" android:alpha="0.952" />
            <item android:offset="0.8394" android:color="#3CF493" android:alpha="0.59" />
            <item android:offset="1.0" android:color="#3DBEF0" />
        </gradient>
    </path>

    <!-- 中层第一个圆锥渐变，混合模式difference -->
    <path 
        android:pathData="M8,0h296a8,8 0 0 1 8,8v458a8,8 0 0 1 -8,8H8a8,8 0 0 1 -8,-8V8a8,8 0 0 1 8,-8z"
        android:blendMode="difference">
        <gradient
            android:type="sweep"
            android:centerX="156"
            android:centerY="237"
            android:startAngle="180">
            <item android:offset="0.027" android:color="#FFFFFF" />
            <item android:offset="0.102" android:color="#000000" />
            <item android:offset="0.216" android:color="#FFFFFF" />
            <item android:offset="0.339" android:color="#000000" />
            <item android:offset="0.448" android:color="#FFFFFF" />
            <item android:offset="0.563" android:color="#000000" />
            <item android:offset="0.682" android:color="#FFFFFF" />
            <item android:offset="0.844" android:color="#000000" />
            <item android:offset="0.973" android:color="#FFFFFF" />
            <item android:offset="1.0" android:color="#000000" />
        </gradient>
    </path>

    <!-- 顶层第二个圆锥渐变，混合模式screen -->
    <path 
        android:pathData="M8,0h296a8,8 0 0 1 8,8v458a8,8 0 0 1 -8,8H8a8,8 0 0 1 -8,-8V8a8,8 0 0 1 8,-8z"
        android:blendMode="screen">
        <gradient
            android:type="sweep"
            android:centerX="156"
            android:centerY="237"
            android:startAngle="180">
            <item android:offset="0.053" android:color="#000000" />
            <item android:offset="0.219" android:color="#FFFFFF" />
            <item android:offset="0.325" android:color="#000000" />
            <item android:offset="0.441" android:color="#FFFFFF" />
            <item android:offset="0.602" android:color="#000000" />
            <item android:offset="0.729" android:color="#FFFFFF" />
            <item android:offset="0.853" android:color="#000000" />
            <item android:offset="0.938" android:color="#FFFFFF" />
            <item android:offset="1.0" android:color="#000000" />
        </gradient>
    </path>
</vector>

全版本兼容方案 #

如果需要覆盖更低版本系统，可先将三个渐变图层在Figma中合并导出为带透明度的PNG/WebP资源，再通过如下xml实现圆角效果：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="8dp" />
    <solid android:color="@android:color/transparent" />
    <stroke android:width="0dp" android:color="@android:color/transparent" />
</shape>

将上述xml作为View的foreground属性，同时给View设置背景为你导出的渐变图片即可实现效果。

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