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

时间：2016-02-14 16:45:47 阅读：260 评论：0 收藏：0 [点我收藏+]

标签：

introduction

official site：http://facebook.github.io/rebound
github : https://github.com/facebook/rebound
Rebound是facebook推出的一个弹性动画库，可以让动画看起来真实自然，像真实世界的物理运动，带有力的效果，使用的参数则是facebook的origami中使用的。
官网上有一个简单的JS版本来做demo，如果说到evernote、LinkedIn、flow等应用也在使用这个动画库，是不是会显得更厉害些呢。

具体效果，可以看看QQ空间 Android独立版客户端中，抽屉打开的icon效果，以及底部加号点开后的icon效果，是我当年在的时候做的。

usage

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的牵引位移动画效果。

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

标签：

原文地址：http://www.cnblogs.com/krislight1105/p/5189125.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行