Android使用LinearGradient实现两道闪光效果
2018-04-30 本文已影响0人
叛逆的青春不回头
一、动画效果
1.动效描述
2.关键点
3.实现方式
二、LinearGradient简介
三、代码功能实现
1.绘制闪光
2.两道闪光顺序出现
一、动画效果
1.动效描述
实现的动画效果主要就是，一束白光从图片或者文字上闪过，这束光由两道光组成，具体细节描述如下:
2.关键点
- 两道闪光，倾斜-330°，透明度、宽度不一样
- 两道闪光按顺序先后出现
3.实现方式
可以用FrameLayout，在背景图或文字上两个View，然后对这两个view做动画，控制时间、旋转角度等。这里主要讲怎么用LinearGradient来实现两道光闪过的动画效果。
二、LinearGradient简介
讲实现之前先认识下主角LinearGradient。LinearGradient作用是实现某一区域内颜色的线性渐变效果，网上相关资料也很多，这里就简单介绍下常用的构造函数：
public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,Shader.TileMode tile)
注：Android中计算x，y坐标都是以屏幕左上角为原点，向右为x+，向下为y+
- float x0:渐变起始点x坐标
- float y0:渐变起始点y坐标
- float x1:渐变结束点x坐标
- float y1:渐变结束点y坐标
- int[] colors:颜色 的int 数组
- float[] positions: 相对位置的颜色数组，可为null，若为null，颜色沿渐变线均匀分布
- Shader.TileMode tile: 渲染器平铺模式
Shader.TileMode有3种参数可供选择，分别为CLAMP、REPEAT和MIRROR：
- CLAMP的作用是如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色
- REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图
- MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图
代码功能实现
1.绘制闪光
闪光的绘制由LinearGradient完成，通过改变其构造函数各个参数值，就能绘制出不同的光效果
（1）闪光倾斜-330°
调节渐变闪光的倾斜角度，需用LinearGradient构造函数中的x0，y0，x1，y1参数，即调节渐变的起始点，更多用法可参考Android中的LinearGradient。所以我们将这个4个参数设置成如下：
（2）两道闪光
这里主要用到LinearGradient构造函数中的colors，positions参数。colors参数很好理解，就是一组颜色值；positions的释义是“相对位置、权重”，看完释义是不是还是没有太明白(/□＼*)，来直接上代码和效果图。
LinearGradient mGradient = new LinearGradient(0, 0, mViewWidth / 2, mViewHeight,
new int[]{0x00ffffff, 0x73ffffff, 0x00ffffff, 0x99ffffff, 0x00ffffff},
new float[]{0.2f, 0.35f, 0.45f, 0.5f, 0.8f},
Shader.TileMode.CLAMP);
上面代码可以这么理解，它定义了一组渐变的数值是{ 0x00ffffff, 0x73ffffff, 0x00ffffff, 0x99ffffff, 0x00ffffff}，这组数值分别在相对应的0.2f, 0.35f, 0.45f, 0.5f, 0.8f中显示：
- 第一道闪光颜色有效值是0.35f位置的35%白色，0.35f前后位置的颜色值都为透明，调节这两个透明颜色的position值就可以调节第一道闪光的宽度；
- 第二道闪光颜色有效值是0.5f位置的50%白色，同理0.5f前后位置颜色为透明，调节第二道闪光宽度就可以调节这两个position值；
- 中间0.45f位置设为透明，也就把第一道光和第二道光隔开了。
2.两道闪光顺序出现
现在两道光用LinearGradient一起绘制出来了，要怎样实现顺序出现呢？这里配合Matrix、属性动画ValueAnimator来控制，先看核心代码：
private void initGradientAnimator() {
valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(5000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float v = (Float) animation.getAnimatedValue();
//❶ 改变每次动画的平移x、y值
mTranslateX = 4 * mViewWidth * v - mViewWidth * 2;
mTranslateY = mViewHeight * v;
//❷ mGradientMatrix为变换矩阵，设置矩阵x、y平移量
if (mGradientMatrix != null) {
mGradientMatrix.setTranslate(mTranslateX, mTranslateY);
}
//❸ 为线性渐变mGradient设置matrix
if (mGradient != null) {
mGradient.setLocalMatrix(mGradientMatrix);
}
//❹ 重绘
invalidate();
}
});
}
重点看下第❶步怎么移动的，每次根据当前的动画属性值设置x、y平移量，x的范围是[-2mViewWidth, 2mViewWidth]，y的范围是范围是[0, mViewHeight]，如下图所示(x轴)。也就是两道闪光从不可见到可见，调节valueAnimator的duration，或者更改x、y变化方式就能控制两道闪光的出场顺序了。
注：上面方式实现的闪光动效和文章开头列的条件并不是百分百一样，大致效果相同。
最后，自定义LightningView的的所有代码：
public class LightningView extends View {
private Shader mGradient;
private Matrix mGradientMatrix;
private Paint mPaint;
private int mViewWidth = 0, mViewHeight = 0;
private float mTranslateX = 0, mTranslateY = 0;
private boolean mAnimating = false;
private Rect rect;
private ValueAnimator valueAnimator;
private boolean autoRun = true; //是否自动运行动画
public LightningView(Context context) {
super(context);
init();
}
public LightningView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public LightningView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
rect = new Rect();
mPaint = new Paint();
initGradientAnimator();
}
public void setAutoRun(boolean autoRun) {
this.autoRun = autoRun;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
rect.set(0, 0, getWidth(), getHeight());
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (mViewWidth == 0) {
mViewWidth = getWidth();
mViewHeight = getHeight();
if (mViewWidth > 0) {
//亮光闪过
mGradient = new LinearGradient(0, 0, mViewWidth / 2, mViewHeight,
new int[]{0x00ffffff, 0x73ffffff, 0x00ffffff, 0x99ffffff, 0x00ffffff},
new float[]{0.2f, 0.35f, 0.5f, 0.7f, 1},
Shader.TileMode.CLAMP);
mPaint.setShader(mGradient);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN));
mGradientMatrix = new Matrix();
mGradientMatrix.setTranslate(-2 * mViewWidth, mViewHeight);
mGradient.setLocalMatrix(mGradientMatrix);
rect.set(0, 0, w, h);
}
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mAnimating && mGradientMatrix != null) {
canvas.drawRect(rect, mPaint);
}
}
private void initGradientAnimator() {
valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(5000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float v = (Float) animation.getAnimatedValue();
//❶ 改变每次动画的平移x、y值，范围是[-2mViewWidth, 2mViewWidth]
mTranslateX = 4 * mViewWidth * v - mViewWidth * 2;
mTranslateY = mViewHeight * v;
//❷ 平移matrix, 设置平移量
if (mGradientMatrix != null) {
mGradientMatrix.setTranslate(mTranslateX, mTranslateY);
}
//❸ 设置线性变化的matrix
if (mGradient != null) {
mGradient.setLocalMatrix(mGradientMatrix);
}
//❹ 重绘
invalidate();
}
});
if (autoRun) {
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
getViewTreeObserver().removeGlobalOnLayoutListener(this);
mAnimating = true;
if (valueAnimator != null) {
valueAnimator.start();
}
}
});
}
}
//停止动画
public void stopAnimation() {
if (mAnimating && valueAnimator != null) {
mAnimating = false;
valueAnimator.cancel();
invalidate();
}
}
//开始动画
public void startAnimation() {
if (!mAnimating && valueAnimator != null) {
mAnimating = true;
valueAnimator.start();
}
}
}
