让动画不再僵硬：Facebook Rebound Android动画库介绍

Posted 2020-09-25 一点点征服

official site：http://facebook.github.io/rebound

github : https://github.com/facebook/rebound

Rebound是facebook推出的一个弹性动画库，可以让动画看起来真实自然，像真实世界的物理运动，带有力的效果，使用的参数则是facebook的origami中使用的。

 

官网上有一个简单的JS版本来做demo，如果说到evernote、LinkedIn、flow等应用也在使用这个动画库，是不是会显得更厉害些呢。

Spring spring = mSpringSystem
        .createSpring()
        .setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(86, 7))
        .addListener(new SimpleSpringListener() {
            @Override
            public void onSpringUpdate(Spring spring) {
                float value = (float) spring.getCurrentValue();
                ViewHelper.setTranslationX(view, value);
            }
        });

 上面的短短代码就可以给一个view加上自然的从左向右进入回弹效果。

类似地

Spring spring = mSpringSystem
        .createSpring()
        .setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(86, 7))
        .addListener(new SimpleSpringListener() {
            @Override
            public void onSpringUpdate(Spring spring) {
                float value = (float) spring.getCurrentValue();
                float scale = 1f - value;
                ViewHelper.setScaleX(mItemIconViewList.get(index), scale);
                ViewHelper.setScaleY(mItemIconViewList.get(index), scale);
            }
        });

 就可以给view加上一个从小变大然后略有回弹的效果。

如果想要做很多view的连锁动画怎么办？Rebound也提供了SpringChain这个接口。

for (int i = 0; i < viewCount; i++) {
    final View view = new View(context);
    view.setLayoutParams(
            new TableLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    1f));
    mSpringChain.addSpring(new SimpleSpringListener() {
        @Override
        public void onSpringUpdate(Spring spring) {
            float value = (float) spring.getCurrentValue();
            view.setTranslationX(value);
        }
    });
    int color = (Integer) evaluator.evaluate((float) i / (float) viewCount, startColor, endColor);
    view.setBackgroundColor(color);
    view.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            return handleRowTouch(v, event);
        }
    });
    mViews.add(view);
    rootView.addView(view);
}

getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        getViewTreeObserver().removeOnGlobalLayoutListener(this);
        List<Spring> springs = mSpringChain.getAllSprings();
        for (int i = 0; i < springs.size(); i++) {
            springs.get(i).setCurrentValue(-mViews.get(i).getWidth());
        }
        postDelayed(new Runnable() {
            @Override
            public void run() {
                mSpringChain
                        .setControlSpringIndex(0)
                        .getControlSpring()
                        .setEndValue(0);
            }
        }, 500);
    }
});

 就做出了一个view和view的牵引位移动画效果。