css color之线性linear-gradient()函数
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
where <side-or-corner> = [ left | right ] || [ top | bottom ]
and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
and <linear-color-stop> = <color> [ <color-stop-length> ]?
and <color-stop-length> = [ <percentage> | <length> ]{1,2}
and <color-hint> = [ <percentage>
栗子：
div {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
css3 linear-gradient线性渐变如何使用才有效果?求源码
linear-gradient这个CSS3的线性渐变属性，目前浏览器还没同一，需要加前缀，例如：
<!doctypehtml>
<htmllang="en">
<head>
<metachart="UTF-8">
<title>Document</title>
</head>
<style>
#div1{
width:200px;
height:100px;
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,050%,100%50%,from(#ace),to(#f96));/*Oldgradientforwebkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*newgradientforWebkit*/
background:-o-linear-gradient(left,#ace,#f96);/*Opera11*/
}
</style>
<body>
<divid="div1"></div>
</body>
</html>
你测试一下，基本上除了比较老的IE以外，都能显示了。
CSS3里面的线性渐变：linear-gradient参数是什么样子的？
1、语法
2、参数
第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：
第一个参数省略时，默认为“180deg”，等同于“tobottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
例如：
background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);
该属性已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
ios 怎么做到安卓的lineargradient效果
android 使用LinearGradient进行字体渐变的效果，如下图显示：
就像上面的显示效果一样一束白光闪过，这种效果主要还是使用了LinearGradient类来进行的
LinearGradient也称作线性渲染，LinearGradient的作用是实现某一区域内颜色的线性渐变效果
它有两个构造函数
代码如下 复制代码
public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)
其中，参数x0表示渐变的起始点x坐标；参数y0表示渐变的起始点y坐标；参数x1表示渐变的终点x坐标；参数y1表示渐变的终点y坐标 ；color0表示渐变开始颜色；color1表示渐变结束颜色；参数tile表示平铺方式。
Shader.TileMode有3种参数可供选择，分别为CLAMP、REPEAT和MIRROR：
CLAMP的作用是如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色
REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图
MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图
public LinearGradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile);
其中，参数x0表示渐变的起始点x坐标；参数y0表示渐变的起始点y坐标；参数x1表示渐变的终点x坐标；参数y1表示渐变的终点y坐标；参数colors表示渐变的颜色数组；参数positions用来指定颜色数组的相对位置；参数tile表示平铺方式。通常，参数positions设为null，表示颜色数组以斜坡线的形式均匀分布。
下面这段代码是直接从git上面的项目拷贝下来的
代码如下 复制代码
package com.example.shimmer;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.TextView;
public class MyTextView extends TextView {
private LinearGradient mLinearGradient;
private Matrix mGradientMatrix;
private Paint mPaint;
private int mViewWidth = 0;
private int mTranslate = 0;
private boolean mAnimating = true;
public MyTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (mViewWidth == 0) {
mViewWidth = getMeasuredWidth();
if (mViewWidth > 0) {
mPaint = getPaint();
mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0,
new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP);
mPaint.tShader(mLinearGradient);
mGradientMatrix = new Matrix();
}
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mAnimating && mGradientMatrix != null) {
mTranslate += mViewWidth / 10;
if (mTranslate > 2 * mViewWidth) {
mTranslate = -mViewWidth;
}
mGradientMatrix.tTranslate(mTranslate, 0);
mLinearGradient.tLocalMatrix(mGradientMatrix);
postInvalidateDelayed(50);
}
}
}
这段代码主要是分两步：一个是在onSizeChanged()即大小发生改变的时候，另外一个是onDraw()主要是用来做动画的效果的，
