Android仿QQ邮箱下拉刷新动画（三个小球围绕中心转动）

最新推荐文章于 2024-09-12 09:18:48 发布
最新推荐文章于 2024-09-12 09:18:48 发布
阅读量2.8k 收藏 6
点赞数 2
分类专栏： android自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012950099/article/details/51771949
版权

仿QQ邮箱下拉刷新动画（三个小球围绕中心转动）

该动画的实现主要借鉴了海龙的博客- 两个小球不停的绕中心旋转的进度条 ，在此感谢下。

1 首先上图（折腾了好久才把gif给搞了上去）

这里写图片描述

2 分析

2.1 当我们看到一个动画，首先需要对动画的效果进行分析，而不是盲目的进行开发

2.2 动画的分解（先需要关注一个小球的效果，避免其他干扰）
2.2.1 平移动画：把中心点的横坐标当作坐标的原点
第一个小球的x轴变化为：-1f>0f>1f>0f>-1f；
第二个小球的x轴变化为：0f>1f>0f>-1f>0f;
第三个小球的x轴变化为：1f>0f>-1f>0f>1f;
2.2.2 缩放动画：（三种大小：minRadius，centerRadius，maxRadius）
第一个小球的缩放变化为：center>max>center>min>center；
第二个小球的缩放变化为：max>center>min>center>max;
第三个小球的缩放变化为：center>min>center>max>center;
2.2.3 重要的一点：简单理解为半径大的覆盖在半径小的上方

3 分析完毕，直接上代码

public class ThreeBallRotationProgressBar extends View {

    private final static int DEFAULT_MAX_RADIUS = 16;
    private final static int DEFAULT_MIN_RADIUS = 5;
    private final static int DEFAULT_DISTANCE = 35;

    private final static int DEFAULT_ONE_BALL_COLOR = Color
            .parseColor("#40df73");
    private final static int DEFAULT_TWO_BALL_COLOR = Color
            .parseColor("#ffdf3e");
    private final static int DEFAULT_THREE_BALL_COLOR = Color
            .parseColor("#ff733e");

    private final static int DEFAULT_ANIMATOR_DURATION = 1400;

    private Paint mOnePaint;
    private Paint mTwoPaint;
    private Paint mThreePaint;

    private float maxRadius = DEFAULT_MAX_RADIUS;
    private float minRadius = DEFAULT_MIN_RADIUS;

    private int distance = DEFAULT_DISTANCE;

    private long duration = DEFAULT_ANIMATOR_DURATION;

    private Ball mOneBall;
    private Ball mTwoBall;
    private Ball mThreeBall;

    private float mCenterX;
    private float mCenterY;

    private AnimatorSet animatorSet;

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

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

    public ThreeBallRotationProgressBar(Context context, AttributeSet attrs,
            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {

        mOneBall = new Ball();
        mTwoBall = new Ball();
        mThreeBall = new Ball();

        mOneBall.setColor(DEFAULT_ONE_BALL_COLOR);
        mTwoBall.setColor(DEFAULT_TWO_BALL_COLOR);
        mThreeBall.setColor(DEFAULT_THREE_BALL_COLOR);

        mOnePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mOnePaint.setColor(DEFAULT_ONE_BALL_COLOR);
        mTwoPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTwoPaint.setColor(DEFAULT_TWO_BALL_COLOR);
        mThreePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mThreePaint.setColor(DEFAULT_THREE_BALL_COLOR);

        configAnimator();

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCenterX = w / 2;
        mCenterY = h / 2;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mCenterX = getWidth() / 2;
        mCenterY = getHeight() / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mOneBall.getRadius() >= mTwoBall.getRadius()) {
            if (mThreeBall.getRadius() >= mOneBall.getRadius()) {
                canvas.drawCircle(mTwoBall.getCenterX(), mCenterY,
                        mTwoBall.getRadius(), mTwoPaint);
                canvas.drawCircle(mOneBall.getCenterX(), mCenterY,
                        mOneBall.getRadius(), mOnePaint);
                canvas.drawCircle(mThreeBall.getCenterX(), mCenterY,
                        mThreeBall.getRadius(), mThreePaint);
            } else {
                if (mTwoBall.getRadius() <= mThreeBall.getRadius()) {
                    canvas.drawCircle(mTwoBall.getCenterX(), mCenterY,
                            mTwoBall.getRadius(), mTwoPaint);
                    canvas.drawCircle(mThreeBall.getCenterX(), mCenterY,
                            mThreeBall.getRadius(), mThreePaint);
                    canvas.drawCircle(mOneBall.getCenterX(), mCenterY,
                            mOneBall.getRadius(), mOnePaint);
                } else {
                    canvas.drawCircle(mThreeBall.getCenterX(), mCenterY,
                            mThreeBall.getRadius(), mThreePaint);
                    canvas.drawCircle(mTwoBall.getCenterX(), mCenterY,
                            mTwoBall.getRadius(), mTwoPaint);
                    canvas.drawCircle(mOneBall.getCenterX(), mCenterY,
                            mOneBall.getRadius(), mOnePaint);

                }
            }
        } else {
            if (mThreeBall.getRadius() >= mTwoBall.getRadius()) {
                canvas.drawCircle(mOneBall.getCenterX(), mCenterY,
                        mOneBall.getRadius(), mOnePaint);
                canvas.drawCircle(mTwoBall.getCenterX(), mCenterY,
                        mTwoBall.getRadius(), mTwoPaint);
                canvas.drawCircle(mThreeBall.getCenterX(), mCenterY,
                        mThreeBall.getRadius(), mThreePaint);
            } else {
                if (mOneBall.getRadius() <= mThreeBall.getRadius()) {
                    canvas.drawCircle(mOneBall.getCenterX(), mCenterY,
                            mOneBall.getRadius(), mOnePaint);
                    canvas.drawCircle(mThreeBall.getCenterX(), mCenterY,
                            mThreeBall.getRadius(), mThreePaint);
                    canvas.drawCircle(mTwoBall.getCenterX(), mCenterY,
                            mTwoBall.getRadius(), mTwoPaint);
                } else {
                    canvas.drawCircle(mThreeBall.getCenterX(), mCenterY,
                            mThreeBall.getRadius(), mThreePaint);
                    canvas.drawCircle(mOneBall.getCenterX(), mCenterY,
                            mOneBall.getRadius(), mOnePaint);
                    canvas.drawCircle(mTwoBall.getCenterX(), mCenterY,
                            mTwoBall.getRadius(), mTwoPaint);

                }
            }
        }

    }

