很久以前看到一个应用上有个离线状态的动画，也很炫酷，也很很实用，是不? 实现看上去也很简单，弄张半透明颜色的图片来回循环播放就是了，最近刚看别人的仿斗鱼验证码的的源码，验证完后，会有一道白光闪过，也是纠结了好久，看了源码才发现人家使用的是LinearGradient
看上去和这个动画好像有点相似，于是照着代码实现了下动画，希望能给大家带来灵感
98a5df29-24a0-4cf9-8314-355fac0e5d26.jpg
4月-20-2017 17-53-53.gif
实现思路：
大神用的是path 组成的一个平行四边形，LinearGraient 渐变模拟的光照效果，然后在onDraw中不断的改变 canvas的位置的方法来移动这束光，动画很快，看上去真像那么回事，我画的是个矩形。
美中不足
（厚脸皮一下,gif是有点丑）LinearGraient 没用好，渐变按原图的效果是两边透明到中间有点颜色。不知道哪位大神能指导下
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
this.mHeight = h;
this.mWidth = w;
init();
}
private void init() {
int width = (int) TypedValue.applyDimension(1, 40.0F, this.getResources().getDisplayMetrics());
this.shaderPaint.setShader(new LinearGradient(0, 0, width, 0,
new int[] { getResources().getColor(android.R.color.transparent), getResources().getColor(R.color.colorAccent)},
null, Shader.TileMode.CLAMP));
this.shaderPath = new Path();
this.shaderPath.moveTo(0.0f,0.0f);
this.shaderPath.lineTo((float)width,0.0f);
this.shaderPath.lineTo((float)(width),(float)this.mHeight);
this.shaderPath.lineTo((float)0,(float)this.mHeight);
this.shaderPath.close();
valueAnimator = ValueAnimator.ofInt(new int[]{0,this.mWidth + width}).setDuration(2500l);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.setInterpolator(new FastOutLinearInInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mSuccessAnimOffset = ((Integer)animation.getAnimatedValue()).intValue();
invalidate();
}
});
}
public void startAnimation(){
valueAnimator.start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(this.shaderPath != null){
canvas.translate((float)this.mSuccessAnimOffset,0.0f);
canvas.drawPath(this.shaderPath,this.shaderPaint);
}
}
xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_margin="15dp"
android:layout_height="100dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_gravity="center"
android:textColor="@android:color/white"
android:gravity="center"
android:background="@drawable/react_border"
android:text="立即注册/登录 " />
<wdwd.com.androidpractice.captcha.GradientView
android:id="@+id/gradient_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical">
</wdwd.com.androidpractice.captcha.GradientView>
</RelativeLayout>
</LinearLayout>
