android组件的下拉回弹,实现一个带下拉弹簧动画的 ScrollView

深藏阁楼爱情的钟 2022-10-16 05:49 7阅读 0赞

原标题：实现一个带下拉弹簧动画的 ScrollView

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

![70fe2af69fbe2771a393172000f2f9e2.png][]

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 的基本用法，首先是它的构造方法：

publicSpringAnimation(View v, ViewProperty property, floatfinalPosition)\{

super(v, property);

mSpring = newSpringForce(finalPosition);

setSpringThreshold;

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

v - 要执行动画的控件

property - 动画的性质，可以选择平移、缩放、旋转等

finalPosition - 动画结束时，控件所在位置的坐标偏移量

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

springAnim = newSpringAnimation( this, SpringAnimation.TRANSLATION\_Y, 0);

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

Stiffness - 刚度，值越大回弹的速度越快，类似于劲度系数，默认值是 1500f

DampingRatio - 阻尼，值越小，回弹后，动画来回的次数越多，就是更有「DUANG」的感觉，默认值是 0.5f

通过

springAnim.getSpring.setStiffness( floatstiffness)

和

springAnim.getSpring.setDampingRatio( floatdampingRatio)

来设置上面两个属性。

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

SpringScrollView

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

@Override

publicbooleanonTouchEvent(MotionEvent e)\{

switch(e.getAction) \{

caseMotionEvent.ACTION\_MOVE:

if(getScrollY <= 0) \{

//顶部下拉

if(startDragY == 0) \{

startDragY = e.getRawY;

if(e.getRawY - startDragY > 0) \{

setTranslationY((e.getRawY - startDragY) / 3);

returntrue;

\} else\{

springAnim.cancel;

setTranslationY( 0);

break;

caseMotionEvent.ACTION\_UP:

caseMotionEvent.ACTION\_CANCEL:

if(getTranslationY != 0) \{

springAnim.start;

startDragY = 0;

break;

returnsuper.onTouchEvent(e);

简单解释一下哈。

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

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

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

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

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

getScrollY + getHeight) >= getChildAt( 0).getMeasuredHeight

判断是否滑动到了底部。

完整代码如下：

publicclassSpringScrollViewextendsNestedScrollView\{

privatefloatstartDragY;

privateSpringAnimation springAnim;

publicSpringScrollView(Context context)\{

this(context, null);

publicSpringScrollView(Context context, @Nullable AttributeSet attrs)\{

this(context, attrs, 0);

publicSpringScrollView(Context context, @Nullable AttributeSet attrs, intdefStyle)\{

super(context, attrs, defStyle);

springAnim = newSpringAnimation( this, SpringAnimation.TRANSLATION\_Y, 0);

//刚度 默认1200 值越大回弹的速度越快

springAnim.getSpring.setStiffness( 800.0f);

//阻尼 默认0.5 值越小，回弹之后来回的次数越多

springAnim.getSpring.setDampingRatio( 0.50f);

@Override

publicbooleanonTouchEvent(MotionEvent e)\{

switch(e.getAction) \{

caseMotionEvent.ACTION\_MOVE:

if(getScrollY <= 0) \{

//顶部下拉

if(startDragY == 0) \{

startDragY = e.getRawY;

if(e.getRawY - startDragY > 0) \{

setTranslationY((e.getRawY - startDragY) / 3);

returntrue;

\} else\{

springAnim.cancel;

setTranslationY( 0);

\} elseif((getScrollY + getHeight) >= getChildAt( 0).getMeasuredHeight) \{

//底部上拉

if(startDragY == 0) \{

startDragY = e.getRawY;

if(e.getRawY - startDragY < 0) \{

setTranslationY((e.getRawY - startDragY) / 3);

returntrue;

\} else\{

springAnim.cancel;

setTranslationY( 0);

break;

caseMotionEvent.ACTION\_UP:

caseMotionEvent.ACTION\_CANCEL:

if(getTranslationY != 0) \{

springAnim.start;

startDragY = 0;

break;

returnsuper.onTouchEvent(e);

最后看看效果吧：

![c74aafcc8daefa74cee668d824440177.gif][]

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

源码地址：

https://github.com/SouthernBox/SpringScrollView返回搜狐，查看更多

责任编辑：

[70fe2af69fbe2771a393172000f2f9e2.png]: /images/20221014/454a2f3149b148cfa535178d33833e5f.png
[c74aafcc8daefa74cee668d824440177.gif]: https://img-blog.csdnimg.cn/img_convert/c74aafcc8daefa74cee668d824440177.gif

android组件的下拉回弹,实现一个带下拉弹簧动画的 ScrollView

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关实现Android开发中ListView下拉回弹刷新功能

相关 js上拉下拉回弹

相关 cubic-bezier处理下拉和回弹

相关 android组件的下拉回弹,实现一个带下拉弹簧动画的 ScrollView

相关 Android：控件Spinner实现下拉列表

相关 android下拉弹出框

相关 Android动画实战-实现下拉式窗帘动画和上拉式抽屉动画

相关回显带 forEach 循环的下拉框

相关 jQuery二级下拉菜单下拉箭头翻转动画

相关 Android 下拉刷新控件