专栏首页NanBox实现一个带下拉弹簧动画的 ScrollView

实现一个带下拉弹簧动画的 ScrollView

在刚推出的 Support Library 25.3.0 里面新增了一个叫 SpringAnimation 的动画,也就是弹簧动画。要是用它来做一个滑动控件下拉回弹的效果,应该不错吧。

SpringAnimation

开始之前,别忘了在 app 的 build.gradle 加上:

compile 'com.android.support:appcompat-v7:25.3.0' compile 'com.android.support:design:25.3.0' compile 'com.android.support:support-dynamic-animation:25.3.0'

然后我们看看 SpringAnimation 的基本用法,首先是它的构造方法:

public SpringAnimation(View v, ViewProperty property, float finalPosition) {
    super(v, property);
    mSpring = new SpringForce(finalPosition);
    setSpringThreshold();
}
复制代码

看命名可以大概猜到参数的意义了:

  • v - 要执行动画的控件
  • property - 动画的性质,可以选择平移、缩放、旋转等
  • finalPosition - 动画结束时,控件所在位置的坐标偏移量

这里实现的滑动控件是上下滑动的,所以我们这样来获取 SpringAnimation :

springAnim = new SpringAnimation(this, SpringAnimation.TRANSLATION_Y, 0);
复制代码

SpringAnimation 里面有两个比较重要的属性,分别是:

  • Stiffness - 刚度,值越大回弹的速度越快,类似于劲度系数,默认值是 1500f
  • DampingRatio - 阻尼,值越小,回弹后,动画来回的次数越多,就是更有「DUANG」的感觉,默认值是 0.5f

通过

springAnim.getSpring().setStiffness(float stiffness) 
复制代码

springAnim.getSpring().setDampingRatio(float dampingRatio) 
复制代码

来设置上面两个属性。

再调用 springAnim.start() 就可以开始动画啦。

SpringScrollView

我们自定义一个 SpringScrollView 继承 NestedScrollView,重写 onTouchEvent 方法让它有回弹的效果:

@Override
public boolean onTouchEvent(MotionEvent e) {
    switch (e.getAction()) {
        case MotionEvent.ACTION_MOVE:
            if (getScrollY() <= 0) {
                //顶部下拉
                if (startDragY == 0) {
                    startDragY = e.getRawY();
                }
                if (e.getRawY() - startDragY > 0) {
                    setTranslationY((e.getRawY() - startDragY) / 3);
                    return true;
                } else {
                    springAnim.cancel();
                    setTranslationY(0);
                }
            } 
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            if (getTranslationY() != 0) {
                springAnim.start();
            }
            startDragY = 0;
            break;
    }
    return super.onTouchEvent(e);
}
复制代码

简单解释一下哈。

当 ScrollView 在顶部时,记录下手指所在的 y 轴位置。在顶部并且是往下滑动的时候,给 ScrollView 设置一个纵向的偏移。之所以除以 3,是为了让控件有种要用力才能拖动的感觉。

在顶部的时候如果是往上滑动,则把动画效果取消,把控件位置复原,否则可能出现控件一直偏移的情况。

最后当手指抬起时,执行弹簧动画就好了。

为什么这里用 getRawY() 获取坐标,而不是用 getY() 来获取。因为 getY() 是相对于控件的坐标,当设置了 TranslationY 之后会改变它的值,也就是在滑动的时候 getY() 的值是不连续的,会出现卡顿的现象。而 getRawY() 是相对于屏幕的位置,管你控件怎么动,屏幕都是固定的。

下拉回弹的效果就已经完成了。对了,我们顺便把底部上拉的回弹也做一下呗。由于ScrollView只有一个子布局,所以可以通过

getScrollY() + getHeight()) >= getChildAt(0).getMeasuredHeight()
复制代码

判断是否滑动到了底部。

完整代码如下:

public class SpringScrollView extends NestedScrollView {

    private float startDragY;
    private SpringAnimation springAnim;

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

