开源框架ListViewAnimations解析

1 概念

ListViewAnimations是一个带Item显示动画的ListView，动画包括底部飞入、其他方向斜飞入、下层飞入、渐变消失、滑动删除等

项目地址：https://github.com/nhaarman/ListViewAnimations
Demo地址：https://play.google.com/store/apps/details?id=com.haarman.listviewanimations

2 使用

(1) 添加一下库文件

lib-core：这是ListViewAnimations的核心库，它包含各种各样的动画效果
lib-manipulation:包括一些对listView item的操作，例如 Swipe-to-Dismiss, and Drag-and-Drop
lib-core=slh:对核心库库进行了扩展，支持StickyListHeaders(轻松给listView添加header)

(2) build.gradle配置

repositories {
    mavenCentral()
}
dependencies {
    compile 'com.nhaarman.listviewanimations:lib-core:3.1.0@aar'
    compile 'com.nhaarman.listviewanimations:lib-manipulation:3.1.0@aar'
    compile 'com.nhaarman.listviewanimations:lib-core-slh:3.1.0@aar'
}

3 如何移植项目

在导入了上述三个库文件的前提下

(1) 初始化ListView

protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_appearanceexample);
		mListView = (ListView) findViewById(R.id.activity_appearanceexample_listview);
		mCurrentListView = mListView;
		mAdapter = new MyAdapter(this, getItems());
		setRightAdapter();
	}

(2)调用ListViewAnimations提供的动画API

private void setRightAdapter() {
		AnimationAdapter animAdapter = new SwingRightInAnimationAdapter(mAdapter);
		animAdapter.setAbsListView(mCurrentListView);
		mCurrentListView.setAdapter(animAdapter);
	}

详情请参考：http://nhaarman.github.io/listviewanimations/#getting-started

4 ListViewAnimations源码解析

我就拿一个从listView item从右边慢慢显示出来，期间前一个item比后一个item先出现的动画效果

4.1构造一个SwingRightInAnimationAdapter对象

我们使用SwingRightInAnimationAdapter的时候你可以看到以下代码：

	protected final BaseAdapter mDecoratedBaseAdapter;
	private AbsListView mListView;
	public BaseAdapterDecorator(BaseAdapter baseAdapter) {
		mDecoratedBaseAdapter = baseAdapter;
	}
	public void setAbsListView(AbsListView listView) {
		mListView = listView;
		if (mDecoratedBaseAdapter instanceof BaseAdapterDecorator) {
			((BaseAdapterDecorator) mDecoratedBaseAdapter).setAbsListView(listView);
		}
		if (mListView instanceof DynamicListView) {
			DynamicListView dynListView = (DynamicListView) mListView;
			dynListView.setIsParentHorizontalScrollContainer(mIsParentHorizontalScrollContainer);
			dynListView.setDynamicTouchChild(mResIdTouchChild);
		}
	}

构造一个SwingRightInAnimationAdapter类的时候传入了一个BaseAdapter对象，同时也设置了一个ListView对象也作为它的成员类，这个adapter和listView就是我们项目中原来就有的adapter和ListView，同事它还复写了adapter中所有的方法，例如getView，getItem，getViewType...

这用到了装饰设计模式，在不改变原来类的情况下，对原来的类进行增强。典型的OCP原则，一个好的程序是对内封闭，对外开放的。

4.2在来看看SwingRightInAnimationAdapter的源码

SwingRightInAnimationAdapter是抽象类SingleAnimationAdapter 的子类，它继承了getAnimator()方法

public class SwingRightInAnimationAdapter extends SingleAnimationAdapter {
	private final long mAnimationDelayMillis;
	private final long mAnimationDurationMillis;
	public SwingRightInAnimationAdapter(BaseAdapter baseAdapter) {
		this(baseAdapter, DEFAULTANIMATIONDELAYMILLIS, DEFAULTANIMATIONDURATIONMILLIS);
	}
	public SwingRightInAnimationAdapter(BaseAdapter baseAdapter, long animationDelayMillis) {
		this(baseAdapter, animationDelayMillis, DEFAULTANIMATIONDURATIONMILLIS);
	}
	public SwingRightInAnimationAdapter(BaseAdapter baseAdapter, long animationDelayMillis, long animationDurationMillis) {
		super(baseAdapter);
		mAnimationDelayMillis = animationDelayMillis;
		mAnimationDurationMillis = animationDurationMillis;
	}
   
