一个很酷的加载loading效果

原创 2015年11月18日 16:52:30
一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view,
本例子主要由以下几点构成
(1):RotateAnimation实现叶子旋转
(2):叶子飘动
(3):当前进度绘制当前进度条
大体实现:
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制进度条和叶子
        // 之所以把叶子放在进度条里绘制,主要是层级原因
        drawProgressAndLeafs(canvas);
        // drawLeafs(canvas);
        canvas.drawBitmap(mOuterBitmap, mOuterSrcRect, mOuterDestRect, mBitmapPaint);
        postInvalidate();
    }
    private void drawProgressAndLeafs(Canvas canvas) {
        if (mProgress >= TOTAL_PROGRESS) {
            mProgress = 0;
        }
        // mProgressWidth为进度条的宽度,根据当前进度算出进度条的位置
        mCurrentProgressPosition = mProgressWidth * mProgress / TOTAL_PROGRESS;
        // 即当前位置在图中所示1范围内
        if (mCurrentProgressPosition < mArcRadius) {
            Log.i(TAG, "mProgress = " + mProgress + "---mCurrentProgressPosition = "
                    + mCurrentProgressPosition
                    + "--mArcProgressWidth" + mArcRadius);
            // 1.绘制白色ARC,绘制orange ARC
            // 2.绘制白色矩形
            // 1.绘制白色ARC
            canvas.drawArc(mArcRectF, 90, 180, false, mWhitePaint);
            // 2.绘制白色矩形
            mWhiteRectF.left = mArcRightLocation;
            canvas.drawRect(mWhiteRectF, mWhitePaint);
            // 绘制叶子
            drawLeafs(canvas);
            // 3.绘制棕色 ARC
            // 单边角度
            int angle = (int) Math.toDegrees(Math.acos((mArcRadius - mCurrentProgressPosition)
                    / (float) mArcRadius));
            // 起始的位置
            int startAngle = 180 - angle;
            // 扫过的角度
            int sweepAngle = 2 * angle;
            Log.i(TAG, "startAngle = " + startAngle);
            canvas.drawArc(mArcRectF, startAngle, sweepAngle, false, mOrangePaint);
        } else {
            Log.i(TAG, "mProgress = " + mProgress + "---transfer-----mCurrentProgressPosition = "
                    + mCurrentProgressPosition
                    + "--mArcProgressWidth" + mArcRadius);
            // 1.绘制white RECT
            // 2.绘制Orange ARC
            // 3.绘制orange RECT
            // 这个层级进行绘制能让叶子感觉是融入棕色进度条中
            // 1.绘制white RECT
            mWhiteRectF.left = mCurrentProgressPosition;
            canvas.drawRect(mWhiteRectF, mWhitePaint);
            // 绘制叶子
            drawLeafs(canvas);
            // 2.绘制Orange ARC
            canvas.drawArc(mArcRectF, 90, 180, false, mOrangePaint);
            // 3.绘制orange RECT
            mOrangeRectF.left = mArcRightLocation;
            mOrangeRectF.right = mCurrentProgressPosition;
            canvas.drawRect(mOrangeRectF, mOrangePaint);
        }
    }
    /**
     * 绘制叶子
     *
     * @param canvas
     */
    private void drawLeafs(Canvas canvas) {
        mLeafRotateTime = mLeafRotateTime <= 0 ? LEAF_ROTATE_TIME : mLeafRotateTime;
        long currentTime = System.currentTimeMillis();
        for (int i = 0; i < mLeafInfos.size(); i++) {
            Leaf leaf = mLeafInfos.get(i);
            if (currentTime > leaf.startTime && leaf.startTime != 0) {
                // 绘制叶子--根据叶子的类型和当前时间得出叶子的(x,y)
                getLeafLocation(leaf, currentTime);
                // 根据时间计算旋转角度
                canvas.save();
                // 通过Matrix控制叶子旋转
                Matrix matrix = new Matrix();
                float transX = mLeftMargin + leaf.x;
                float transY = mLeftMargin + leaf.y;
                Log.i(TAG, "left.x = " + leaf.x + "--leaf.y=" + leaf.y);
                matrix.postTranslate(transX, transY);
                // 通过时间关联旋转角度,则可以直接通过修改LEAF_ROTATE_TIME调节叶子旋转快慢
                float rotateFraction = ((currentTime - leaf.startTime) % mLeafRotateTime)
                        / (float) mLeafRotateTime;
                int angle = (int) (rotateFraction * 360);
                // 根据叶子旋转方向确定叶子旋转角度
                int rotate = leaf.rotateDirection == 0 ? angle + leaf.rotateAngle : -angle
                        + leaf.rotateAngle;
                matrix.postRotate(rotate, transX
                        + mLeafWidth / 2, transY + mLeafHeight / 2);
                canvas.drawBitmap(mLeafBitmap, matrix, mBitmapPaint);
                canvas.restore();
            } else {
                continue;
            }
        }
    }


                                                运行效果:                                                                                                                                                                                                                                                                                                       
  • [url=][/url]www.kmnk01.com
                                                                

相关文章推荐

一个很酷的加载loading效果

  • 2017年04月25日 15:07
  • 3.41MB
  • 下载

一个很酷的菜单效果

  • 2013年10月23日 10:45
  • 42KB
  • 下载

JS实现页面加载完毕之前loading提示效果

一、JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, ...

一个很酷的图片轮换效果

  • 2008年01月06日 09:12
  • 378KB
  • 下载

很酷的一个文字鼠标跟随效果

  • 2016年08月03日 21:06
  • 6KB
  • 下载

页面加载过程中的等待查询loading效果

实现查询等待:正在查询中,请稍后... html代码: 正在查询,请稍等... .query_hint{ border:5px solid #939393; width:...

加载loading效果

  • 2017年12月06日 15:49
  • 258KB
  • 下载

Loading效果实现:加载新页面前的等待过渡画面

2017年11月25日 由于最近在写一个web项目,由于前端框架开发,和后台查数据的语法不成熟导致页面加载速度过慢,遂想到用loading效果来过渡: 粗略的查阅了下网上的实现方法...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个很酷的加载loading效果
举报原因:
原因补充:

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