加载动图的实现及属性动画的使用

最新推荐文章于 2022-11-23 20:57:56 发布
最新推荐文章于 2022-11-23 20:57:56 发布
阅读量512 收藏
点赞数
分类专栏： 日常总结 文章标签： 动画 源码 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vicent_9920/article/details/77990743
版权

昨天在一个APP上面看见一个吃东西的加载图，感觉挺简单的，于是打算去实现。但是在实现的过程中踩了一些坑，那个图也不能找到做参考了，于是自己琢磨了一个下午，终于实现了效果。因此这里将整个过程做一个复盘，以便自己能深刻的记住相关知识点。
本来应该像大佬一样将图片效果、引用方式、各个参数写出来，但是鉴于我比较懒，不对，是没有bintray.com的账号。因此就将整个过程以及源码（就一个类，有需要的朋友可以增加自定义属性，供以后使用），先来一张效果图镇店：

效果图

首先是布局，我是这样构思的：

布局

将整个界面左右留下100px的内边距，然后将界面一分为二，左边是一个嘴的圆形、右边是三个圆球（Food），接下来这里就比较容易了，就是确定尺寸，绘制扇形。

自定义View确定尺寸一般是onMeasure方法，在开发者艺术探索中曾看到这样的描述：

measure过程中决定了View的宽/高，Measure完成以后，可以通过getMeasureWidth和getMeasureHeight方法来获取到View测量后的宽/高，在几乎所有的情况下它都等同于View最终的宽高。

但是我看到很多自定义View都没有重写这个方法，而是通过重写onSizeChanged获得整个View的宽高，原因是像我们实现的这种自定义控件一般情况不需要使用到Padding，因此我们不会通过onMeasure来获取，因为这个方法获取相对而言复杂一些，而onSizeChanged直接将值传过了，不需要进行任何处理就能获得View的宽高。


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //View的宽度
        this.mWidth = w;
        //View的高度
        this.mHeight = h;
        //圆形半径
        int raduis = (mWidth/2-100)/2;
        //绘制扇形的矩形
        mRectF.set(-raduis,-raduis,raduis,raduis);

    }

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(mRectF.right+50, mHeight / 2);
        canvas.drawArc(mRectF, 30, 300, true, paint);
    }

这里我当时有一个疑问是绘制扇形的时候，我当时想的是，我绘制的角度是30°到330°，因此drawArc方法的起始角度应该是这样：

canvas.drawArc(mRectF, 30, 330, true, paint);

结果绘制出来的圆形嘴的角度只有30°，后来测试了几个角度才明白，它这里的起始角度的确是起点的角度，但是重点角度不是圆形的角度，而是你绘制的角度。这里有点绕，就是说终点角度指的是你需要绘制的角度是多少度，我需要露出60度的嘴，因此我绘制的角度应该是300度，不是330度。而330度的话，剩下30度的嘴也是正常的。因此如果想要绘制逆时针的扇形的话，可以尝试终点角度为负值，如下：

canvas.drawArc(mRectF, 150, -300, true, paint);

150度起点
关于绘制扇形角度的问题上面描述得并不准确，比如当我们绘制的起点角度为30度时，则图形又变得不能理解了：

canvas.drawArc(mRectF, 30, -300, true, paint);

30度起点

不管如何，我们可以实现效果就好，如果需要做扇形统计图之类的动态变化的话，则需要深入了解起始角度的真实意义，我查看源码没有发现处理起始角度是具体数据：

private static native void native_drawArc(long nativeCanvas, float left, float top,
float right, float bottom,
float startAngle, float sweep, boolean useCenter,
long nativePaint);
drawArc
void drawArc (RectF oval,
float startAngle,
float sweepAngle,
boolean useCenter,
Paint paint)

Draw the specified arc, which will be scaled to fit inside the specified oval.

If the start angle is negative or >= 360, the start angle is treated as start angle modulo 360.

If the sweep angle is >= 360, then the oval is drawn completely. Note that this differs slightly from SkPath::arcTo, which treats the sweep angle modulo 360. If the sweep angle is negative, the sweep angle is treated as sweep angle modulo 360

The arc is drawn clockwise. An angle of 0 degrees correspond to the geometric angle of 0 degrees (3 o’clock on a watch.)

