Facebook的弹性动画浅析

Facebook Rebound Android弹性动画库 源码分析

字数1588 阅读1302 评论1 喜欢16

Rebound源码分析

对于想体验一下rebound的效果，又懒得clone和编译代码的，这里提供一个demo apk。

今天看到了tumblr发布了基于rebound的Backboard，本想直接分析一下Backboard对rebound做了些什么，不过考虑到rebound还没有仔细分析过，所以这里做一下源码分析。

对外部来说，首先接触的就是SpringSystem了，但在说它之前，先让我们看看Spring是什么。

Spring

Spring通过可设置的摩擦力(Friction)和张力(tension)实现了胡克定律，通过代码模拟了物理场景：

private static class PhysicsState {  double position;  double velocity;}private final PhysicsState mCurrentState = new PhysicsState();private final PhysicsState mPreviousState = new PhysicsState();private final PhysicsState mTempState = new PhysicsState();private double mStartValue;private double mEndValue;

每个spring从mStartValue到mEndValue进行运动，内部维护了当前状态、前值状态，以及临时状态，每个状态由通过位置和速度来描述，而运动的推进逻辑则在

void advance(double realDeltaTime)

advance方法中，SpringSystem会遍历由其管理的所有Spring实例，对它们进行advance。

SpringListener

每个Spring内部都维护着一个SpringListener数组，这也是我们经常会需要去实现的一个接口：

public interface SpringListener {  void onSpringUpdate(Spring spring);  void onSpringAtRest(Spring spring);  void onSpringActivate(Spring spring);  void onSpringEndStateChange(Spring spring);}

按照先后顺序：

• onSpringActivate在首次开始运动时候调用。
• onSpringUpdate在advance后调用，表示状态更新。
• onSpringAtRest在进入rest状态后调用。
• onSpringEndStateChange则略有不同，仅在setEndValue中被调用，且该Spring需要在运动中且新的endValue不等于原endValue。

SpringSystem

SpringSystem继承了BaseSpringSystem，对外提供了一个静态create方法，并屏蔽了Construtor：

public static SpringSystem create() {  return new SpringSystem(AndroidSpringLooperFactory.createSpringLooper());}private SpringSystem(SpringLooper springLooper) {  super(springLooper);}

可以看到create方法里面默认给了一个SpringLooper的工厂类创建实例（内部根据系统版本是否>=3.0返回了不同的子类实例），而SpringLooper顾名思义是一个Looper，做的就是不断地更新SpringSystem的状态，实际调用了BaseSpringSystem的loop方法：

/** * loop the system until idle * @param elapsedMillis elapsed milliseconds */public void loop(double elapsedMillis) {  for (SpringSystemListener listener : mListeners) {    listener.onBeforeIntegrate(this);  }  advance(elapsedMillis);  if (mActiveSprings.isEmpty()) {    mIdle = true;  }  for (SpringSystemListener listener : mListeners) {    listener.onAfterIntegrate(this);  }  if (mIdle) {    mSpringLooper.stop();  }}

即通过每次elapse的时间，来把system往前advance（有点类似游戏里，每一帧的运动，如果不够快就会掉帧，这里对应地，elapsedMillis则可能会很大）。

大部分的逻辑其实在BaseSpringSystem:

public class BaseSpringSystem {  private final Map<String, Spring> mSpringRegistry = new HashMap<String, Spring>();  private final Set<Spring> mActiveSprings = new CopyOnWriteArraySet<Spring>();  private final SpringLooper mSpringLooper;  private final CopyOnWriteArraySet<SpringSystemListener> mListeners = new CopyOnWriteArraySet<SpringSystemListener>();  private boolean mIdle = true;

mSpringRegistry保存了所有由该SpringSystem管理的Spring实例，键值String则是Spring内的一个自增id，每个Spring实例的id都会不同。通过createSpring创建的Spring实例都会直接被加到该HashMap。

mActiveSprings内放的是被激活的Spring，实际在调用Spring.java:

public Spring setCurrentValue(double currentValue, boolean setAtRest);public Spring setEndValue(double endValue);public Spring setVelocity(double velocity);

三个方法的时候才会进行激活，且在实际loop过程中，也只会对激活的Spring进行advance。

mSpringLooper是该SpringSystem绑定的Looper。

mListeners是注册在该SpringSystem上的SpringSystemListener

public interface SpringSystemListener {  void onBeforeIntegrate(BaseSpringSystem springSystem);  void onAfterIntegrate(BaseSpringSystem springSystem);}

会在SpringSystem的loop方法开始和结束时候调用onBeforeIntegrate以及onAfterIntegrate，比如可以在所有Spring loop完之后检查它们的值，并进行速度限制，暂停等操作，相对于绑定到Spring的SpringListener，这个更全局一些。

SpringChain

顾名思义，SpringChain就是连锁Spring，由数个Spring结合而成，且两两相连，可以用来做一些连锁的效果，比如数个图片之间的牵引效果。

每个SpringChain都会有一个control spring来作为带头大哥，在链中前后的Spring都会被他们的前任所拉动。比如我们有 1 2 3 4 5五个Spring，选择3作为带头大哥，则3开始运动后，会分别拉动2和4，然后2会拉1，4则去拉动5。

