高级UI特效之炫酷漂浮动画—一个能让View执行漂浮的库-CSDN博客

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) 方法中: