css color之線性linear-gradient()函數(shù)
CSS linear-gradient() 函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。其結(jié)果屬于<gradient>數(shù)據(jù)類型，是一種特別的<image>數(shù)據(jù)類型。
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線性漸變?nèi)绾问褂貌庞行Ч?求源碼
linear-gradient這個(gè)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參數(shù)是什么樣子的？
1、語法
2、參數(shù)
第一個(gè)參數(shù):指定漸變方向，可以用“角度”的關(guān)鍵詞或“英文”來表示：
第一個(gè)參數(shù)省略時(shí)，默認(rèn)為“180deg”，等同于“tobottom”。
第二個(gè)和第三個(gè)參數(shù)，表示顏色的起始點(diǎn)和結(jié)束點(diǎn)，可以有多個(gè)顏色值。
例如：
background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);
該屬性已經(jīng)得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。
ios 怎么做到安卓的lineargradient效果
android 使用LinearGradient進(jìn)行字體漸變的效果，如下圖顯示：
就像上面的顯示效果一樣一束白光閃過，這種效果主要還是使用了LinearGradient類來進(jìn)行的
LinearGradient也稱作線性渲染，LinearGradient的作用是實(shí)現(xiàn)某一區(qū)域內(nèi)顏色的線性漸變效果
它有兩個(gè)構(gòu)造函數(shù)
代碼如下 復(fù)制代碼
public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)
其中，參數(shù)x0表示漸變的起始點(diǎn)x坐標(biāo)；參數(shù)y0表示漸變的起始點(diǎn)y坐標(biāo)；參數(shù)x1表示漸變的終點(diǎn)x坐標(biāo)；參數(shù)y1表示漸變的終點(diǎn)y坐標(biāo) ；color0表示漸變開始顏色；color1表示漸變結(jié)束顏色；參數(shù)tile表示平鋪方式。
Shader.TileMode有3種參數(shù)可供選擇，分別為CLAMP、REPEAT和MIRROR：
CLAMP的作用是如果渲染器超出原始邊界范圍，則會(huì)復(fù)制邊緣顏色對超出范圍的區(qū)域進(jìn)行著色
REPEAT的作用是在橫向和縱向上以平鋪的形式重復(fù)渲染位圖
MIRROR的作用是在橫向和縱向上以鏡像的方式重復(fù)渲染位圖
public LinearGradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile);
其中，參數(shù)x0表示漸變的起始點(diǎn)x坐標(biāo)；參數(shù)y0表示漸變的起始點(diǎn)y坐標(biāo)；參數(shù)x1表示漸變的終點(diǎn)x坐標(biāo)；參數(shù)y1表示漸變的終點(diǎn)y坐標(biāo)；參數(shù)colors表示漸變的顏色數(shù)組；參數(shù)positions用來指定顏色數(shù)組的相對位置；參數(shù)tile表示平鋪方式。通常，參數(shù)positions設(shè)為null，表示顏色數(shù)組以斜坡線的形式均勻分布。
下面這段代碼是直接從git上面的項(xiàng)目拷貝下來的
代碼如下 復(fù)制代碼
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);
}
}
}
這段代碼主要是分兩步：一個(gè)是在onSizeChanged()即大小發(fā)生改變的時(shí)候，另外一個(gè)是onDraw()主要是用來做動(dòng)畫的效果的，
