自定义加载loading view动画组件的使用。

在github上找的一个有点酷炫的loading动画https://github.com/Fichardu/CircleProgress

我写写使用步骤

自定义view(CircleProgress )的代码

package com.hysmarthotel.view;

import com.hysmarthotel.roomcontrol.R;
import com.hysmarthotel.util.EaseInOutCubicInterpolator;

import android.animation.TimeInterpolator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AnimationUtils;

public class CircleProgress extends View {

    private static final int RED = 0xFFE5282C;
    private static final int YELLOW = 0xFF1F909A;
    private static final int BLUE = 0xFFFC9E12;
    private static final int COLOR_NUM = 3;
    private int[] COLORS;
    private TimeInterpolator mInterpolator = new EaseInOutCubicInterpolator();

    private final double DEGREE = Math.PI / 180;
    private Paint mPaint;
    private int mViewSize;
    private int mPointRadius;
    private long mStartTime;
    private long mPlayTime;
    private boolean mStartAnim = false;
    private Point mCenter = new Point();

    private ArcPoint[] mArcPoint;
    private static final int POINT_NUM = 15;
    private static final int DELTA_ANGLE = 360 / POINT_NUM;
    private long mDuration = 3600;

    public CircleProgress(Context context) {
        super(context);
        init(null, 0);
    }

    public CircleProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public CircleProgress(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        mArcPoint = new ArcPoint[POINT_NUM];

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);

        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CircleProgress, defStyle, 0);
        int color1 = a.getColor(R.styleable.CircleProgress_color1, RED);
        int color2 = a.getColor(R.styleable.CircleProgress_color2, YELLOW);
        int color3 = a.getColor(R.styleable.CircleProgress_color3, BLUE);
        a.recycle();

        COLORS = new int[]{color1, color2, color3};
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int defaultSize = getResources().getDimensionPixelSize(R.dimen.default_circle_view_size);
        int width = getDefaultSize(defaultSize, widthMeasureSpec);
        int height = getDefaultSize(defaultSize, heightMeasureSpec);
        mViewSize = Math.min(width, height);
        setMeasuredDimension(mViewSize, mViewSize);
        mCenter.set(mViewSize / 2, mViewSize / 2);

        calPoints(1.0f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        canvas.translate(mCenter.x, mCenter.y);

        float factor = getFactor();
        canvas.rotate(36 * factor);
        float x, y;
        for (int i = 0; i < POINT_NUM; ++i) {
            mPaint.setColor(mArcPoint[i].color);
            float itemFactor = getItemFactor(i, factor);
            x = mArcPoint[i].x - 2 * mArcPoint[i].x * itemFactor;
            y = mArcPoint[i].y - 2 * mArcPoint[i].y * itemFactor;
            canvas.drawCircle(x, y, mPointRadius, mPaint);
        }

        canvas.restore();

        if (mStartAnim) {
            postInvalidate();
        }
    }

    private void calPoints(float factor) {
        int radius = (int) (mViewSize / 3 * factor);
        mPointRadius = radius / 12;

        for (int i = 0; i < POINT_NUM; ++i) {
            float x = radius * -(float) Math.sin(DEGREE * DELTA_ANGLE * i);
            float y = radius * -(float) Math.cos(DEGREE * DELTA_ANGLE * i);

            ArcPoint point = new ArcPoint(x, y, COLORS[i % COLOR_NUM]);
            mArcPoint[i] = point;
        }
    }

    private float getFactor() {
        if (mStartAnim) {
            mPlayTime = AnimationUtils.currentAnimationTimeMillis() - mStartTime;
        }
        float factor = mPlayTime / (float) mDuration;
        return factor % 1f;
    }

    private float getItemFactor(int index, float factor) {
        float itemFactor = (factor - 0.66f / POINT_NUM * index) * 3;
        if (itemFactor < 0f) {
            itemFactor = 0f;
        } else if (itemFactor > 1f) {
            itemFactor = 1f;
        }
        return mInterpolator.getInterpolation(itemFactor);
    }

    public void startAnim() {
        mPlayTime = mPlayTime % mDuration;
        mStartTime = AnimationUtils.currentAnimationTimeMillis() - mPlayTime;
        mStartAnim = true;
        postInvalidate();
    }

    public void reset() {
        stopAnim();
        mPlayTime = 0;
        postInvalidate();

    }

    public void stopAnim() {
        mStartAnim = false;
    }

    public void setInterpolator(TimeInterpolator interpolator) {
        mInterpolator = interpolator;
    }

    public void setDuration(long duration) {
        mDuration = duration;
    }

    public void setRadius(float factor) {
        stopAnim();
        calPoints(factor);
        startAnim();
    }

    static class ArcPoint {
        float x;
        float y;
        int color;

        ArcPoint(float x, float y, int color) {
            this.x = x;
            this.y = y;
            this.color = color;
        }
    }

}

