Unity 2017 文字颜色渐变

 1 using System.Collections;
 2 using System.Collections.Generic;
 3 using UnityEngine;
 4 using UnityEngine.UI;
 5
 6 [AddComponentMenu("UI/Effects/GradientText")]
 7 public class GradientText : BaseMeshEffect
 8 {
 9     [SerializeField]
10     private Color32 topColor = Color.white;
11
12     [SerializeField]
13     private Color32 bottomColor = Color.black;
14
15     public override void ModifyMesh(VertexHelper vh)
16     {
17         if (!IsActive() || vh.currentVertCount == 0)
18             return;
19         List<UIVertex> vertices =  new List<UIVertex>();
20         vh.GetUIVertexStream(vertices);
21         float bottomY = vertices[0].position.y;
22         float topY = vertices[0].position.y;
23         for (int i = 1; i < vertices.Count; i++ )
24         {
25            if( vertices[i].position.y > topY) {
26                 topY = vertices[i].position.y;
27             }
28             else if (vertices[i].position.y < bottomY)
29             {
30                 bottomY = vertices[i].position.y;
31             }
32         }
33         float uiElementHeight = topY- bottomY;
34         UIVertex v = new UIVertex();
35         for (int i = 0; i<vh.currentVertCount; i++)
36         {
37         vh.PopulateUIVertex(ref v, i);
38         v.color = Color32.Lerp(bottomColor, topColor, (v.position.y - bottomY) / uiElementHeight);
39         vh.SetUIVertex(v, i);
40         }
41     }
42 }

时间: 2024-08-30 06:25:11

Unity 2017 文字颜色渐变的相关文章

CSS 实现背景色渐变和文字颜色渐变

1. 背景色渐变 A . linear-gradient:用线性渐变创建图像. 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 下述值用来表示渐变的方向,可以使用角度或者关键字来设置: <angle>:用角度值指定渐变的方向(或角度). to left: 设置渐变为

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-text-effect.html .这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击.文字选择等事件. 改进的方法可以使用 CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片.下面是实现效果示例,相比以

前端基础学习-css文字颜色渐变的3种实现

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法,使用 background-cli. tex

css3文字颜色渐变动画

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>

css文字颜色渐变及阴影效果

参考文档 .desc { font-size: 36px; font-weight: 700; text-shadow: 0px 3px 6px #e35f0b; color: #fff; display: inline-block; position: relative; } .desc::after { position: absolute; left: 0; top: 0; content: attr(data-text); color: #fcf4ae; -webkit-mask-ima

文字颜色渐变效果

h3{ font-size: 16px; font-weight: 500; display: inline-block; color: #d6a736; background-image: -webkit-linear-gradient(-45deg,#fae2a7 0%, #d6a736 40%, #d6a736 60%,#fae2a7 100%); background-image: linear-gradient(-45deg,#fae2a7 0%, #d6a736 40%, #d6a7

iOS 动画绘制线条颜色渐变的折线图

效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分

一款纯css3实现的颜色渐变按钮

之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <a target="_blank" class="btn green" href="http://www.w2bc.com/&q

iOS实现一个颜色渐变的弧形进度条

在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常简单和方便的实现环形进度条效果,而且还可以高效的保证动画效果,无论是前进还是后退.文字水平比较有限,就多用代码说话. 1.先来一个结果 80%的状态: 99%的状态: 2.需要用到的宏: #define degreesToRadians(x) (M_PI*(x)/180.0) //把角度转换成PI的