FloatingView 来啦，快来玩一玩

2016-11-02 本文已影响4070人 UFreedom

FloatingView 可以说是 FloatingText 的升级版，前段时间开发的 FloatingText 目前已经有 551个 star，FloatingText 的设计初衷是一个能让文本执行漂亮的漂浮动画。然后有朋友提 issue 讨论是不是可以让 ImageView 执行漂浮动画，或者漂浮别的 View，这个 Idea 非常不错，所以这就诞生了FloatingView

废话不多说，快来看看怎么用吧

一.使用

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.坐标系

2.类图

3.漂浮动画

实现漂浮动画很简单，你只需要实现 FloatingTransition 接口就可以:


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

在 applyFloating 方法，你可以使用 Android Animation 创建动画，然后使用 YumFloating 进行 Alpha,Scale,Translate,Rotate 等变换

如果你想加入 Facebook Rebound 回弹动画效果，你可以使用 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) 创建 Spring, 然后使用 transition(double progress, float startValue, float endValue) 进行数值转换

4.路径漂浮动画

实现路径漂浮同样很简单，例如 CurveFloatingPathTransition ,首先你需要继承 BaseFloatingPathTransition 类.和继承 FloatingTransition 类不同的是，你需要再实现一个 getFloatingPath() 方法.
在 getFloatingPath() 方法内使用 Path 创建你想漂浮的路径，然后调用 FloatingPath.create(path, false) 进行返回. 例如 CurveFloatingPathTransition 实现：

    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 正在努力朝这方面发展

结束语

如果你觉得 FloatingView 还不错的，请给我一个 star 😁
任何意见或建议欢迎给我提 issue 或者 PR

最后奉上一个非常 nice 的 gif 动画