一、动画效果
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();
}
}
}