怎么在android上面做出根据形状来渐变的效果

Posted 2023-04-30

参考技术A <shape> android:shape=["rectangle" "oval" "line" "ring"] 其中rectagle矩形，oval椭圆，line水平直线，ring环形<shape>中子节点的常用属性：<gradient> 渐变Android:startColor 起始颜色Android:endColor 结束颜色Android:angle 渐变角度，0从左到右，90表示从下到上，数值为45的整数倍，默认为0；Android:type 渐变的样式 liner线性渐变 radial环形渐变 sweep <solid > 填充Android:color 填充的颜色<stroke >描边Android:width 描边的宽度Android:color 描边的颜色Android:dashWidth 表示'-'横线的宽度Android:dashGap 表示'-'横线之间的距离<corners >圆角Android:radius 圆角的半径 值越大角越圆Android:topRightRadius 右上圆角半径Android:bottomLeftRadius 右下圆角角半径Android:topLeftRadius 左上圆角半径Android:bottomRightRadius 左下圆角半径<padding >填充android:bottom="1/apk/res/android"> <!-- 默认时的背景图片--> <item Android:drawable="@drawable/pic1" /> <!-- 没有焦点时的背景图片 --> <item Android:state_window_focused="false" android:drawable="@drawable/pic_blue" /> <!-- 非触摸模式下获得焦点并单击时的背景图片 --> <item Android:state_focused="true" android:state_pressed="true" android:drawable= "@drawable/pic_red" /> <!-- 触摸模式下单击时的背景图片--> <item Android:state_focused="false" Android:state_pressed="true" Android:drawable="@drawable/pic_pink" /> <!--选中时的图片背景--> <item Android:state_selected="true" android:drawable="@drawable/pic_orange" /> <!--获得焦点时的图片背景--> <item Android:state_focused="true" Android:drawable="@drawable/pic_green" /> </selector>layer-list(多个shape)将多个图片或上面两种效果按照顺序层叠起来示例：<?xml version="1/apk/res/android"> <item> <bitmap android:src="@drawable/android_red" android:gravity="center" /> </item> <item android:top="10dp" android:left="10dp"> <bitmap android:src="@drawable/android_green" android:gravity="center" /> </item> <item android:top="20dp" android:left="20dp"> <bitmap android:src="@drawable/android_blue" android:gravity="center" /> </item></layer-list>感觉很像多个drawable三者可以结合使用<selector xmlns:android="schemas/apk/res/android"> <item android:state_pressed="true"> <layer-list> <item android:bottom="8.0dip"> <shape> <solid android:color="#ffaaaaaa" /> </shape> </item> <item> <shape> <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" /> <solid android:color="#ffaaaaaa" /> <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" /> </shape> </item> <item> <shape> <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" /> <solid android:color="@color/setting_item_bgcolor_press" /> </shape> </item> </layer-list> </item> <item> <layer-list> <item android:bottom="8.0dip"> <shape> <solid android:color="#ffaaaaaa" /> </shape> </item> <item> <shape> <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" /> <solid android:color="#ffaaaaaa" /> <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" /> </shape> </item> <item> <shape> <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" /> <solid android:color="@color/setting_item_bgcolor" /> </shape> </item> </layer-list> </item></selector>

svg 实现渐变圆环旋转效果

参考技术A <svg width="100%" height="50%" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <defs>

            <linearGradient id="linear1" x1="0%" y1="0%" x2="0%" y2="100%">

                <stop offset="0%" stop-color="red" stop-opacity="0.4" />

                <stop offset="100%" stop-color="red" stop-opacity="0.8" />

            </linearGradient>

            <linearGradient id="linear2" x1="0%" y1="100%" x2="0%" y2="0%">

                <stop offset="0%" stop-color="red" stop-opacity="0.4" />

                <stop offset="100%" stop-color="red" stop-opacity="0" />

            </linearGradient>

        </defs>

        <path class="tsetst" d="M 110 10 a 100 100 0 0 1 0 200" fill="none" stroke="url(#linear1)" stroke-width="10">

            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 110 110" to="360 110 110"

                    additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>

        </path>

        <path class="tsetst" d="M 110 10 a 100 100 0 0 1 0 200" transform="translate(220.1,220)rotate(180)" fill="none"

            stroke="url(#linear2)" stroke-width="10">

            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 110 110" to="360 110 110"

                additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>

        </path>

    </svg>

    <svg width="100%" height="20%" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <rect x="10" y="10" width="30" height="30" style="fill: #ff9; stroke: black;">

            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 25 25" to="360 25 25"

                additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>

        </rect>

    </svg>