一个有趣的android加载动画

1

前言

之前学习canvas画图的时候,写了一个Android的加载动画,代码托管在github上面。

这里是github的地址:github地址,欢迎star,欢迎关注

下面先附上实际运行的效果图。

图片描述

主要的工作思路

需要绘制这样的动画,首先要学习Canvas的一些基本知识,这里我就不一一介绍了,推荐一个大神的教程,讲解的非常好。

这里是连接:Canvas学习连接

这里要说一下,在没有现成的View,需要自己实现的时候,就使用自定义View,一般继承自View,SurfaceView或其他的View,不包含子View。一般的情况下,我们要下面几个函数,构造函数,测量View大小(onMeasure),确定View大小(onSizeChanged),确定子View布局位置(onLayout),绘制内容(onDraw),最后在对外提供操作方法和监听回调。

这个loading主要分为下面几个部分:

1、精度框的绘制,随着进度的增加,内部的进度需要,向前填充。

但是,要注意,在左边的部分是分为,上半弧,矩形,下半弧,组成,中间就是一个矩形,在右边同理,有上半弧,矩形,下半弧。下面详细分析的图。

这里是进度框的分割图

下面是绘制左边的的代码

private void drawLeft(Canvas canvas,int mCurrentProgressPosition) {
        initPaint();
        mPaint.setColor(BLUE_COLOR);
        mPaint.setStyle(Paint.Style.FILL);
        int height = (int) Math.sqrt(900-(30-mCurrentProgressPosition)*(30-mCurrentProgressPosition));
        //上圆弧
        RectF rectUP = new RectF();
        rectUP.left = 200;
        rectUP.top = mTotalHeight/2 + 135 - height;
        rectUP.right = 2 * mCurrentProgressPosition + 200;
        rectUP.bottom = mTotalHeight/2 + 125 + height;
        canvas.drawArc(rectUP, 180, 90, true, mPaint);
        //中部
        RectF mRect = new RectF();
        mRect.left = 200;
        mRect.top = mTotalHeight/2 + 130;
        mRect.right = mCurrentProgressPosition + 200;
        mRect.bottom = mTotalHeight/2 + 170;
        canvas.drawRect(mRect, mPaint);
        //下圆弧
        RectF rectDown = new RectF();
        rectDown.left = 200;
        rectDown.top = mTotalHeight/2 + 175 - height;
        rectDown.right = 2 * mCurrentProgressPosition + 200;
        rectDown.bottom = mTotalHeight/2 + 165 + height;
        canvas.drawArc(rectDown, 90, 90, true, mPaint);
    }

2、云彩的动态效果

详细见代码

3、烟圈的动态效果

主要绘制一个椭圆,然后随着进度的增加,椭圆向上运动,同时要渐渐地变大。

4、房子的波浪显示效果,这里要考虑到试用Path()路径绘图,贝塞尔曲线的绘制。

首先,绘制房子,然后,通过Path()路径,绘制贝叶斯曲线,渐进波浪显示房子的整体效果。

/**
     * 波浪显示
     * @param canvas
     * @param width    波浪的宽度
     * @param length   波浪的高度
     * @param left     波浪的左起点
     * @param top      波浪的上顶点
     */
    private void setPath(Canvas canvas,int width,int length,int left,int top){
        Path path = new Path();
        path.reset();
        int x,y;
        int a = 12;//振幅
        for (int i = mProgress; i < width + mProgress ; i++) {
            x = left + i- mProgress;
            y = (int) (a * Math.sin(i * Math.PI / 50) + length + top);
            if (i == mProgress) {
                path.moveTo(x, y);
            }
            path.quadTo(x, y, x + 1, y);
        }
        path.lineTo(left + width, top);
        path.lineTo(left, top);
        path.close();
        Paint wavePaint = new Paint();
        wavePaint.setStyle(Paint.Style.FILL);
        wavePaint.setAntiAlias(true);
        wavePaint.setColor(ORANGE_COLOR);
        canvas.drawPath(path, wavePaint);
    }

先写这么多,下次继续补全。欢迎到github帮我star。

附:Canvas的常用操作速查表

图片描述

你可能感兴趣的

载入中...