	@Override
	protected long getAnimationDelayMillis() {
		return mAnimationDelayMillis;
	}
	@Override
	protected long getAnimationDurationMillis() {
		return mAnimationDurationMillis;
	}
	@Override
	protected Animator getAnimator(ViewGroup parent, View view) {
		return ObjectAnimator.ofFloat(view, "translationX", parent.getWidth(), 0);
	}
}

其中：

getAnimationDelayMillis：是获取每一个item动画延迟加载的时间

getAnimationDurationMillis：动画运行时间

getAnimator：动画的类型(item的宽度从0渐变到listView的宽度的一个动画)，不同类型的动画该方法的实现并不相同。

4.3 AnimationAdapter源码

AnimationAdapter是BaseAdapterDecorator的子类，在4.1中我们已经知道了，BaseAdapterDecorator中有getView，getItem这些类似于adapter的方法其实就是我们自己定义的ListView的适配器中的方法.

@Override
	public int getCount() {
		return mDecoratedBaseAdapter.getCount();
	}
	@Override
	public Object getItem(int position) {
		return mDecoratedBaseAdapter.getItem(position);
	}
	@Override
	public long getItemId(int position) {
		return mDecoratedBaseAdapter.getItemId(position);
	}
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		return mDecoratedBaseAdapter.getView(position, convertView, parent);
	}

而在AnimationAdapter中我们发现它重写了AnimationAdapter的getView方法(这其实就是我们的adapter的getView方法)

@Override
	public final View getView(int position, View convertView, ViewGroup parent) {
		boolean alreadyStarted = false;
		if (!mHasParentAnimationAdapter) {
			if (getAbsListView() == null) {
				throw new IllegalStateException("Call setListView() on this AnimationAdapter before setAdapter()!");
			}
			if (convertView != null) {
				alreadyStarted = cancelExistingAnimation(position, convertView);
			}
		}
		View itemView = super.getView(position, convertView, parent);
		if (!mHasParentAnimationAdapter && !alreadyStarted) {
			animateViewIfNecessary(position, itemView, parent);
		}
		return itemView;
	}

这段代码是实现ListView item 从右往左出现动画的核心代码,思路是：

(1) 由于getView是瞬时的，为了避免item瞬时的显示出来，先要调用hideView()方法隐藏item

private void hideView(View view) {
		ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 0);
		AnimatorSet set = new AnimatorSet();
		set.play(animator);
		set.setDuration(0);
		set.start();
	}

(2) 拿到item从往左显示的动画，这个动画是实质上就是SwingRightInAnimationAdapter中的getAnimator()方法

	@Override
	protected Animator getAnimator(ViewGroup parent, View view) {
		return ObjectAnimator.ofFloat(view, "translationX", parent.getWidth(), 0);
	}

(3) 设置item动画延迟时间

item从右往左显示是一个T字形出来的，所以每个position上的item的动画的延迟时间是不一样的。

set.setStartDelay(calculateAnimationDelay(isHeader));

我们看看calculateAnimationDelay方法是怎么写的

@SuppressLint("NewApi")
	private long calculateAnimationDelay(boolean isHeader) {
		long delay;
		int numberOfItems = getAbsListView().getLastVisiblePosition() - getAbsListView().getFirstVisiblePosition();
		if (numberOfItems + 1 < mLastAnimatedPosition) {
			delay = getAnimationDelayMillis();
			if (getAbsListView() instanceof GridView && Build.VERSION.SDK_INT >= 11) {
				delay += getAnimationDelayMillis() * ((mLastAnimatedPosition + 1) % ((GridView) getAbsListView()).getNumColumns());
			}
		} else {
			long delaySinceStart = (mLastAnimatedPosition - mFirstAnimatedPosition + 1) * getAnimationDelayMillis();
			delay = mAnimationStartMillis + getInitialDelayMillis() + delaySinceStart - System.currentTimeMillis();
			delay -= isHeader && mLastAnimatedPosition > 0 ? getAnimationDelayMillis() : 0;
		}
		// System.out.println(isHeader + ": " + delay);
		return Math.max(0, delay);
	}

(4)开始动画集合

