Android 实现的下拉刷新效果

下面是自己实现的效果:

1、分析

可以将动画分解成:

睁眼毛驴绕着中心地球旋转,并且在到达地球中心时,切换为闭眼毛驴,最后发射出去

地球自我旋转,随着下拉而缓缓上升,达到半径距离后停止上升

一颗上下来回移动的卫星

2、实现

(1)下载赶集app,然后将其后缀名改为zip解压获取我们需要的资源图片:

(2) 我们先实现卫星的上下移动

核心代码:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Matrix matrixPlanet = new Matrix();
        matrixPlanet.setScale(0.4f, 0.4f);
        matrixPlanet.postTranslate(locationX / 2 * 3, locationY /4);
        matrixPlanet.postTranslate(0, upDateY);
        canvas.drawBitmap(flyingPlanet,matrixPlanet,null);

    }
    public void startTranslatePlanet(int duration){
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setFloatValues(-50.0f, 50.0f);
        valueAnimator.setDuration(duration);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                upDateY = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.start();
    }

思想:使用Matrix来设置图形变换,调用setScale()设置Bitmap缩放大小,然后调用postTranslate()将Bitmap平移到卫星的初始位置。最后使用ValueAnimator计算卫星上下移动的距离,再调用postTranslate()即可。

(3)地球自我旋转,随着下拉而缓缓上升,达到半径距离后停止上升。

核心代码:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Matrix matrixBall = new Matrix();
        matrixBall.setScale(0.2f, 0.2f);
        if ((locationY  + upDateY) > (locationY - flyingBall_Height / 2)) {
            matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY  + upDateY);
            matrixBall.postRotate(degreeBall, locationX, (locationY +upDateY + flyingBall_Height /2)  );
        }
        else {
            matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY - flyingBall_Height / 2);
            matrixBall.postRotate(degreeBall, locationX, locationY);

        }

        canvas.drawBitmap(flyingBall, matrixBall, null);
        canvas.drawBitmap(cloudBig , null , rectfCloudBig , null);
        canvas.drawBitmap(cloudSmall , null , rectfCloudSmall ,null);

    }

    public void startBallAnim(long duration) {
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setFloatValues(0.0f, 360.0f);
        valueAnimator.setDuration(duration);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                degreeBall = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.start();
    }
    public void UpBall(float offsetY){
        if (upDateY!=offsetY) {
            upDateY = offsetY;
            invalidate();
        }
    }

    public void accelerateBall(long duration) {
        clearAnimation();
        startBallAnim(duration);
    }

思想:同样使用Matrix,先设置缩放大小。调用

matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY  + upDateY);

将bitmap隐藏在view可视范围的下方,然后通过下拉刷新列表获取下拉刷新的Y坐标的改变量,调用postTranslate()上移改变量大小的距离即可。自转动画的实现,就是调用postRotate()方法 使用ValueAnimator 获取改变量。因为地球是上升的,所以我们需要动态的设置旋转的中心。

matrixBall.postRotate(degreeBall, locationX, (locationY +upDateY + flyingBall_Height /2)  );

只需要改变减去下拉刷新列表获取下拉刷新的Y坐标的改变量就可以了。

(3) 睁眼毛驴绕着中心地球旋转,并且在到达地球中心时,切换为闭眼毛驴,最后发射出去

核心代码:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Matrix matrix = new Matrix();
        matrix.setScale(0.3f, 0.3f);
        matrix.postTranslate(pointDonkey.getDx(), pointDonkey.getDy());
        matrix.postRotate(degree, locationX, locationY + flyingBall_Width / 2);
        matrix.postTranslate(0 , upDateY);
        canvas.drawBitmap(flyingDonkey, matrix, null);
    }

思想:与上面一样,先调用setScale()设置缩放大小,在进行平移旋转操作的时候。

 matrix.postRotate(degree, locationX, locationY + flyingBall_Width / 2);
 matrix.postTranslate(0 , upDateY);

我们先绕着还没有移动的地球旋转,然后调用postTranslate()将其与地球一起上升。

源码地址:

https://github.com/sangenan/DonkeyRefresh

到这里就结束啦。

以上就是Android 实现的下拉刷新效果的详细内容,更多关于Android 下拉刷新的资料请关注179885.Com其它相关文章!

猜你在找的Android 实现的下拉刷新效果相关文章

最近在使用赶集网的时候,发现他的下拉刷新十分有趣,是一头飞行的小毛驴,作为开发者自然心里痒痒打算把它做出来顺便锻炼下自己的动手能力。本文讲解如何仿照实现该效
由于项目和语音识别相关,有时候人在不经意间交流的无效音频会被识别出来,并展示于界面,为了美观,客户要求我们将这些无效的识别文本用一个从右到左的动画给清除,于是便
AspectJ是实现AOP的其中一款框架,内部通过处理字节码实现代码注入,文章给大家提到AspectJ基础语法和集成AspectJ的方式,对AspectJ在android中使用教程感兴趣的朋友跟
这篇文章主要为大家详细介绍了Android自定义view实现TextView方形输入框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了android实现简易登录注册界面及逻辑设计,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ViewModel 是 Jetpack 的一部分。 ViewModel 类旨在以注重生命周期的方式存储和管理界面相关的数据。ViewModel 类让数据可在发生屏幕旋转等配置更改后继续留存。
在Android系统中,所有的应用程序进程以及系统服务进程SystemServer都是由Zygote进程孕育(fork)出来的,这也许就是为什么要把它称为Zygote(受精卵)的原因吧。由于Zygote
突然发现微信下拉小程序入口动画非常细腻,比较好奇,所以仿照他做了一个,并不是很完美,部分效果还没完成,但总体自我感觉还不错,效果见下文
在android的应用中越来越多的包含了网络互动功能,这就带来了注册,登陆账号功能,这篇文章主要给大家介绍了关于Android实现简易登陆注册逻辑的相关资料,需求的大佬
生成图片保存是常见的需求,几乎任何的app都能用到这个需求,本文将提供一种思路,有此需求的朋友可以参考下
像Unity3D下的RTMP或RTSP播放器一样,好多开发者苦于在Unity环境下,如何高效率低延迟的把数据采集并编码实时推送到流媒体服务器,实现Unity场景下的低延迟推拉流方案
侧边弹窗是在左边,需要定位好位置,实现原理其实就是进出动效,用位移加透明度效果来控制,下面通过代码给大家介绍android 实现侧边弹窗,需要的朋友参考下吧