Android Facebook-Rebound弹性动画

ios动画和android动画

长久以来我都有这么一个疑问，为什么同样的设计，同样的动画效果，在ios上的效果要明显好于android呢？随着开发经验的积累接触到更多种类的开发机，我发现主要的原因在于ios动画效果和屏幕显示效果，默认的ios动画是有弹性效果，而在android平台上动画都是生硬的效果，而且大部分公司的设计都是以ios为基准，MD设计的android app少之又少，ios的显示效果自然好于android平台，那android上有没有类似属性动画的api，又有弹性效果的动画库呢？Facebook-Rebound就是这种库。

Facebook-Rebound

rebound 官网地址

下面是官方给的一个简单的例子：

 // Create a system to run the physics loop for a set of springs.
 SpringSystem springSystem = SpringSystem.create();

// Add a spring to the system.
Spring spring = springSystem.createSpring();

// Add a listener to observe the motion of the spring.
spring.addListener(new SimpleSpringListener() {

  @Override
  public void onSpringUpdate(Spring spring) {
    // You can observe the updates in the spring 
    // state by asking its current value in onSpringUpdate.
    float value = (float) spring.getCurrentValue();
    float scale = 1f - (value * 0.5f);
    myView.setScaleX(scale);
    myView.setScaleY(scale);
  }

});

// Set the spring in motion; moving from 0 to 1
spring.setEndValue(1);

主要用到两个类： SpringSystem，Spring。

需要注意的是 currentValue 和 endValue，类似于属性动画的变长参数用于指定起始值和结束值，currentValue默认为零，例如我想把一个view的scale从0.5到1变化：

 spring.setCurrentValue(0.5);
 spring.setEndValue(1);
 

如果看过了rebund的官网，其中有一个有趣的demo，点击图片会有弹动的效果，其中有两个参数需要配置： tension（张力 1~100），friction（摩擦力 1~30）张力越大，摩擦力越小弹动的效果越明显，弹动的时间也越久。
代码里通过SpringConfig配置：

 SpringConfig springConfig = new SpringConfig(100,1);
 spring.setSpringConfig(springConfig);
 

多view连锁动画

使用SpringChain,提供两个构造方法

 SpringChain.create();
 SpringChain.create(int mainTension,int mainFriction,int attachmentTension,int attachmentFriction)
 默认
 DEFAULT_MAIN_TENSION = 40;
 DEFAULT_MAIN_FRICTION = 6;
 DEFAULT_ATTACHMENT_TENSION = 70;
 DEFAULT_ATTACHMENT_FRICTION = 10;
 

eg：

 void chainAnim(){

    ViewGroup viewGroup = (ViewGroup) findViewById(R.id.chain_layout);
    viewGroup.setVisibility(View.VISIBLE);
    SpringChain springChain = SpringChain.create();

    int childCount = viewGroup.getChildCount();
    for (int i = 0; i < childCount; i++) {
        final View view = viewGroup.getChildAt(i);

        springChain.addSpring(new SimpleSpringListener() {
            @Override
            public void onSpringUpdate(Spring spring) {
                view.setTranslationX((float) spring.getCurrentValue());
            }
        });
    }

    List springs = springChain.getAllSprings();
    for (int i = 0; i < springs.size(); i++) {
        springs.get(i).setCurrentValue(1080);
    }

    springChain.setControlSpringIndex(0).getControlSpring().setEndValue(0);
}

效果：

录屏专家160711113549.gif

eg2：
多view动画无连锁效果

 private void animateViewDirection(final View v, float from, float to, double tension, double friction) {
 Spring spring = SpringSystem.create().createSpring();
 spring.setCurrentValue(from);
 spring.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(tension, friction));
 spring.addListener(new SimpleSpringListener() {
 @Override
 public void onSpringUpdate(Spring spring) {
 v.setTranslationY((float) spring.getCurrentValue());
 }
 });
 spring.setEndValue(to);
 }

    ViewGroup viewGroup = (ViewGroup) getWindow().getDecorView();
    ViewGroup content = (ViewGroup) LayoutInflater.from(SpringActivity.this).inflate(R.layout.decor_content,viewGroup);
    for(int i=0;i

效果：

h.gif

以后编写动画时是否会考虑rebund呢？

End