  private SpringChain(      int mainTension,      int mainFriction,      int attachmentTension,      int attachmentFriction) {    mMainSpringConfig = SpringConfig.fromOrigamiTensionAndFriction(mainTension, mainFriction);    mAttachmentSpringConfig =        SpringConfig.fromOrigamiTensionAndFriction(attachmentTension, attachmentFriction);    registry.addSpringConfig(mMainSpringConfig, "main spring " + id++);    registry.addSpringConfig(mAttachmentSpringConfig, "attachment spring " + id++);  }

SpringChain有两个配置：

• ControlSpring使用mMainSpringConfig。
• 其他Spring则使用mAttachmentSpringConfig。

在什么参数都不带的构造函数中，会默认给出如下参数

private static final int DEFAULT_MAIN_TENSION = 40;private static final int DEFAULT_MAIN_FRICTION = 6;private static final int DEFAULT_ATTACHMENT_TENSION = 70;private static final int DEFAULT_ATTACHMENT_FRICTION = 10;

即ControlSpring摩擦力和张力都会相对小一些。

SpringChain本身实现了SpringListener，并使用那些接口来进行整个chain的更新。

@Overridepublic void onSpringUpdate(Spring spring) {    // 获得control spring的索引，并更新前后Spring的endValue，从而触发连锁影响    int idx = mSprings.indexOf(spring);    SpringListener listener = mListeners.get(idx);    int above = -1;    int below = -1;    if (idx == mControlSpringIndex) {        below = idx - 1;        above = idx + 1;    } else if (idx < mControlSpringIndex) {        below = idx - 1;    } else if (idx > mControlSpringIndex) {        above = idx + 1;    }    if (above > -1 && above < mSprings.size()) {        mSprings.get(above).setEndValue(spring.getCurrentValue());    }    if (below > -1 && below < mSprings.size()) {        mSprings.get(below).setEndValue(spring.getCurrentValue());    }    listener.onSpringUpdate(spring);}@Overridepublic void onSpringAtRest(Spring spring) {    int idx = mSprings.indexOf(spring);    mListeners.get(idx).onSpringAtRest(spring);}@Overridepublic void onSpringActivate(Spring spring) {    int idx = mSprings.indexOf(spring);    mListeners.get(idx).onSpringActivate(spring);}@Overridepublic void onSpringEndStateChange(Spring spring) {    int idx = mSprings.indexOf(spring);    mListeners.get(idx).onSpringEndStateChange(spring);}

通常我们想要这个SpringChain进行运动会调用mSpringChain.setControlSpringIndex(0).getControlSpring().setEndValue(1);

ControlSpring便会开始运动，并调用到SpringChain作为SpringListener的那些方法，进而整个系统作为一个链开始运动。

SpringConfiguratorView

SpringConfiguratorView继承了FrameLayout，如果体验过demo apk的同学，应该注意到屏幕底下上拉可以对Spring的参数进行配置，这就是由SpringConfiguratorView做的了。

AnimationQueue

同样是用来做连锁动画的，不过Backboard没有用到这个，Facebook自己的例子也没有用过该类，以前做动画的时候用过这个，结果貌似是有什么坑，最后改成了SpringChain去实现。

AnimationQueue本身和Rebound没有任何关系，内部定义了接口

public interface Callback {    void onFrame(Double value);}

原理倒是有点像rebound。由于和rebound本身没关系，这里就不多说了。

原文：http://blog.zhaiyifan.cn/2015/09/10/Facebook-Rebound-%E5%BC%B9%E6%80%A7%E5%8A%A8%E7%94%BB%E5%BA%93-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/