高級UI特效之炫酷漂浮動畫—一個能讓View執行漂浮的庫

FloatingView-android可以讓View執行漂亮的漂浮動畫的庫

一.使用

• Step 1

在 build.gradle 文件中添加庫依賴

dependencies {  
        compile 'com.ufreedom.uikit:FloatingViewLib:1.0.2'
    }複製代碼

Step 2

使用 FloatingBuilder 建立一個 FloatingElement

FloatingElement builder = new FloatingBuilder()
                            .anchorView(View)
                            .targetView(View)
                            .offsetX(int)
                            .offsetY(int)
                            .floatingTransition(FloatingTransition)
                            .build();複製代碼

使用 FloatingBuilder 能夠設置的有

• anchorView ：錨點，也就是你想在哪一個 View 上面進行漂浮動畫
• target：目標，你想漂浮的 View
• offsetX：x 方向的偏移量，單位 px
• offsetY: y 方向的偏移量，單位 px
• floatingTransition : 漂浮效果，默認是 ScaleFloatingTransition，也能夠本身實現漂浮效果

Step 3

建立一個 FloatingView 做爲 FloatingElement 的容器,而後讓你的 View 飛起來

Floating floating = new Floating(getActivity());
    floating.startFloating(builder);複製代碼

二.自定義

• 1.座標系

• 圖類
  

  

• 3.漂浮動畫
  實現漂浮動畫很簡單，你只須要實現 FloatingTransition 接口就能夠
  ```
  public interface FloatingTransition {

  public void applyFloating(YumFloating yumFloating);複製代碼

  }

在applyFloating
方法，你可使用 Android Animation 建立動畫，而後使用 YumFloating 進行 Alpha,Scale,Translate,Rotate 等變換
若是你想加入 [Facebook Rebound](http://facebook.github.io/rebound/) 回彈動畫效果，你可使用 [SpringHelper](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/spring/SpringHelper.java),例如 [ScaleFloatingTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/effect/ScaleFloatingTransition.java):複製代碼

public class ScaleFloatingTransition implements FloatingTransition {

...

@Override
public void applyFloating(final YumFloating yumFloating) {

    ValueAnimator alphaAnimator = ObjectAnimator.ofFloat(1.0f, 0.0f);
    alphaAnimator.setDuration(duration);
    alphaAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            yumFloating.setAlpha((Float) valueAnimator.getAnimatedValue());
        }
    });
    alphaAnimator.start();

    SpringHelper.createWidthBouncinessAndSpeed(0.0f, 1.0f,bounciness, speed)
            .reboundListener(new SimpleReboundListener(){
                @Override
                public void onReboundUpdate(double currentValue) {
                    yumFloating.setScaleX((float) currentValue);
                    yumFloating.setScaleY((float) currentValue);
                }
            }).start(yumFloating);
}複製代碼

}

若是 [SpringHelper](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/spring/SpringHelper.java) 沒法知足你的需求，你能夠直接使用 [YumFloating](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/transition/YumFloating.java) 的createSpringByBouncinessAndSpeed(double bounciness, double speed)
或者createSpringByTensionAndFriction(double tension, double friction)
建立 Spring, 而後使用transition(double progress, float startValue, float endValue)
進行數值轉換

- 4.路徑漂浮動畫
實現路徑漂浮一樣很簡單，例如 [CurveFloatingPathTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/effect/CurveFloatingPathTransition.java) ,首先你須要繼承 [BaseFloatingPathTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/transition/BaseFloatingPathTransition.java) 類.和繼承 [FloatingTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/transition/FloatingTransition.java) 類不一樣的是，你須要再實現一個getFloatingPath()
方法.在getFloatingPath()
方法內使用Path
建立你想漂浮的路徑，而後調用FloatingPath.create(path, false)
進行返回. 例如 [CurveFloatingPathTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/effect/CurveFloatingPathTransition.java) 實現：複製代碼

public class CurveFloatingPathTransition extends BaseFloatingPathTransition {

...

    @Override
    public FloatingPath getFloatingPath() {
        if (path == null){
            path = new Path();
            path.moveTo(0, 0);
            path.quadTo(-100, -200, 0, -300);
            path.quadTo(200, -400, 0, -500);
        }
        return FloatingPath.create(path, false);
    }

    @Override
    public void applyFloating(final YumFloating yumFloating) {
        ValueAnimator translateAnimator;
        ValueAnimator alphaAnimator;


        translateAnimator = ObjectAnimator.ofFloat(getStartPathPosition(), getEndPathPosition());
        translateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                PathPosition floatingPosition = getFloatingPosition(value);
                yumFloating.setTranslationX(floatingPosition.x);
                yumFloating.setTranslationY(floatingPosition.y);

            }
        });

       ...
    }複製代碼

}
```
使用 Path 將你想要漂浮的路徑的描繪出來，而後在 applyFloating(final YumFloating yumFloating) 方法中:

• 使用 getStartPathPosition() 方法獲取路徑的開始位置
• 使用 getEndPathPosition()方法獲取路徑的結束位置
• 使用 getFloatingPosition(float progress) 獲取當前進度的位置

getFloatingPosition(float progress) 方法會返回一個 PathPosition 對象，其屬性 x,y 分別表明當前路徑動畫的 x 座標，和 y 座標.

設計思想

對於開源庫來講，易用，擴展性強，很是重要， FloatingView 正在努力朝這方面發展

項目地址爲：

github.com/UFreedom/Fl…

相信本身，沒有作不到的，只有想不到的

若是你以爲此文對您有所幫助，歡迎入羣 QQ交流羣 ：644196190
微信公衆號：終端研發部

技術+職場