EaseInOutCubicInterpolator是自定义view(CircleProgress )中要是用的一个工具

package com.hysmarthotel.util;

import android.animation.TimeInterpolator;

public class EaseInOutCubicInterpolator implements TimeInterpolator {

    @Override
    public float getInterpolation(float input) {
        if ((input *= 2) < 1.0f) {
            return 0.5f * input * input * input;
        }
        input -= 2;
        return 0.5f * input * input * input + 1;
    }

}

在activity中的调用(还有一些其他用法可以自己看看github上的源代码)

mProgressView = (CircleProgress)findViewById(R.id.progress_vie);
mProgressView.startAnim();  //开始

mProgressView.stopAnim();  //结束

mProgressView.setRadius(factor);  //半径

mProgressView.reset();  //复原

在xml文件中的布局

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:circleprogress="http://schemas.android.com/apk/res/com.hysmarthotel.roomcontrol"      //这个地方记得要加   //包名
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg1" >

    <com.hysmarthotel.view.CircleProgress                                                                         //类名
        android:id="@+id/progress_vie"
        android:layout_x="350.5px"
        android:layout_y="150.0px"
        android:layout_width="1140.0px"
        android:layout_height="700.0px"
        circleprogress:color1="@android:color/holo_red_light"           //这些参数就是通过xmlns:circleprogress,和attrs文件相关联的
     circleprogress:color2="@android:color/holo_green_light"

     circleprogress:color3="@android:color/holo_blue_light" />

自己在values目录中新建的attrs文件,这是与自定义view中自定义参数相关的

    <declare-styleable name="CircleProgress">
        <attr name="color1" format="reference|color"/>
        <attr name="color2" format="reference|color"/>
        <attr name="color3" format="reference|color"/>
    </declare-styleable>

自己在values目录中新建的dimens文件,这个只是几个颜色参数

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="default_circle_view_size">200dp</dimen>
</resources>
时间: 2024-08-23 04:38:18

自定义加载loading view动画组件的使用。的相关文章

Android 自定义View修炼-自定义加载进度动画LoadingImageView

一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. 直接看下面的效果图吧. 二.效果图 废话不说,先来看看效果图吧~~ 三.实现原理方案 1.自定义View-XCLoadingImageView,继承ImageVIew来实现,这样就不用自己再处理drawable和测量的工作内容. 2.根据蒙层颜色创建一个蒙层bitmap,然后根据这个bitmap来

12种炫酷html5 svg加载loading动画特效

这是一款使用html5 svg制作的加载loading动画特效插件.该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片.关于在页面中使用SVG的方法可以参考这篇文章:<如何在网页中使用SVG>. 所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器. 在线演示:http://www.htmleaf.com/Demo/201501071122.html 下载地址:http://www.htmleaf.com

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht

一个很酷的加载loading效果

一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view,本例子主要由以下几点构成(1):RotateAnimation实现叶子旋转(2):叶子飘动(3):当前进度绘制当前进度条大体实现: @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas); // 绘制进度条和叶子        // 之所以把叶子放在进度条里绘制,主要是层级原

简易仿ios菊花加载loading图

原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况的显示,还有显示文字. 使用ProgressBar 来加载动画转圈,这里使用drawable文件 定义转圈动画,indeterminateDrawable属性进行加载. <?xml vers

加载loading对话框的功能(不退出沉浸式效果)

上一篇基于修改系统源码的前提下,实现了完全的沉浸式体验效果.可参考这篇 戳这 一.自定义Dialog 在沉浸式效果下,当界面弹出对话框时,对话框将获取到焦点,这将导致界面退出沉浸式效果,那么是不是能通过屏蔽对话框获取焦点来达到不退出沉浸式的目的呢.说干就干,我们先来看一下改善后的效果图. 普通对话框弹出效果 LoadingDialog弹出效果 自定义LoadingDialog public class LoadingDialog extends Dialog { public LoadingDi

【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3

[控件] 心形加载的view

心形加载的view 效果: 素材图片: 源码: StarView.h 与 StarView.m // // StarView.h // Star // // Created by XianMingYou on 15/3/13. // Copyright (c) 2015年 XianMingYou. All rights reserved. // #import <UIKit/UIKit.h> @interface StarView : UIView @property (nonatomic,

Objective C - 4 - 下载图片并且加载到View

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 #import "LoadInternetImageViewController.h" @interface LoadInternetImageViewControll