自定义仿扣扣水加载动画

转载 2017年01月02日 20:58:57

效果图:


自定义类:

public class WaterDropLoadingView extends View {

    //画笔
    private Paint mPaint;

    private Path mPath, trianglePath1, trianglePath2;
    //屏幕宽高 密度dpi
    private float sWidth, sHeight, sDensityDpi;
    //下面圆的半径 和 进度三角形边长
    private float mRaduis, triangleR;
    //进度弧形的其实角度和旋转角度
    private float startAngle, sweepAngle;
    //圆的圆点坐标
    private float pointerX, pointerY;
    //上部分的三角形三个顶点坐标  1 顶  2 左 3 右
    private float mTriangleX1, mTriangleX2, mTriangleX3, mTriangleY1, mTriangleY2, mTriangleY3;
    //控制三角形进度的高度值
    private float triangleHeight;
    //进度弧形的外切矩形
    private RectF progressRectF;

    public WaterDropLoadingView(Context context) {
        this(context, null);
    }

    public WaterDropLoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaterDropLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //关闭硬件加速
        setLayerType(LAYER_TYPE_SOFTWARE, null);

        //设备宽高和dpi密度
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        sWidth = displayMetrics.widthPixels;
        sHeight = displayMetrics.heightPixels;
        //320为我的测试机dpi密度,以次绘制视图
        sDensityDpi = displayMetrics.densityDpi / 320;

        //圆心坐标赋值
        pointerX = pointerY = Math.min(sWidth, sHeight) / 2;
        //半径和三角形边长赋值
        mRaduis = pointerX / 5;
        //赋值顶点坐标
        mTriangleX1 = pointerX;
        mTriangleY1 = (float) (pointerY - 1.5 * mRaduis * Math.sin(Math.PI / 3));
        mTriangleX2 = (float) (pointerX - mRaduis * Math.cos(Math.PI / 3));
        mTriangleX3 = (float) (pointerX + mRaduis * Math.cos(Math.PI / 3));
        mTriangleY2 = mTriangleY3 = (float) (pointerY - mRaduis * Math.sin(Math.PI / 3));

        //初始化画笔 去锯齿
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //初始化
        mPath = new Path();
        trianglePath1 = new Path();
        trianglePath2 = new Path();
        // 初始化速度范围的2个扇形外切矩形
        progressRectF = new RectF(pointerX - mRaduis + 8 * sDensityDpi, pointerY - mRaduis + 8 * sDensityDpi,
                pointerX + mRaduis - 8 * sDensityDpi, pointerY + mRaduis - 8 * sDensityDpi);
        //初始化起始角度
        startAngle = 90;

        //计算进度三角形边长
//        triangleR = (float) (8 * Math.sqrt(3) / 3);
        triangleR = mRaduis - 8 * sDensityDpi;
        Log.e("triangleR===", triangleR + "");

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawColor(Color.WHITE);

        //设置画笔颜色和样式
        mPaint.setColor(0xFFDEE0DD);
        mPaint.setStyle(Paint.Style.FILL);
        //绘制圆
        canvas.drawCircle(pointerX, pointerY, mRaduis, mPaint);
        //绘制顶部三角形
        mPath.moveTo(mTriangleX1, mTriangleY1);
        mPath.lineTo(mTriangleX2, mTriangleY2);
        mPath.lineTo(mTriangleX3, mTriangleY3);
        //lineto起点
        mPath.close();
        canvas.drawPath(mPath, mPaint);


        //修改画笔颜色
        mPaint.setColor(0xFF13B5E8);
        startAngle -= 5;
        sweepAngle += 10;

        if (sweepAngle < 310) {
            canvas.drawArc(progressRectF, startAngle, sweepAngle, false, mPaint);
            //100毫秒后重绘
           postInvalidateDelayed(100);
        } else {
            canvas.drawArc(progressRectF, -90, 360, false, mPaint);

            trianglePath1.moveTo(mTriangleX1, (float) (mTriangleY1 + mRaduis * Math.sin(Math.PI / 3) /3 ));
            trianglePath1.lineTo(mTriangleX2 + 2 * (mRaduis / 2 - triangleR / 2), mTriangleY2 + mRaduis / 2 - triangleR / 2);
            trianglePath1.lineTo(mTriangleX3 - 2 * (mRaduis / 2 - triangleR / 2), mTriangleY3 + mRaduis / 2 - triangleR / 2);
            trianglePath1.close();
            canvas.drawPath(trianglePath1, mPaint);

                startAngle = 90;
                sweepAngle = 0;
                triangleHeight = 0;
            //500毫秒后重绘
            postInvalidateDelayed(500);
        }
        
    }
}

想看例子的,点击下载


sdk manager更新失败怎么解决?

1.启动 Android SDK Manager ;
2.打开主界面,依次选择「Tools」、「Options...」,弹出『Android SDK Manager - Settings』窗口;
3.在『Android SDK Manager - Settings』窗口中,在「HTTP Proxy Server」和「HTTP Proxy Port」输入框内填入mirrors.neusoft.edu.cn和80,并且选中「Force https://... sources to be fetched using http://...」复选框;4.设置完成后单击「Close」按钮关闭『Android SDK Manager - Settings』窗口返回到主界面;
5.依次选择「Packages」、「Reload」。


仿美团加载动画效果

这两天在用美团的时候,平时中没有注意的一个小细节,今天注意到了,就是在进入新页面还没有加载数据的时候,我们都可以看到一个小人像是在跑步,于是我非常好奇这个东西是怎么做的呢?于是乎我就把它的apk下载下...
  • u012417984
  • u012417984
  • 2015年11月20日 23:06
  • 2682

制作水波加载动画

本来想写写有点意思的东西的,哈哈,上篇文章说的,以后再写吧。今天先介绍一下一个水波加载动画,效果图如下: 做的比较简单,真机效果比这个好很多,这个截图做的gif,有点蛋疼。 说说思路吧: 1. 首...
  • zhoudailiang
  • zhoudailiang
  • 2015年07月14日 19:47
  • 1165

【Android自定义View实战】之仿百度加载动画,一种优雅的Loading方式

【Android自定义View实战】之仿百度加载动画,一种优雅的Loading方式 无意中看到了百度的加载动画,看起来非常优雅,打算亲手造一个。 仿百度加载动画的重要思路:当第一遍执行完毕后就让...
  • u010785585
  • u010785585
  • 2016年12月05日 22:13
  • 7706

自定义动画(仿Win10加载动画)

一、源代码源代码及demo二、背景先看看Win10的加载动画(找了很久才找到): 每次打开电脑都会有这个加载动画,看上挺cool的,就想着自己能否实现它。要实现这个动画?首先想能否通过自定义Surf...
  • a10615
  • a10615
  • 2016年10月07日 17:04
  • 2741

仿京东顶部加载动画

昨天的时候我们仿照了一个美团的加载的图标的小人,今天我们也来看看京东在下拉刷新的时候也会有一个快递的小人是怎么实现的,还是依靠惯例,我们解压一下它的apk,然后去里面找一找那些素材,发现原来也有几张图...
  • u012417984
  • u012417984
  • 2015年11月21日 14:35
  • 1377

Android自定义view-高仿小米视频加载动画效果

1、概述 前几日出差,每晚回到酒店的时候,睡前打发时间就是拿起自己的小米手机撸剧,酒店的wifi网络实在太差,眼睁睁的看着小米视频的加载动画一直拼命的loading中,正好最近一直在看自定义view的...
  • u013094278
  • u013094278
  • 2017年07月19日 20:52
  • 934

仿雅虎视频加载动画

今天无意间看到雅虎视频里面的加载动画挺有趣的。效果如下: 就尝试自己用自定义view简单的实现一下,效果图如下: 其实主要就是两个圆弧的变化加上一个旋转动画。 首先定义一个自定义view...
  • iiccer
  • iiccer
  • 2016年11月09日 17:07
  • 218

实现下拉刷新,上拉加载可自定义各种动画

优雅的实现RecyclerView的各种动画的下拉刷新,上拉加载
  • q924284946
  • q924284946
  • 2017年07月07日 17:04
  • 318

自定义View之案列篇(三):仿QQ小红点

光棍节快到了,提前祝愿广大的单身猿猴,早日脱单,尽快找到另一半。一直觉得 QQ 的小红点非常具有创新,新颖。要是自己也能实现类似的效果,那怎一个爽字了得。先来看看它的最终效果:效果图具有哪些效果: 在...
  • u012551350
  • u012551350
  • 2016年11月08日 22:59
  • 6195

RecyclerView 左滑(仿QQ左滑删除)

一、效果图 二、实现步骤
  • Kate_sicheng
  • Kate_sicheng
  • 2017年08月26日 14:25
  • 906
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义仿扣扣水加载动画
举报原因:
原因补充:

(最多只允许输入30个字)