    private void configAnimator() {
        float centerRadius = (maxRadius + minRadius) * 0.5f;

        ObjectAnimator oneScaleAnimator = ObjectAnimator.ofFloat(mOneBall,
                "radius", centerRadius, maxRadius, centerRadius, minRadius,
                centerRadius);
        oneScaleAnimator.setRepeatCount(ValueAnimator.INFINITE);
        ValueAnimator oneCenterAnimator = ValueAnimator
                .ofFloat(-1, 0, 1, 0, -1);
        oneCenterAnimator.setRepeatCount(ValueAnimator.INFINITE);
        oneCenterAnimator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (Float) animation.getAnimatedValue();
                        float x = mCenterX + (distance) * value;
                        mOneBall.setCenterX(x);
                        invalidate();
                    }
                });
        ValueAnimator oneAlphaAnimator = ValueAnimator.ofFloat(0.8f, 1, 0.8f,
                0, 0.8f);
        oneAlphaAnimator.setRepeatCount(ValueAnimator.INFINITE);
        oneAlphaAnimator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (Float) animation.getAnimatedValue();
                        int alpha = (int) (255 * value);
                        mOnePaint.setAlpha(alpha);
                    }
                });

        ObjectAnimator twoScaleAnimator = ObjectAnimator.ofFloat(mTwoBall,
                "radius", maxRadius, centerRadius, minRadius, centerRadius,
                maxRadius);
        twoScaleAnimator.setRepeatCount(ValueAnimator.INFINITE);

        ValueAnimator twoCenterAnimator = ValueAnimator.ofFloat(0, 1, 0, -1, 0);
        twoCenterAnimator.setRepeatCount(ValueAnimator.INFINITE);
        twoCenterAnimator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (Float) animation.getAnimatedValue();
                        float x = mCenterX + (distance) * value;
                        mTwoBall.setCenterX(x);
                    }
                });
        ValueAnimator twoAlphaAnimator = ValueAnimator.ofFloat(1, 0.8f, 0,
                0.8f, 1);
        twoAlphaAnimator.setRepeatCount(ValueAnimator.INFINITE);
        twoAlphaAnimator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (Float) animation.getAnimatedValue();
                        int alpha = (int) (255 * value);
                        mTwoPaint.setAlpha(alpha);
                    }
                });

        ObjectAnimator threeScaleAnimator = ObjectAnimator.ofFloat(mThreeBall,
                "radius", centerRadius, minRadius, centerRadius, maxRadius,
                centerRadius);
        threeScaleAnimator.setRepeatCount(ValueAnimator.INFINITE);

        ValueAnimator threeCenterAnimator = ValueAnimator.ofFloat(1, 0, -1, 0,
                1);
        threeCenterAnimator.setRepeatCount(ValueAnimator.INFINITE);
        threeCenterAnimator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (Float) animation.getAnimatedValue();
                        float x = mCenterX + (distance) * value;
                        mThreeBall.setCenterX(x);
                    }
                });
        ValueAnimator threeAlphaAnimator = ValueAnimator.ofFloat(0.8f, 0, 0.8f,
                1, 0.8f);
        threeAlphaAnimator.setRepeatCount(ValueAnimator.INFINITE);
        threeAlphaAnimator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        float value = (Float) animation.getAnimatedValue();
                        int alpha = (int) (255 * value);
                        mThreePaint.setAlpha(alpha);
                    }
                });

        animatorSet = new AnimatorSet();
        animatorSet.playTogether(oneScaleAnimator, oneCenterAnimator,
                twoScaleAnimator, twoCenterAnimator, threeScaleAnimator,
                threeCenterAnimator);
        animatorSet.setDuration(DEFAULT_ANIMATOR_DURATION);
        animatorSet.setInterpolator(new LinearInterpolator());
    }

    public class Ball {
        private float radius;
        private float centerX;
        private int color;

        public float getRadius() {
            return radius;
        }

        public void setRadius(float radius) {
            this.radius = radius;
        }

        public float getCenterX() {
            return centerX;
        }

        public void setCenterX(float centerX) {
            this.centerX = centerX;
        }

        public int getColor() {
            return color;
        }

        public void setColor(int color) {
            this.color = color;
        }
    }

    @Override
    public void setVisibility(int v) {
        if (getVisibility() != v) {
            super.setVisibility(v);
            if (v == GONE || v == INVISIBLE) {
                stopAnimator();
            } else {
                startAnimator();
            }
        }
    }

    @Override
    protected void onVisibilityChanged(View changedView, int v) {
        super.onVisibilityChanged(changedView, v);
        if (v == GONE || v == INVISIBLE) {
            stopAnimator();
        } else {
            startAnimator();
        }
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        startAnimator();
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stopAnimator();
    }

    public void setOneBallColor(int color) {
        mOneBall.setColor(color);
    }

    public void setmTwoBallColor(int color) {
        mTwoBall.setColor(color);
    }

    public void setMaxRadius(float maxRadius) {
        this.maxRadius = maxRadius;
        configAnimator();
    }

    public void setMinRadius(float minRadius) {
        this.minRadius = minRadius;
        configAnimator();
    }

    public void setDistance(int distance) {
        this.distance = distance;
    }

    public void setDuration(long duration) {
        this.duration = duration;
        if (animatorSet != null) {
            animatorSet.setDuration(duration);
        }
    }

    public void startAnimator() {
        if (getVisibility() != VISIBLE)
            return;

        if (animatorSet.isRunning())
            return;

        if (animatorSet != null) {
            animatorSet.start();
        }
    }

    public void stopAnimator() {
        if (animatorSet != null) {
            animatorSet.end();
        }
    }
}

