自定义圆形中心扩散效果

本文介绍了如何实现一个自定义的圆形中心扩散加震动效果。通过XML布局和Java代码实现,详细讲解了在项目中遇到的问题及解决方案,包括使用RelativeLayout包裹自定义控件和ImageView以实现动效,并通过双线程解决动画导致的绘制异常问题。
摘要由CSDN通过智能技术生成

最近因为项目需求,需要写一个自定义的扩散加震动效果,废了一下午的时间,终于给他搞出来了,结果第二天需求就改掉了..

不说那么多题外话了,直接撸代码~

首先是XML文件:

<com.example.XXXXX.sxt.view.customview.DiffuseView
     android:id="@+id/customCall"
     android:layout_width="@dimen/x120"
     android:layout_height="@dimen/x120"
     app:diffuse_coreRadius="100"
     app:diffuse_maxWidth="80"
     app:diffuse_width="10"
     android:layout_centerInParent="true"/>

属性&方法

属性名 java方法 作用
diffuse_color setColor(int colorId) 设置扩散圆颜色
diffuse_coreColor setCoreColor(int colorId) 设置中心圆颜色
diffuse_coreImage setCoreImage(int imageId) 设置中心圆图片
diffuse_coreRadius setCoreRadius(int radius) 设置中心圆半径
diffuse_maxWidth setMaxWidth(int maxWidth) 设置最大扩散宽度
diffuse_width setDiffuseWidth(int width) 设置扩散圆宽度,值越小越宽

Java代码(直接拷贝成一个类就OK~):

/**
 * Created by HXY on 2018/9/25.
 * Be used for : 首页电话按钮背景view,自定义扩散背景
 */

public class DiffuseView extends View {
    /** 扩散圆圈颜色 */
    private int mColor = getResources().getColor(R.color.colorPink);
    /** 圆圈中心颜色 */
    private int mCoreColor = getResources().getColor(R.color.colorPink);
    /** 圆圈中心图片 */
    private Bitmap mBitmap;
    /** 中心圆半径 */
    private float mCoreRadius = 150;
    /** 扩散圆宽度 */
    private int mDiffuseWidth = 3;
    /** 最大宽度 */
    private Integer mMaxWidth = 255;
    /** 是否正在扩散中 */
    private boolean mIsDiffuse = false;
    // 透
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
很抱歉,作为AI语言模型,我无法提供您所需的代码。但是,我可以为您提供一些关于创建基于sprite的圆形扩散shader的技巧和思路。 首先,您需要了解一些基本概念: - Shader:一种编程语言,用于在图像渲染过程控制像素的颜色和其他属性。 - Sprite:在游戏开发,一个简单的图形,可以在屏幕上进行渲染,通常用于表示游戏的角色、对象和背景。Sprite通常是由一张图片生成的,可以根据需要进行缩放、旋转和移动。 - 圆形扩散:一种特殊的视觉效果,可以让一个物体在其周围产生一个圆形扩散效果,看起来像是物体在发光或者散发一种能量。 接下来,您可以使用Unity的ShaderLab编写一个基本的sprite shader,然后添加圆形扩散效果。下面是一个简单的sprite shader示例: ``` Shader "Custom/Sprite" { Properties { _MainTex ("Texture", 2D) = "white" {} _Color ("Color", Color) = (1,1,1,1) } SubShader { Tags {"Queue"="Transparent" "RenderType"="Transparent"} LOD 100 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; float4 _MainTex_ST; float4 _Color; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv) * _Color; return col; } ENDCG } } } ``` 这个shader仅仅是将sprite渲染为一张纹理,并且可以设置颜色。接下来,您可以添加圆形扩散效果。 首先,您需要通过修改vertex shader来将sprite渲染为一个圆形。下面是一个简单的vertex shader示例: ``` v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; o.vertex.xy *= 2.0 * _Radius; return o; } ``` 这个vertex shader将sprite的顶点坐标进行了缩放,使其成为一个圆形。_Radius是一个自定义的shader变量,用于控制圆形的大小。 接下来,您需要通过修改fragment shader来添加圆形扩散效果。下面是一个简单的fragment shader示例: ``` fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv) * _Color; float dist = length(i.vertex.xy); float alpha = smoothstep(_Radius - _Softness, _Radius, dist); col.a *= alpha; return col; } ``` 这个fragment shader使用了smoothstep函数来创建一个平滑的渐变效果,并通过调整alpha值来控制圆形扩散的强度。_Softness是一个自定义的shader变量,用于控制圆形扩散的柔和程度。 最后,您需要将shader应用到一个sprite上,然后通过调整_Radius和_Softness变量来控制圆形扩散的大小和柔和程度。下面是一个示例: ``` SpriteRenderer spriteRenderer; Material material = new Material(Shader.Find("Custom/Sprite")); spriteRenderer.material = material; material.SetFloat("_Radius", 0.5f); material.SetFloat("_Softness", 0.1f); ``` 通过以上步骤,您可以创建一个基于sprite的圆形扩散shader。当然,实际的实现可能需要更多的调整和优化,但是这个示例可以为您提供一个基本的思路和技巧。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WWGtest

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值