android scrollby 动画,Android UI-移动和滑动效果(二)

概述

上一篇博客中，我们讲了View移动动画各个方法的不同原理。那么这一篇具体讲下移动和滑动效果的具体实现。

这篇中主要简介五中主要的实现移动和滑动效果的方法。1、通过LayoutParams方法2、通过scrollTo和scrollBy方法3、通过Scroller方法4、通过属性动画

LayoutParams

LayoutParams中保存了View的布局参数，所以可以直接通过修改LayoutParams来修改位置参数，从而达到改变View位置的效果。在这里要注意的是，一般我们会拿到View的父控件类型相对应的LayoutParams来进行设置(如RelativeLayout.LayoutParams)，不然运行时会产生异常。只要谁知Margin的话，也可以拿MarginLayoutParams，而不用去管父控件的类型。下面就用代码来尝试一下。

布局,只是一个简单的RelativeLayout中有一个View:

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/colorPrimary_1">

android:id="@+id/view_layoutparams"

android:layout_width="200dp"

android:layout_height="200dp"

android:background="@color/colorAccent_1" />

代码，在代码中动态设置View的margin值:

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_layout_params);

View view_layoutparams = findViewById(R.id.view_layoutparams);

RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) view_layoutparams.getLayoutParams();

params.leftMargin= view_layoutparams.getLeft()+100;

view_layoutparams.setLayoutParams(params);

view_layoutparams.requestLayout();

}

效果如下：

image.png

可以看到，我们设置了marginLeft，然后界面就向右移动了100px的距离。同样我们可以通过MarginLayoutParams；来完成这件事情：

ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view_layoutparams.getLayoutParams();

params.leftMargin= view_layoutparams.getLeft()+100;

view_layoutparams.setLayoutParams(params);

view_layoutparams.requestLayout();

到这里大家应该可以发现，其实MarginLayoutParams应该是RelativeLayout.LayoutParams等具体控件所对应的LayoutParams的父类。

ScrollTo和ScrollBy

scrollTo和scrollBy的原理前面一篇博客已经讲到过了。这里我们直接用代码来做演示。

布局和LayoutParams的代码没有区别。看下Activity中的代码，非常简单，只有一行：

((View)view_layoutparams.getParent()).scrollBy(-100,-100);

上篇讲到，scrollTo和scrollBy方法只能改变View中的内容的位置。所以我们先拿到了父控件，然后对父控件进行scroll操作。

讲到这里，我们发现我们讲的都是静态设置控件的位置，然而我们需要的是能够动态滑动的效果。街小区的Scroller这个类，能够很好地帮忙解决这个问题。

Scroller

使用Scroller能够实现平滑的滑动效果，而不会像直接使用LayoutParams和ScrollTo那么突兀。其实Scroller和ScrollTo有着非常大的联系。那么我们就看下代码上怎么实现。由于Scroller需要结合computeScroll使用，所以我们先自定义一个View：

public class ScrollerView extends View {

public ScrollerView(Context context) {

super(context);

init(context);

}

public ScrollerView(Context context, AttributeSet attrs) {

super(context, attrs);

init(context);

}

public ScrollerView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init(context);

}

Context mContext;

//定义一个Scroller

private Scroller mScroller;

private void init(Context context) {

mContext = context;

mScroller = new Scroller(mContext);

}

//写一个public的调用方法

public void startScroll(int startX,int startY,int dx,int dy,int duaration){

mScroller.startScroll(startX,startY,dx,dy,duaration);

}

// 继承computeScroll方法，实现滑动的功能

@Override

public void computeScroll() {

//这个方法计算当前的位置，并判断是否已经执行完毕，如果完毕则返回false

if(mScroller.computeScrollOffset()){

// 具体做动画的地方

((View)getParent()).scrollTo(mScroller.getCurrX(),mScroller.getCurrY());

//这句代码一定要加，不然无法实现滑动的效果

postInvalidate();;

}

}

}

在Activity中执行

ScrollerView view_scroller = (ScrollerView) findViewById(R.id.view_scroller);

view_scroller.startScroll(0, 0, -1000, 0, 6000);

来看下具体的效果

1.gif

具体的Scoller的执行原理网上已经有很多的博客解释过，这里不再详细讲解，只是简单介绍下原理。我们只看下computeScrollOffset中的一句代码：

int timePassed = (int)(AnimationUtils.currentAnimationTimeMillis() - mStartTime);

看到这句代码，相信大家已经猜到了计算当前位置的方式，就是通过当前的时间减去开始的时间，再除以我们设置的duration时间。这样就可以计算出当前的位置所在，那么还有一个问题，如何定时或者不定时更新界面呢，这就是postInvalidate这个方法的威力了。在调用postInvalidate方法的过程中，会导致View的重回，重绘时会调用comoputeScroll方法，这样我们就又回到方法中，根据当前的时间重新计算位置，然后执行滑动操作。非常巧妙的一个方法。

既然ScrollTo可以，那么我们也来试一下LayoutParams来执行滑动。

修改一下代码：

if (mScroller.computeScrollOffset()) {

//((View)getParent()).scrollTo(mScroller.getCurrX(),mScroller.getCurrY());

ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();

params.leftMargin = mScroller.getCurrX();

setLayoutParams(params);

postInvalidate();

}

也可以实现同样的效果，但是两种实现方式的原理稍微有点不一样，ScrollTo是改变了mScrollX和mScrollY的值，而LayoutParams是改变了整体的布局参数。

属性动画

属性动画的原理和简单的实现上篇博客已经讲过，这里来具体看下代码：

View view_animation = findViewById(R.id.view_animation);

ObjectAnimator.ofFloat(view_animation, "translationX", 0, 1000).setDuration(6000).start();

效果如下：

GIF.gif

这种方式非常简单，只要一行代码就可以实现。也可以使用ValueAnimation来做动画，下面是一个具体的例子,这里ValueAnimator只是计算了fraction，没有执行具体的动画。查看源码可以知道，这个过程是用handler来执行的。

ValueAnimator animator = ValueAnimator.ofInt(0, 1).setDuration(6000);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

float f = animation.getAnimatedFraction();

((View) view_animation.getParent()).scrollTo(-(int) (f * 1000), 0);

}

});

animator.start();

总结

这篇是对上篇原理篇的补充，两篇合起来讲了Android的位置属性，并介绍了简单的滑动效果的处理。后续会减少更加 深入的动画和UI实现过程。