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

codeGoogle發表於2017-08-29
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
微信公眾號：終端研發部

技術+職場
技術+職場

相關文章