android 軟軟的動畫彈出菜單，基於Facebook的Rebuond

　Hello，郭某又厚顏無恥的來碼水文了，年終將至，又要被別人家程序猿的年終刷屏（年終獎和我有個Context關係(ノಠ益ಠ)ノ彡┻━┻）。因此，今天就讓咱們聊一點有意思♂的東西吧<(￣ˇ￣)/：「軟軟「的彈出菜單，一戳就破。沒錯，今天的片頭就是這麼短，此短非彼短，由於下面也很短。

　
︿(￣︶￣)︿我是路過的DEMO : github.com/CarGuo/Anim…
　

等一下，我第二次彈出自帶點擊效果

　

rebound

　安利Facebook開源的彈簧動畫庫，模擬物理彈簧的效果，讓直男♂的你今後軟下來，產品經理不再須要擔憂交互過硬了(✿◡‿◡)。

　rebound模擬的是物理效果，這裏主要是有兩個關鍵點：Tension（拉力系數）、Friction（摩擦係數）。Tension越大♀，彈性效果就越大，很符合邏輯是吧(￣o￣) ；Friction越大，受到的阻力就會越大，彈性效果就會下降。這裏注意的是，彈性雖好，但摩擦力也是必須的喲，學過物理的你應該知道，沒有摩擦力，根本停不下來啊，摩擦力太大，又進不···呸呸呸，又彈性很差。

　下方是facebook官方的demo，使用默認的F和T係數，建立一個Spring ，經過設置開始\接結束的係數，在監聽過程當中經過getCurrentValue，設置你想要的移動\放大\透明度等等效果，來實現你的動畫，感受是否是很ValueAnimation，簡單易上手。

　有興趣的能夠去rebound下載官方demo，若是發現官方demo跑不來，能夠試試我fork修改後的demo喲：github.com/CarGuo/rebo…

// 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);複製代碼

實現動畫彈出框

　
進入正題：

一、首先咱們定義一個佈局，包含四個圓形TAB，讓它們呈現以下圖效果。而後把它們都設置爲GONE。

二、建立一個Spring用於執行動畫。

• 這裏咱們使用的是SpringChain，能夠自定義咱們想要的拉力和摩擦力系數，從左到右是主拉力，主摩擦力，輔助拉力，輔助摩擦力。
• 根據TAB的個數，咱們對每個View經過springChain.addSpring添加到隊列中，並設置對應的監聽。
• setCurrentValue設置初始化的開始數據爲父佈局的高度，這樣每個item就能夠從屏幕底部開始彈出。
• springChain.setControlSpringIndex(0).getControlSpring().setEndValue(0);設置起主導做用的是第一個tab，最後的終止數據是0，也就是原來所在的位置。
• 在onSpringUpdate經過getCurrentValue換算出tab的位置和大小。

看下面，上面一堆廢話，那個傻X說了那麼多，哇塞，代碼好簡單啊(^o^)/，是否是以爲站在巨人的肩膀上，很自豪啊。收回動畫就是把彈出的反過來便可，妥妥的。

SpringChain springChain = SpringChain.create(40, 6, 50, 7);

for (int i = 0; i < list.size(); i++) {

    final View view = list.get(i);

    springChain.addSpring(new SimpleSpringListener() {
        @Override
        public void onSpringActivate(Spring spring) {
            super.onSpringActivate(spring);
            view.setVisibility(VISIBLE);
        }

        @Override
        public void onSpringUpdate(Spring spring) {
            view.setTranslationY((float) spring.getCurrentValue());
            float scale = (1 + 2 * (float) spring.getCurrentValue() / mainView.getHeight());
            view.setScaleX(scale);
            view.setScaleY(scale);
        }
    });
}

List<Spring> springs = springChain.getAllSprings();

for (int i = 0; i < springs.size(); i++) {
    springs.get(i).setCurrentValue(mainView.getHeight());
}

springChain.setControlSpringIndex(0).getControlSpring().setEndValue(0);複製代碼

　最後咱們額外來個副菜，既然彈出\收起都有效果，那麼「碰」起來也要有效果纔對，這裏咱們就參考微博的菜單，在點擊時候執行最後的動畫效果。

　這個相對更加簡單，咱們使用系統的AnimationSet ，將點擊的TAB放大和透明化動畫一塊兒執行，將其餘的TAB同時縮小和透明化，動畫結束時讓tab隱藏起來，這樣一個完整的菜單動畫就結束啦。(。・・)ノ是否是好短啊，都說好短啦。

AnimationSet animationSet = new AnimationSet(true);
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);

animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(alphaAnimation);

animationSet.setInterpolator(new AccelerateInterpolator());
animationSet.setDuration(200);
animationSet.setFillAfter(false);

animationSet.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {

    }

    @Override
    public void onAnimationEnd(Animation animation) {
        view.setVisibility(GONE);
        ButtonClickLogin(view);

    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
});
view.startAnimation(animationSet);複製代碼

最後說兩句

　
兩句。

瞅完了吧