3.1 configAnimator()方法主要就是实现2中分析的动画效果

3.2 为了解决2中提到的重要一点，半径大的小球覆盖在半径小的小球上方，主要在onDraw()采用比较的方式实现

4 总结

4.1 掌阅iReader的下拉刷新也采用了类似的动画效果（三个方形围绕中心转动），大家可以参考本文章，试着实现里边的动画效果。相信自己写过，总能有不少收获的~

4.2 对于android动画，还是需要耐心的分析，当然熟悉的掌握动画实现还是必要的！

5 源码下载

下载地址

爱吃水蜜桃的奥特曼
关注
专栏目录
Android UI- PullToRrefresh自定义下拉刷新动画，2021移动开发者大会
m0_64383081的博客
12-13 275
private AnimationDrawable animationDrawable; public TweenAnimLoadingLayout(Context context, Mode mode, Orientation scrollDirection, TypedArray attrs) { super(context, mode, scrollDirection, attrs); // 初始化 mHeaderImage.setImageResource(R.drawable.refresh_an
安卓邮件相关相关-仿QQ邮箱下拉刷新动画三个小球围绕中心转动.rar
07-29
这个压缩包"安卓邮件相关相关-仿QQ邮箱下拉刷新动画三个小球围绕中心转动.rar"提供了对QQ邮箱下拉刷新动画的模仿实现，这种动画效果在很多App中被广泛应用，给用户带来生动且有趣的交互体验。 下拉刷新（Pull-to-...
Android实现带动画的下拉刷新RecyclerView
极北三少
08-16 1954
不废话，先看效果，嗯…看起来有点卡，截图软件的问题： 图中普通列表是ListView样式，没有设置Header和Footer时使用默认的下拉刷新和上拉加载。而宫格列表和瀑布流列表使用的是自定义Header和Footer的下拉刷新和上拉上拉加载。 用法： Gradle: dependencies { compile 'com.sch.rfview:AnimRefr
Axure教程：APP下拉刷新效果
最新发布
ofay
09-12 323
让我们来回顾一下整个过程，动态面板至少要保持2个动态，当距离发生变化时切换图片并让图片回到下拉之前的位置上来，距离不变时仅垂直移动。
Android UI- PullToRrefresh自定义下拉刷新动画
modabobo
01-08 175
Android UI- PullToRrefresh自定义下拉刷新动画 如果觉得本文不错，麻烦投一票，2014年博客之星投票地址：http://vote.blog.csdn.net/blogstar2014/details?username=wwj_748#content 本篇博文要给大家分享的是如何使用修改开源项目PullToRrefresh下拉刷新的动画，来满足我们开发当中特定的需求，我...
Android源码解析－－超好看的下拉刷新动画
Hankkin的博客小园
08-30 6289
本篇博客代码下载地址：https://github.com/Yalantis/Taurus 最近在github上看到了好多高端、大气、上档次的动画效果，如果给你的项目中加上这些动画，相信你的app一定很优秀，今天给大家分析一下来自Yalantis的一个超好看的下拉刷新动画。 首先我们看一下效果如何： 怎么样？是不是很高大上？接下来我们看一下代码：
android三个球动画,android三个小球互换位置loading动画
weixin_30270475的博客
05-26 414
这是需要实现的效果，第一个球跟第二个球互换位置，第二个球跟第三个球互换位置，等，这里提供一个思路，先把代码全部贴上来import com.example.loadingtest.R;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation....
仿QQ邮箱下拉刷新动画
07-01
"仿QQ邮箱下拉刷新动画"是一种独特的设计，它通过三个小球围绕中心转动的动画效果，既增添了视觉吸引力，又提供了明确的反馈，让用户知道数据正在加载。接下来，我们将深入探讨这一动画实现的关键知识点。 首先，...
Android Ultra ptr 下拉刷新 仿QQ聊天界面的下拉刷新
03-25
"Android Ultra ptr 下拉刷新 仿QQ聊天界面的下拉刷新"是一个特殊的实现，它模仿了QQ聊天应用中的下拉刷新效果，特别是那个旋转的小圆圈动画。这种效果为用户提供了直观的反馈，表明数据正在加载中。 首先，我们来...
Android自定义View仿腾讯TIM下拉刷新View
01-05
偶然间看到 TIM 邮箱界面的刷新 View 还挺好玩的，于是就自己动手实现了一个，先看看 TIM 里边的效果图： 二 需求分析 看到上面的动图，大概也知道我们需要实现的功能： 根据拖动的进度来移动小球的位置 小球...
Android高仿qq5.3下拉刷新，自动加载更多，下拉回弹，仿IOS橡皮筋效果，通用版，效果完美！
12-30
在Android开发中，为了提升用户体验，常常需要实现类似QQ5.3版本的下拉刷新、自动加载更多以及具有iOS风格的橡皮筋回弹效果。这些功能使得用户在浏览列表时能够轻松地获取新数据，并享受到流畅自然的交互体验。下面...
android 水滴动画版下拉刷新
09-14
代码为博客的实例代码，有问题请博客留言：http://blog.csdn.net/seven2729/article/details/48435523
安卓Android工具栏刷新按钮的动画旋转效果实现
10-25
点击单箭头刷新按钮后，按钮变成旋转的圆圈。
Android仿QQ邮箱客户端源码_QQ_android_
09-29
Android仿QQ邮箱，功能简单，逻辑清楚，可供学习
Android应用源码之仿QQ邮箱安卓客户端项目.zip
09-03
重要源码，欢迎下载
android下拉刷新精彩动画
偶像宣言
04-15 710
之前看到一种下拉刷新的效果，与以往的下拉效果都不一样，大多数下拉刷新都是一个圆形进度条在旋转，而这个下拉刷新则是一个不断填充的效果。本以为这是个自定义View，后来反编译慕课网的app后提取资源的时候看到好多的图片，那大概慕课网app内部的实现应该是帧动画达到这种效果。而当我看到这种效果的时候，由于前段时间在学自定义控件，所以本能的反应则是自定义的。首先我们看下慕课网的效果。如下图package c
Andriod下拉刷新(适配常用样式动画)
qq_35780492的博客
05-16 173
地址     https://github.com/Aspsine/SwipeToLoadLayout
android 旋转刷新动画
仰望星空
05-10 1064
final ImageView refresh = findViewById(R.id.activity_other_top_refresh); final ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(refresh, "rotation", 1080f); objectAnimator.setDuration(2000); ob...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值