Animator[] animators = getAnimators(parent, view);
		Animator alphaAnimator = ObjectAnimator.ofFloat(view, "alpha", 0, 1);
		AnimatorSet set = new AnimatorSet();
		set.playTogether(concatAnimators(childAnimators, animators, alphaAnimator));
		set.setStartDelay(calculateAnimationDelay(isHeader));
		set.setDuration(getAnimationDurationMillis());
		set.start();

源码就这么简单，原理就是当adapter再调用getView的时候，给每个item一个动画效果。

5 自定义ListView item从右往左出现的动画效果

ListViewAnimations看上去天衣无缝，但是当我们仅仅需要在点击一个button的时候，出现这个动画效果，你会发现它满足不了需要，这个时候就要自己写一个ListViewAnimation了。

看看我们项目中的需求：

点击“换一批”要让Item从右往左呈阶梯形出现。但是不希望listView滑动的时候不要出现这种效果，很明显我们要改ListViewAnimations

5.1 新建一个IAnimationManager接口，定义一个从右往左出现动画

public interface IAnimationManager {
     public void startRightAppearanceAnimation(int position,View view, ViewGroup parent);
}

定义接口的原因是扩展用，以后要是产品经理说动画不要了，你换别的。这个时候我原来的代码基本不要动，只要在接口中增加一个方法即可。

5.2 新建一个类实现IAnimationManager接口

public class AnimationModel implements IAnimationManager {
    private boolean ifCanAnimation;//是否启动动画，true运行动画，false动画停止
    /**
     * listView item从右边出现动画效果
     */
    @Override
    public void startRightAppearanceAnimation(int position,View view, ViewGroup parent) {
        if(!ifCanAnimation)  return;
        //隐藏itemView
        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 0);
        AnimatorSet hiddenSet = new AnimatorSet();
        hiddenSet.play(animator);
        hiddenSet.setDuration(0);
        hiddenSet.start();
        //item从右出现动画
        view.measure(0,0);
        ObjectAnimator oa = ObjectAnimator.ofFloat(view, "translationX", view.getMeasuredWidth(), 0);
        Animator alphaAnimator = ObjectAnimator.ofFloat(view, "alpha", 0, 1);
        AnimatorSet set = new AnimatorSet();
        long delay =  100 * (position-1);
        set.playTogether(oa,alphaAnimator);
        set.setStartDelay(delay);
        set.start();
    }
    public boolean getIfCanAnimation() {
        return ifCanAnimation;
    }
    public void setIfCanAnimation(boolean ifCanAnimation) {
        this.ifCanAnimation = ifCanAnimation;
    }
}

(1)重写StartRightAppearanceAnimation()方法，并定义一个标志位来控制动画是否能开启

(2)隐藏Item

 ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 0);
        AnimatorSet hiddenSet = new AnimatorSet();
        hiddenSet.play(animator);
        hiddenSet.setDuration(0);
        hiddenSet.start();

(3)item出现动画

view.measure(0,0);
        ObjectAnimator oa = ObjectAnimator.ofFloat(view, "translationX", view.getMeasuredWidth(), 0);
        Animator alphaAnimator = ObjectAnimator.ofFloat(view, "alpha", 0, 1);
        AnimatorSet set = new AnimatorSet();
        long delay =  100 * (position-1);
        set.playTogether(oa,alphaAnimator);
        set.setStartDelay(delay);
        set.start();

(4) 在adapter中定义一个动画开启方法

 /**
     * 换一批动画效果
     * @param position
     * @param view
     * @param parent
     */
    private void startAnimations(int position, View view, ViewGroup parent){
        animationModel.startRightAppearanceAnimation(position,view,parent);
        if(getItemSize() == position){
            animationModel.setIfCanAnimation(false);
        }
    }

当滑动到最后一个item的时候，设置不能动画不能运行

(5) 点击"换一批"按钮的时候,设置动画不能运行

 animationModel.setIfCanAnimation(true);

说明：我这里使用的ObjectAnimator是android自带的API,需要API15才支持，所以在低版本的手机上是看不到动画效果的，这个时候你可以导入一个nineoldandroids-2.4.0jar,就可以兼容3.0以上的系统。

nineoldandroids-2.4.0jar 下载地址：http://nineoldandroids.com/

开源框架ListViewAnimations解析

5.2 新建一个类实现IAnimationManager接口

猜你喜欢