Parameters
oval RectF: The bounds of oval used to define the shape and size of the arc
This value must never be null.
startAngle float: Starting angle (in degrees) where the arc begins
sweepAngle float: Sweep angle (in degrees) measured clockwise
useCenter boolean: If true, include the center of the oval in the arc, and close it if it is being stroked. This will draw a wedge
paint Paint: The paint used to draw the arc
This value must never be null.
绘制指定的弧，其将被缩放以适合指定的椭圆。

如果起始角度为负或> = 360，起始角度被视为起始角度模数360。

如果扫掠角度> 360°，则椭圆形被完全绘制。 请注意，这与SkPath :: arcTo略有不同，它将扫描角度视为360度。如果扫描角度为负，则扫描角度被视为360度扫描角度

弧线顺时针拉伸。 0度的角度对应于0度（手表3点钟）的几何角度。

绘制好了圆形的嘴，接下来我们可以考虑圆球的布局了，我是这样构思的：

布局

小球在2/3的圆球直径的三个点依次排开，代码如下：

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.mWidth = w;
        this.mHeight = h;
        //圆形半径
        int raduis = (mWidth/2-100)/2;
        mRectF.set(-raduis,-raduis,raduis,raduis);
        //小球位置1
        centerX1 = raduis+2f/3*raduis-raduis*1/5f;
        //小球位置2
        centerX2 = raduis+4f/3*raduis-raduis*1/5f;
        //小球位置3
        centerX3 = raduis+6/3*raduis-raduis*1/5f;

    }


  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(mRectF.right+100, mHeight / 2);
        canvas.drawArc(mRectF, 150, -300, true, paint);
        paint.setColor(Color.GREEN);
        canvas.drawCircle(centerX1,0,mRectF.right*0.2f,paint);
        paint.setColor(Color.BLUE);
        canvas.drawCircle(centerX2,0,mRectF.right*0.2f,paint);
        paint.setColor(Color.YELLOW);
        canvas.drawCircle(centerX3,0,mRectF.right*0.2f,paint);
    }

逼叨叨了这么久，终于把界面展示出来了，那么我们这个动画如何实现呢？网上关于属性动画的文章非常多，我觉得这个文章讲得足够详细了—— Android属性动画完全解析！而且我们这里的动画根本用不上动画集合，一个动画就足够，我的思路是在做一个动画，动画中小球的移动路径为X放向大圆球直径的2/3，当移动了90%的时候，最前面的小球隐藏，打球闭合，动画结束之后再次执行，将三个小球的初始位置依次往前一格提一步，就可以看到类似吃掉的效果了！
描述起来比较抽象，咱们再看看效果图：

这里写图片描述

然后我们可以看看动画与绘制方法：

   public void startMoving(){
        if(getVisibility() != View.VISIBLE || isMoving){
            return;
        }
        isMoving = true;
        Moving = true;

        anim = ValueAnimator.ofFloat(0f,1f);
        anim.setDuration(2000);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float currentValue = (float) animation.getAnimatedValue();

                dex = currentValue*mRectF.right*2f/3;

                if(currentValue>0.9f ){
                    //嘴闭合
                    isClose = true;
                }else{
                    //嘴张开
                    isClose = false;
                }

                postInvalidate();
            }


        });
        anim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isClose = false;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isMoving = false;

                if(Moving){
                    //动态切换小球位置，形成流式滚动
                    float dest = centerX1;
                    centerX1 = centerX3;
                    centerX3 = centerX2;
                    centerX2 = dest;
                    startMoving();
                }

            }

            @Override
            public void onAnimationCancel(Animator animation) {
                //当动画停止时小球位置回归原点
                centerX1 = mRectF.right+2f/3*mRectF.right-mRectF.right*1/5f;
                centerX2 = mRectF.right+4f/3*mRectF.right-mRectF.right*1/5f;
                centerX3 = mRectF.right+6/3*mRectF.right-mRectF.right*1/5f;
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        //保证小球匀速滚动
        anim.setInterpolator(new LinearInterpolator());
        anim.start();
    }


public void stopMoving(){
        Moving = false;
        anim.cancel();
    }


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

        paint.setColor(Color.RED);
        canvas.translate(mRectF.right+100, mHeight / 2);


        if(isClose){
            canvas.drawArc(mRectF, 0, 360, true, paint);
            float checkSize = 22f/15*mRectF.right;

            //将在第一个展示的小球不予绘制
            if(centerX1-dex>checkSize){
                paint.setColor(Color.GREEN);
                canvas.drawCircle(centerX1-dex,0,mRectF.right*0.2f,paint);

            }
            if(centerX2-dex>checkSize){
                paint.setColor(Color.BLUE);
                canvas.drawCircle(centerX2-dex,0,mRectF.right*0.2f,paint);

            }
            if(centerX3-dex>checkSize){
                paint.setColor(Color.YELLOW);
                canvas.drawCircle(centerX3-dex,0,mRectF.right*0.2f,paint);
            }

        }else{
            canvas.drawArc(mRectF, 30, 300, true, paint);
            paint.setColor(Color.GREEN);
            canvas.drawCircle(centerX1-dex,0,mRectF.right*0.2f,paint);
            paint.setColor(Color.BLUE);
            canvas.drawCircle(centerX2-dex,0,mRectF.right*0.2f,paint);
            paint.setColor(Color.YELLOW);
            canvas.drawCircle(centerX3-dex,0,mRectF.right*0.2f,paint);
        }


    }

我之前在动画的实现过程中有一个坑，我在处理小球位置的时候，addUpdateListener接口的onAnimationUpdate方法里面直接处理用小球的X坐标减去动画的更新值，如下：

 @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float currentValue = (float) animation.getAnimatedValue();

                dex = currentValue*mRectF.right*2f/3;
                centerX3-=dex;
                centerX2-=dex;
                centerX1-=dex;
                if(currentValue>0.9f ){
                    isClose = true;
                }else{
                    isClose = false;
                }

                postInvalidate();
            }

结果在动画过程中后面的速度不断加快，导致不能得到预期的效果，后来一步一步检查才发现，这个属性值没有处理合适。

如果我们这个空间需要在横竖屏都能使用的话，还需要对宽高进行一个判断，修改如下：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.mWidth = w;
        this.mHeight = h;
        int normal = (w<h)?w:h;

        //圆形半径
        float raduis = (normal/2-Padding)/2;
        mRectF.set(-raduis,-raduis,raduis,raduis);
        //小球位置1
        centerX1 = raduis+2f/3*raduis-raduis*1/5f;
        centerX2 = raduis+4f/3*raduis-raduis*1/5f;
        centerX3 = raduis+6/3*raduis-raduis*1/5f;

    }

如果需要封装为一个自定义控件，方便今后随时能用的话，设置自定义属性的时候可以设置View的padding属性，然后通过onMeasure获取，或者通过自定义属性获取，还有颜色、小球半径（建议小于1/3大球半径）等。
这个View就一个java文件，因此就不贴代码连接了，直接显示出来：

public class EatLoading extends View {
    private static final float Padding = 100;
    private int mWidth;
    private int mHeight;
    private Paint paint;    //画笔
    private RectF mRectF;    //矩形
    private boolean isMoving = false;//当前动画是否结束
    private boolean isClose = false;//圆形是否闭合
    private boolean Moving = false;//循环动画
    private float centerX1,centerX2,centerX3;
    private float dex = 0;
    private ValueAnimator anim;

    public EatLoading(Context context) {
        super(context);
        initPaint();
    }

    public EatLoading(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public EatLoading(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }
    //初始化画笔
    private void initPaint() {
        paint = new Paint();
        //设置画笔模式：填充
        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(30);
        //初始化区域
        mRectF = new RectF();
    }



    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.mWidth = w;
        this.mHeight = h;
        int normal = (w<h)?w:h;

        //圆形半径
        float raduis = (normal/2-Padding)/2;
        mRectF.set(-raduis,-raduis,raduis,raduis);
        //小球位置1
        centerX1 = raduis+2f/3*raduis-raduis*1/5f;
        centerX2 = raduis+4f/3*raduis-raduis*1/5f;
        centerX3 = raduis+6/3*raduis-raduis*1/5f;

    }

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

        paint.setColor(Color.RED);
        canvas.translate(mRectF.right+Padding, mHeight / 2);


        if(isClose){
            canvas.drawArc(mRectF, 0, 360, true, paint);
            float checkSize = 22f/15*mRectF.right;
            if(centerX1-dex>checkSize){
                paint.setColor(Color.GREEN);
                canvas.drawCircle(centerX1-dex,0,mRectF.right*0.2f,paint);

            }
            if(centerX2-dex>checkSize){
                paint.setColor(Color.BLUE);
                canvas.drawCircle(centerX2-dex,0,mRectF.right*0.2f,paint);

            }
            if(centerX3-dex>checkSize){
                paint.setColor(Color.YELLOW);
                canvas.drawCircle(centerX3-dex,0,mRectF.right*0.2f,paint);
            }

        }else{
            canvas.drawArc(mRectF, 30, 300, true, paint);
            paint.setColor(Color.GREEN);
            canvas.drawCircle(centerX1-dex,0,mRectF.right*0.2f,paint);
            paint.setColor(Color.BLUE);
            canvas.drawCircle(centerX2-dex,0,mRectF.right*0.2f,paint);
            paint.setColor(Color.YELLOW);
            canvas.drawCircle(centerX3-dex,0,mRectF.right*0.2f,paint);
        }


    }

    public void startMoving(){
        if(getVisibility() != View.VISIBLE || isMoving){
            return;
        }
        isMoving = true;
        Moving = true;

        anim = ValueAnimator.ofFloat(0f,1f);
        anim.setDuration(2000);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float currentValue = (float) animation.getAnimatedValue();

                dex = currentValue*mRectF.right*2f/3;
                centerX3-=dex;
                if(currentValue>0.9f ){
                    isClose = true;
                }else{
                    isClose = false;
                }

                postInvalidate();
            }


        });
        anim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isClose = false;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isMoving = false;

                if(Moving){
                    float dest = centerX1;
                    centerX1 = centerX3;
                    centerX3 = centerX2;
                    centerX2 = dest;
                    startMoving();
                }

            }

            @Override
            public void onAnimationCancel(Animator animation) {
                centerX1 = mRectF.right+2f/3*mRectF.right-mRectF.right*1/5f;
                centerX2 = mRectF.right+4f/3*mRectF.right-mRectF.right*1/5f;
                centerX3 = mRectF.right+6/3*mRectF.right-mRectF.right*1/5f;
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        anim.setInterpolator(new LinearInterpolator());
        anim.start();
    }

    public void stopMoving(){
        Moving = false;
        anim.cancel();
    }


}

参考文章：

Android开源：一款你不可错过的可爱&小资风格的加载等待控件库

Vicent_9920
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS动态实时显示图像加载的状态
05-06
使用原生JavaScript实现实时显示图像加载的状态。当图像没有加载完成时，页面显示图像正在加载，当完成后显示图像已经加载完成。
JS实现图片懒加载
xvktdmjg的博客
01-13 272
JS实现图片懒加载 在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。 思路 用data-xxx属性替换img标签的src属性，当页面滚动到图片区域时候再将src属性替换成data-xxx属性 各种宽高 页可见区域宽： document.body.clientWidth; 网页可见区域
cesium加载动图方案一：通过libgif库实现
Fascinated0525的博客
06-15 2686
cesium加载动图方案一：通过libgif库实现
CesiumJS 加载动图思路
qq_40137850的博客
08-13 607
CesiumJS 加载动图思路
用js实现滚动加载动画效果
qq_61955502的博客
11-23 3628
滚动加载动画&无限加载
Android使用View Animation实现动画加载界面
08-27
主要为大家详细介绍了Android使用View Animation实现动画加载界面的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 加载gif动图 自定义GifView
10-24
android 加载gif动图 自定义GifView,效果流畅 ,我写的都是加载本地的gif
纯CSS3实现图标加载动画特效
06-24
纯CSS3实现图标加载动画特效是一款基于框架Loaders.css动画库制作11种实用的图标加载矢量动画特效。
使用css3实现超炫的loading加载动画效果
09-25
主要介绍了使用css3实现超炫的loading加载动画效果,需要的朋友可以参考下
Android 使用 Path 实现搜索动态加载动画效果
08-27
主要介绍了Android 使用 Path 实现搜索动态加载动画效果,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
AR 相机扫描效果实现
热门推荐
Vicent_9920的博客
11-09 1万+
前端时间研究了一下 AR 相机的实现，但是觉得支付宝的 AR 相机扫描界面和一般相机扫描界面不一样，因为它的背景中间“挖的坑”是一个正六边形，而不是常规的矩形，于是就起了模仿的心思。仔细观察，发现需要实现的几个亮点：
高德地图之拾取地点
Vicent_9920的博客
04-30 1万+
高德地图官方有API，有文档，但是大家懂的，有些东西并没有说明。所以，我打算将自己实现对高德地图展示、定位以及导航的功能步骤做一个总结，分享给大家。本文作为总结高德地图使用，首先总结自己对于拾取地点这样的功能的实现。第一步，准备工作：首先，我们需要去高德地图获取key，然后下载sdk（包括jar包和so文件），本项目需要的sdk，如图： 当我们将key下载好以后，并且将jar包和so文件放好——建议
高德地图之实时导航
Vicent_9920的博客
05-09 1万+
之前的文章总结了高德地图之拾取地点，接着在这个基础上继续总结了高德地图之路线规划，今天我们将在这个基础上来总结高德地图之实时导航。之前的文章如果没有看过的话，建议大家先了解一下，不然可能会看得不大懂。 其实实时导航相对来说应该是最简单的，但是API讲的不是很清楚，于是我将自己的弯路一一道来，让大家看看有没有什么收获。首先，我们按照官网API的说法来走一遍，简单来说就四步： 定义AMapNaviVi
高德地图之路线规划
Vicent_9920的博客
05-07 1万+
在上一篇文章中，我们讲到了高德地图之拾取地点，今天接下来总结路线规划，整个实现的过程大致如下： 获取终点 规划路线 路线的选择与路线的绘制 路线结果的展示 首先来看看需要实现的效果：整个布局比较简单，唯一需要注意的就是
WebView写入数据到 localStorage总结
Vicent_9920的博客
08-16 8889
最近项目中使用了 Hybrid 的框架，也通过 JSBridge 搭建了 WebView 与 JavaScript 的通信，但是据前端说收发消息比较繁琐，而另外一种 localStorage 的方法非常简单，我心里想：既然我已经掌握了一种方法了，为何不再学一下另一种方法？于是就简单去看了看，学了些，并做一份笔记！
Android面试题整理
Vicent_9920的博客
02-27 3806
前言 本文整理了简书 goeasyway 面试相关文章，并在文章中加以自己的理解以及看见的部分精彩评论，所有文章并非自己原创，如对Android面试有兴趣，可前往作者文章专栏传送门或者关注对方的微信公众号：Android面试启示录 Android面试一天一题（1 Day）——知道Service吗，它有几种启动方式？ startService只是启动Service，启动它的组...
Android路由的实现
Vicent_9920的博客
05-08 1871
最近在做一个项目，因为有多个功能模块，所以遇到了一个困难：当Moudle A依赖Moudle B,Moudle B依赖Moudle C，Moudle C依赖MoudleD，Moudle D为壳App，但是当我们需要在Moudle B调用Moudle C的时候，跳转不过去，因为找不到这个类，因此有了Android路由这个概念的提出，即我们可以在任意一个Moudel调用任意Moudel的Activity
Native JsBridge源码解析 深入理解JsBridge
Vicent_9920的博客
08-20 1800
最近项目中使用了 HyBrid 框架，但是在使用过程中遇到了不少问题，因此花时间来研究了一下其中原理！ 在平时开发过程中，不管是可复用性非常高,可以跨平台开发的 HyBrid ，还是半 Native 半 web 浅尝辄止的 HyBrid ，对 Android 而言，陌生的就是其中的通信——Android 与 Html 的互相通信。这里就不掉书包，直接阐明其中的使用方法。 引入JsBridge库 //
sprintf的方式加载动图
最新发布
05-26
sprintf函数可以用于格式化字符串，将多个字符串拼接成一个完整的字符串。但是，sprintf函数不能用于加载动图。 要加载动图，需要使用其他的方法，如以下几种： 1. 使用HTML标签：可以使用HTML标签<img>标签来加载动图，代码如下： ``` <img src="动图的路径"> ``` 其中，src属性指定了动图的路径，可以是相对路径或绝对路径。 2. 使用JavaScript：可以使用JavaScript来动态加载动图，代码如下： ``` var img = new Image(); img.onload = function() { // 动图加载完成后的操作 }; img.src = "动图的路径"; ``` 在代码中，创建了一个Image对象，使用onload事件来监听动图加载完成后的操作，然后将动图的路径赋值给src属性，开始加载动图。 3. 使用CSS：可以使用CSS的background属性来加载动图，代码如下： ``` div { background: url("动图的路径") no-repeat; width: 动图的宽度; height: 动图的高度; } ``` 在代码中，将动图的路径设置为background属性的值，width和height属性分别指定了动图的宽度和高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值