您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • jquery手册
  • Android实现SafeView动画效果

    时间:2017-09-28 21:54 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    • 源码类别:动画Animation
    • 源码大小:未知
    • 编码格式:gbk
    • 授权方式:免费源码
    • 运行环境:Android studio
    • 官方网址:暂无
    • 欢迎加入QQ群讨论学习
    • Android学习交流

    SafeView

    这是我模仿的一个效果,要不断的进步,就要不断的学习。主要实现的效果是一个转动的效果和一个3D触摸效果。请看效果图(录制的图片有点大):
    效果图

    知识点

    1. Canvas
    2. Paint
    3. Shader
    4. Camera(不是相机)
    5. Animator
    

    分析

    整个View看上去是有四个圆组成,内中心的圆对边上有一个小圆,圆上面还有小尾巴。其实主要的原理是使用ValueAnimator来发散一个圆周的值,也就是360度,然后每次发散后旋转画布就能得到上面的效果。

    技术点

    1. android.graphics.Camera是Android官方提供的3D效果组件,使用起来十分的简单,关键在于理解其中的x,y,z轴。(有空再写一篇Camera的使用)

    2. Sharder 阴影渲染

      1. 本View中主要使用了LinearGradient和RadialGradient。

        1. LinearGradient为线性渐变,在这里主要是用来画小圆的尾巴。

        2. RadialGradient为径向渐变,从圆心向外四周扩散,在这里是用来画中心圆的效果。

    3. Animator 自3.0后推出的属性动画,本文主要使用ValueAnimator。

    CODE

    1.初始化 && Measure

    将一些全局的值在构方法中进行初始化并且测量View的宽高等。

    
              mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setStrokeCap(Paint.Cap.ROUND);// 圆角笔触
            mLeftLinearGradient = new LinearGradient(0, 0, mCy - OFFSET, mCy - OFFSET, 0xddffffff, 0x00000000, Shader.TileMode.CLAMP);//左边的尾巴
            mRightLinearGradient = new LinearGradient(mCy - OFFSET, mCy / 2, 0, mCy / 2, 0xddffffff, 0x00000000, Shader.TileMode.CLAMP);//右边的尾巴

    2.绘制所有的背景圆

    圆的颜色是从中心开始不断的淡化的,其实这只要更改透明度就可以完成这样的效果

    
    /**
     * @param canvas
     * @param radius 直径
     * @param angle  当前角度
     */
    private void canvasCircle(Canvas canvas, int radius, float angle) {
        float percentage = angle / 360f;//当前角度百分比
        mPaint.setColor(0xddffffff);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(1.5f);
        //绘制中心圆圈
        canvas.drawCircle(radius, radius, radius - OFFSET, mPaint);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(0x22ffffff);
    
        if (aninatopValue >= 90) {
            //绘制第二圆圈
            canvas.drawCircle(radius, radius, radius - OFFSET + 40 * percentage, mPaint);
        }
        mPaint.setColor(0x11ffffff);
        if (aninatopValue >= 180) {
            //绘制第三圆圈
            canvas.drawCircle(radius, radius, radius - OFFSET + 80 * percentage, mPaint);
        }
        if (aninatopValue >= 270) {
            //绘制第四圆圈
            canvas.drawCircle(radius, radius, radius - OFFSET + 120 * percentage, mPaint);
        }
        if (aninatopValue <= 90) {// 初始状态下绘制所有的圆圈
            mPaint.setColor(0x22ffffff);
            canvas.drawCircle(radius, radius, radius - OFFSET + 40, mPaint);
            mPaint.setColor(0x11ffffff);
            canvas.drawCircle(radius, radius, radius - OFFSET + 80, mPaint);
            canvas.drawCircle(radius, radius, radius - OFFSET + 120, mPaint);
        }
        mPaint.setColor(0xff1782dd);//绘制中心圆为背景颜色
        canvas.drawCircle(radius, radius, radius - OFFSET, mPaint);
        mPaint.setColor(0x55ffffff);
        //渲染 得到中心的 凹凸效果
        RadialGradient radialGradient = new RadialGradient(radius, radius, radius - OFFSET, new int[]{0x00000000, 0xffffffff}, null, Shader.TileMode.CLAMP);
        mPaint.setShader(radialGradient);
        canvas.drawCircle(radius, radius, radius - OFFSET, mPaint);
    }
    

    效果图:

    绘制完所有的圆

    3.绘制中间的文字

    /**
     * //绘制文字
     *
     * @param canvas
     * @param radius
     */
    private void canvasText(Canvas canvas, int radius) {
        mPaint.setShader(null);//文字颜色
        mPaint.setColor(0x88ffffff);//转换字体
        mPaint.setTextSize(DensityUtils.sp2px(getContext(), 14));
        mPaint.setStrokeWidth(2);
        mPaint.setStyle(Paint.Style.STROKE);
        String safeText = "已防御次数";
        canvas.drawText(safeText, radius - mPaint.measureText(safeText) / 2, (radius - mPaint.measureText(String.valueOf(safeText)) / 2), mPaint);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(0xffffffff);
        mPaint.setTextSize(DensityUtils.sp2px(getContext(), 30));
        mPaint.setStrokeWidth(2);
        canvas.drawText(String.valueOf(safeCount), radius - mPaint.measureText(String.valueOf(safeCount)) / 2, radius + radius / 4, mPaint);
    }
    

    绘制中间的文字

    4.绘制左右两个圆点并旋转

    到这里,基本绘制就已经完成了,只要加上角度的计算和动画部分,这个View就能够动起来了。

    /**
     * 绘制旋转部分
     */
    private void canvasRotate(Canvas canvas, int radius, float angle) {
        //旋转画布
        canvas.rotate(angle, radius, radius);
        //移动坐标到中心
        canvas.translate(radius, radius);
        mPaint.setShader(null);
        //左边的圆
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(5);
        canvas.drawCircle(-radius + OFFSET, 0, 10, mPaint);
        //右边的圆
        canvas.drawCircle(radius - OFFSET, 0, 10, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(8);
        //绘制坐标的圆的尾巴
        RectF mRectF = new RectF(-radius + OFFSET, -radius + OFFSET, radius - OFFSET, radius - OFFSET);
        mPaint.setShader(mRightLinearGradient);
        canvas.drawArc(mRectF, 15, 180 - 15, false, mPaint);
        mPaint.setShader(mLeftLinearGradient);
        canvas.drawArc(mRectF, 180 + 15, 180 - 15, false, mPaint);
        //合并画布
        canvas.restore();
    }

    绘制左右两个圆点

    5.动画与角度

    /**
     * 开始
     */
    private void startLoopAnimator() {
        //发散350度
        motionAnimator = ValueAnimator.ofFloat(360f).setDuration(1500);
        //线性差值器
        motionAnimator.setInterpolator(new LinearInterpolator());
        //永远循环
        motionAnimator.setRepeatCount(ValueAnimator.INFINITE);
        motionAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                safeCount++;
                aninatopValue = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        motionAnimator.start();
    }

    加入动画后完成

    Android实现SafeView动画效果转载请注明出处http://www.codesocang.com/gn-animation/36645.html 源码搜藏网所有源码来自用户上传分享,版权问题及牵扯到商业纠纷均与源码搜藏网无关
    标签: