简易血槽残影设计方案（使用协程）

　　今天看了段DNF视频，有发现到血条变化效果是这样的：
 
 
　　这里为了突出Boss受到的伤害之大，也就是玩家的伤害之高，以至于Boss的血条变化会出现残影效果。
　　那么，就简单使用协程来实现了一下这种效果：
　　
 
　　实现思路也蛮简单的：就是在Canvas下创建两个Slider，分别是Slider和Slider01，先将每个Slider中的Fill Area下的Fill拖到其父项下，然后除了Background、Fill，其余子项全部删除，再将Slider01放入Slider中。
　　这里，就把Slider01作为Slider的残影。
　　因为想最快写出效果，所以就直接用了协程来实现的，当然，如果在实际项目中有很多需要优化的地方。
　　把脚本绑定到最外边的Slider组件下。
　　[锤子猫原创代码，转载请标注来源]
　　测试代码如下：

1. 1 using System.Collections;
2. 2 using System.Collections.Generic;
3. 3 using UnityEngine;
4. 4 using UnityEngine.UI;
5. 5
6. 6 public class HealControl : MonoBehaviour
7. 7 {
8. 8     public float curHeal; //当前血量
9. 9
10. 10     public float allHeal; //总血量
11. 11
12. 12     public float reHeal; //增量
13. 13
14. 14     public float reTime = 0.01f; //递减时间
15. 15
16. 16     public float[] tempData; //临时数据组
17. 17
18. 18     public Slider fatherSlider, sonSlider; //父子血条
19. 19
20. 20     // Start is called before the first frame update
21. 21     void Start()
22. 22     {
23. 23         tempData = new float[2] { 0f, 0f }; //初始化 0：旧父血条值  1：子血条值
24. 24
25. 25         fatherSlider = this.GetComponent<Slider>(); //获取父血条组件
26. 26         sonSlider = this.GetComponent<Slider>().transform.GetChild(1).GetComponent<Slider>(); //获取子血条组件
27. 27
28. 28         tempData[0] = curHeal; //给旧父血条值赋初值
29. 29         tempData[1] = tempData[0]; //给子血条值赋初值
30. 30
31. 31         fatherSlider.value = curHeal / allHeal; //计算血量值后赋给血条
32. 32         sonSlider.value = tempData[0] / allHeal; //计算子血量值后赋给血条
33. 33     }
34. 34
35. 35     // Update is called once per frame
36. 36     void Update()
37. 37     {
38. 38         Blood0peration();
39. 39     }
40. 40
41. 41     public void Blood0peration() //血量值换算成血条值
42. 42     {
43. 43         if (curHeal < tempData[0] && Mathf.Abs(curHeal - tempData[0]) > 0.1f) //判断父血量发生变化
44. 44         {
45. 45             StartCoroutine(TimerForFBloodReduce());
46. 46         }
47. 47         else if (curHeal > tempData[0] && Mathf.Abs(curHeal - tempData[0]) > 0.1f)
48. 48         {
49. 49             StartCoroutine(TimerForFBloodAdd());
50. 50         }
51. 51         else
52. 52         {
53. 53             StopCoroutine(TimerForFBloodReduce());
54. 54             StopCoroutine(TimerForFBloodAdd());
55. 55             tempData[0] = curHeal;
56. 56         }
57. 57
58. 58         if (curHeal < tempData[1] && Mathf.Abs(curHeal - tempData[1]) > 0.1f) //判断子血量发生变化
59. 59         {
60. 60             StartCoroutine(TimerForSBloodReduce());
61. 61         }
62. 62         else
63. 63         {
64. 64             StopCoroutine(TimerForSBloodReduce());
65. 65             tempData[1] = curHeal;
66. 66         }
67. 67     }
68. 68
69. 69     private IEnumerator TimerForFBloodReduce()
70. 70     {
71. 71         while (Mathf.Abs(curHeal - tempData[0]) > 0.1f)
72. 72         {
73. 73             tempData[0] -= reHeal;
74. 74             fatherSlider.value = tempData[0] / allHeal;
75. 75             yield return new WaitForSeconds(reTime);
76. 76         }
77. 77     } //父血条计算定时器-增
78. 78
79. 79     private IEnumerator TimerForFBloodAdd()
80. 80     {
81. 81         while (Mathf.Abs(curHeal - tempData[0]) > 0.1f)
82. 82         {
83. 83             tempData[0] += reHeal;
84. 84             fatherSlider.value = tempData[0] / allHeal;
85. 85             yield return new WaitForSeconds(reTime);
86. 86         }
87. 87     } //父血条计算定时器-减
88. 88
89. 89     private IEnumerator TimerForSBloodReduce()
90. 90     {
91. 91         while (Mathf.Abs(curHeal - tempData[1]) > 0.1f)
92. 92         {
93. 93             tempData[1] -= reHeal;
94. 94             sonSlider.value = tempData[1] / allHeal;
95. 95             yield return new WaitForSeconds(reTime + 0.02f);
96. 96         }
97. 97     } //子血条计算定时器-减
98. 98 }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！