最近在做一个富文本插件YLYRichText，里面用到了ui动画表情，效果如下：
其原理是在shader里面按照一定的速度改变uv，按顺序计算每一帧的uv偏移量和宽高比例，抓取序列帧图片里面每一帧的区域渲染出来。
代码里面有详细说明哈：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
Shader
"Yly/YlyUISeqFrameAni"
{
Properties
{
_MainTex
(
"Texture"
,
2D
)
=
"white"
{
}
_Color
(
"Tint"
,
Color
)
=
(
1
,
1
,
1
,
1
)
_RowCount
(
"RowCount"
,
float
)
=
0
_ColCount
(
"ColCount"
,
float
)
=
0
_Speed
(
"Speed"
,
float
)
=
30
//用在ui上的shader一般都需要加下面的模板测试逻辑，避免被有mask组件的父节点遮罩时没遮罩效果
_StencilComp
(
"Stencil Comparison"
,
Float
)
=
8
_Stencil
(
"Stencil ID"
,
Float
)
=
0
_StencilOp
(
"Stencil Operation"
,
Float
)
=
0
_StencilWriteMask
(
"Stencil Write Mask"
,
Float
)
=
255
_StencilReadMask
(
"Stencil Read Mask"
,
Float
)
=
255
_ColorMask
(
"Color Mask"
,
Float
)
=
15
}
SubShader
{
Tags
{
"Queue"
=
"Transparent"
//一般ui都用这种渲染队列，从远到近渲染
"IgnoreProjector"
=
"True"
//忽略投影，一般ui的shader为提高效率都会设置为true
"RenderType"
=
"Transparent"
"PreviewType"
=
"Plane"
//材质球预览模式为面片
"CanUseSpriteAtlas"
=
"True"
//设置_MainTex可以使用Sprite(2D and UI)类型的贴图
}
//用在ui上的shader一般都需要加下面的模板测试逻辑，避免被有mask组件的父节点遮罩时没遮罩效果
Stencil
{
Ref
[
_Stencil
]
Comp
[
_StencilComp
]
Pass
[
_StencilOp
]
ReadMask
[
_StencilReadMask
]
WriteMask
[
_StencilWriteMask
]
}
Cull
Off
Lighting
Off
//关掉光照，一般ui的shader为提高效率都会这样设置
//下面两句设置ZTest只根据ui节点的树层次（即在Hierarchy视图中的层次）作为依据进行测试，不根据z值
ZWrite
Off
ZTest
[
unity_GUIZTestMode
]
//
Blend
SrcAlpha
OneMinusSrcAlpha
//最终颜色值 = 输出颜色值 * 输出颜色Alpha值a + 背景颜色值 * (1 - a)，即如果有透明物品挡在前面的话，类似隔着透明玻璃看东西那种效果
ColorMask
[
_ColorMask
]
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
;
float
_Speed
;
float
_RowCount
;
float
_ColCount
;
v2f
vert
(
appdata
v
)
{
v2f
o
;
o
.
vertex
=
mul
(
UNITY_MATRIX_MVP
,
v
.
vertex
)
;
o
.
uv
=
TRANSFORM_TEX
(
v
.
uv
,
_MainTex
)
;
return
o
;
}
fixed4
frag
(
v2f
i
)
:
SV_Target
{
//从左往右，从上往下进行序列帧播放
float
totalCount
=
_ColCount *
_RowCount
;
//总帧数，例如 _RowCount = 2，_ColCount = 5，totalCount = 5 * 2 = 10
float
curIndex
=
floor
(
(
_Time
.
y *
_Speed
)
%
totalCount
)
;
//当前第几帧，例如 curIndex = 8
float2
unitSize
=
float2
(
1
/
_ColCount
,
1
/
_RowCount
)
;
//每一帧所占大小比例，例如 unitSize = float2(1/5, 1/2)
float
offsetU
=
floor
(
curIndex
%
_ColCount
)
;
//uv起点u方向偏移量，例如 offsetU = floor(8 % 5) = 3
float
offsetV
=
floor
(
(
totalCount
-
1
-
curIndex
)
/
_ColCount
)
;
//uv起点v方向偏移量，例如 offsetV = floor((10 - 1 - 8)/5) = 0
float2
originUv
=
float2
(
offsetU
,
offsetV
)
*
unitSize
;
//uv起点偏移量比例，例如 originUv = float2(3 * 1/5, 0 * 1/2) = float2(3/5, 0)
float2
newUv
=
originUv
+
i
.
uv *
unitSize
;
//newUv = uv起点偏移量比例 + uv大小比例
//例如 ui四个顶点新的uv坐标计算如下：
//左下角newUv = float2(3/5, 0) + uv(0, 0) * float2(1/5, 1/2) = float2(3/5, 0) + float2(0, 0) = float2(3/5, 0)
//左上角newUv = float2(3/5, 0) + uv(0, 1) * float2(1/5, 1/2) = float2(3/5, 0) + float2(0, 1/2) = float2(3/5, 1/2)
//右上角newUv = float2(3/5, 0) + uv(1, 1) * float2(1/5, 1/2) = float2(3/5, 0) + float2(1/5, 1/2) = float2(4/5, 1/2)
//右下角newUv = float2(3/5, 0) + uv(1, 0) * float2(1/5, 1/2) = float2(3/5, 0) + float2(1/5, 0) = float2(4/5, 0)
fixed4
col
=
tex2D
(
_MainTex
,
newUv
)
;
return
col
;
}
ENDCG
}
}
}
|
材质球只需要设置这三个参数就行啦。
把代码跑起来一边看效果一边看代码理解更快哦^_^。