    public SpringScrollView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SpringScrollView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        springAnim = new SpringAnimation(this, SpringAnimation.TRANSLATION_Y, 0);
        //刚度 默认1200 值越大回弹的速度越快
        springAnim.getSpring().setStiffness(800.0f);
        //阻尼 默认0.5 值越小,回弹之后来回的次数越多
        springAnim.getSpring().setDampingRatio(0.50f);
    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        switch (e.getAction()) {
            case MotionEvent.ACTION_MOVE:
                if (getScrollY() <= 0) {
                    //顶部下拉
                    if (startDragY == 0) {
                        startDragY = e.getRawY();
                    }
                    if (e.getRawY() - startDragY > 0) {
                        setTranslationY((e.getRawY() - startDragY) / 3);
                        return true;
                    } else {
                        springAnim.cancel();
                        setTranslationY(0);
                    }
                } else if ((getScrollY() + getHeight()) >= getChildAt(0).getMeasuredHeight()) {
                    //底部上拉
                    if (startDragY == 0) {
                        startDragY = e.getRawY();
                    }
                    if (e.getRawY() - startDragY < 0) {
                        setTranslationY((e.getRawY() - startDragY) / 3);
                        return true;
                    } else {
                        springAnim.cancel();
                        setTranslationY(0);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                if (getTranslationY() != 0) {
                    springAnim.start();
                }
                startDragY = 0;
                break;
        }
        return super.onTouchEvent(e);
    }

}
复制代码

最后看看效果吧:

同样的思路也可以用在别的滑动控件里面。

妥妥的。

源码地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android Jetpack - 使用 WorkManager 管理后台任务

    作为 Android Jetpack 中的新组件,WorkManager 负责用来管理后台任务,它和一个异步任务以及 Service 有什么区别呢?看完你就知道...

    NanBox
  • 像 QQ 一样处理滑动冲突

    在项目中,如果要用到滑动控件嵌套滑动控件,总会让人很心塞。因为很可能会出现冲突的问题。这里举个例子,利用事件分发机制,处理侧滑菜单控件和列表中的侧滑删除控件间的...

    NanBox
  • 给 RecyclerView 加上折叠的效果

    RecyclerView 有很高的自由度,可以说只有想不到没有做不到,真是越用越喜欢。这次用超简单的方法,让 RecyclerView 带上折叠的效果。

    NanBox
  • 以卖香蕉为例,从4个方面了解SQL的数据汇总

    导读:面对一个新数据集时,人们往往会关心数据中的异常值、数据的分布形式、行列之间的关系等。SQL是一种专为数据计算设计的语言,其中已经内置了许多数据汇总函数,也...

    华章科技
  • TBtools基因家族分析详细教程(1)

    一共分为4个部分 TBtools基因家族分析详细教程(1) TBtools基因家族分析详细教程(2)基因家族成员的基本分析 TBtools基因家族分析详细...

    Y大宽
  • 工业大数据分析平台的应用价值探讨

    大数据经过多年的潜心发展,在当今可以说是进入到了一个快速发展期。各种围绕大数据的应用开发也迅速火热起来了。政务大数据解决方案、企业级大数据解决方案、智慧城市停车...

    用户3391135
  • SpringBoot 实战 (十三) | 整合 MyBatis (XML 版)

    如题,今天介绍 SpringBoot 与 Mybatis 的整合以及 Mybatis 的使用,之前介绍过了 SpringBoot 整合MyBatis 注解版的使...

    一个优秀的废人
  • Python|高阶函数

    01 函数名也是变量! abs(-100) 对于abs()这个函数,完全可以把函数名abs看成变量,它指向一个计算绝对值的函数! 因此,函数名其实就是指向...

    double
  • 【WAW演讲稿】高鹏——营销变简单,增长变自然,数据驱动营销价值

    大家好,我是Convertlab高鹏。 刚才宋星老师已经讲了很多。我想今天借这个难得的机会,分享一下我们有关营销云的一些个人观点。 首先先提几句,刚才宋星老师讲...

    iCDO互联网数据官
  • 2015中国大数据调研报告发布五大趋势抢先看

    在信息化加速发展的时代了,我们身边的一切正浩浩荡荡地发生着变化,人们的一切生活都开始和互联网挂钩,企业的营销也随之进行着调整。然而在这个时代,企业的营销面临着诸...

    小莹莹

扫码关注云+社区

领取腾讯云代金券