流光动画效果

2019年5月25日 306次阅读 来源: 岁月留痕

很久以前看到一个应用上有个离线状态的动画，也很炫酷，也很很实用，是不? 实现看上去也很简单，弄张半透明颜色的图片来回循环播放就是了，最近刚看别人的仿斗鱼验证码的的源码，验证完后，会有一道白光闪过，也是纠结了好久，看了源码才发现人家使用的是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>
    原文作者：岁月留痕
    原文地址: https://www.jianshu.com/p/a49b177655d6
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