FloatingView 可以說是 FloatingText 的升級(jí)版，前段時(shí)間開發(fā)的 FloatingText 目前已經(jīng)有 551個(gè) star，FloatingText 的設(shè)計(jì)初衷是一個(gè)能讓文本執(zhí)行漂亮的漂浮動(dòng)畫。然后有朋友提 issue 討論是不是可以讓 ImageView 執(zhí)行漂浮動(dòng)畫，或者漂浮別的 View，這個(gè) Idea 非常不錯(cuò)，所以這就誕生了FloatingView

<img width="288" height="512" src="http://upload-images.jianshu.io/upload_images/1721932-0b8648ab17ce73c1.gif?imageMogr2/auto-orient/strip" />

廢話不多說，快來看看怎么用吧

一.使用

Step 1

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

    dependencies {  
        compile 'com.ufreedom.uikit:FloatingViewLib:1.0.2'
    }

Step 2

使用 FloatingBuilder 創(chuàng)建一個(gè) FloatingElement

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

使用 FloatingBuilder 可以設(shè)置的有

• anchorView ：錨點(diǎn)，也就是你想在哪個(gè) View 上面進(jìn)行漂浮動(dòng)畫
• target：目標(biāo)，你想漂浮的 View
• offsetX：x 方向的偏移量，單位 px
• offsetY: y 方向的偏移量，單位 px
• floatingTransition : 漂浮效果，默認(rèn)是 ScaleFloatingTransition，也可以自己實(shí)現(xiàn)漂浮效果

Step 3

創(chuàng)建一個(gè) FloatingView 作為 FloatingElement 的容器,然后讓你的 View 飛起來

    Floating floating = new Floating(getActivity());
    floating.startFloating(builder);

二.自定義

1.坐標(biāo)系

2.類圖

3.漂浮動(dòng)畫

實(shí)現(xiàn)漂浮動(dòng)畫很簡(jiǎn)單，你只需要實(shí)現(xiàn) FloatingTransition 接口就可以:

    public interface FloatingTransition {
        public void applyFloating(YumFloating yumFloating);
    }

在 applyFloating 方法，你可以使用 Android Animation 創(chuàng)建動(dòng)畫，然后使用 YumFloating 進(jìn)行 Alpha,Scale,Translate,Rotate 等變換

如果你想加入 Facebook Rebound 回彈動(dòng)畫效果，你可以使用 SpringHelper,例如 ScaleFloatingTransition:

    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 無法滿足你的需求，你可以直接使用 YumFloating 的 createSpringByBouncinessAndSpeed(double bounciness, double speed) 或者
createSpringByTensionAndFriction(double tension, double friction) 創(chuàng)建 Spring, 然后使用 transition(double progress, float startValue, float endValue) 進(jìn)行數(shù)值轉(zhuǎn)換

4.路徑漂浮動(dòng)畫

實(shí)現(xiàn)路徑漂浮同樣很簡(jiǎn)單，例如 CurveFloatingPathTransition ,首先你需要繼承 BaseFloatingPathTransition 類.和繼承 FloatingTransition 類不同的是，你需要再實(shí)現(xiàn)一個(gè) getFloatingPath() 方法.
在 getFloatingPath() 方法內(nèi)使用 Path 創(chuàng)建你想漂浮的路徑，然后調(diào)用 FloatingPath.create(path, false) 進(jìn)行返回. 例如 CurveFloatingPathTransition 實(shí)現(xiàn)：

    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()方法獲取路徑的結(jié)束位置
• 使用 getFloatingPosition(float progress) 獲取當(dāng)前進(jìn)度的位置

getFloatingPosition(float progress) 方法會(huì)返回一個(gè) PathPosition 對(duì)象，其屬性 x,y 分別代表當(dāng)前路徑動(dòng)畫的 x 坐標(biāo)，和 y 坐標(biāo).

設(shè)計(jì)思想

對(duì)于開源庫來說，易用，擴(kuò)展性強(qiáng)，非常重要， FloatingView 正在努力朝這方面發(fā)展

結(jié)束語

• 如果你覺得 FloatingView 還不錯(cuò)的，請(qǐng)給我一個(gè) star ??
• 任何意見或建議歡迎給我提 issue 或者 PR

最后奉上一個(gè)非常 nice 的 gif 動(dòng)畫

<img width="320" height="240" src="http://upload-images.jianshu.io/upload_images/1721932-be7e9bb67087939f.gif?imageMogr2/auto-orient/strip" />