讓動畫不再僵硬：Facebook Rebound Android動畫庫介紹

標籤：button   nan   參數   移動   runnable   viewgroup   text   sys   creat   

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的牽引位移動畫效果。

 

讓動畫不再僵硬：Facebook Rebound Android動畫庫介紹