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

FloatingView-android能够让View执行漂亮的漂浮动画的库

• 图类

  
  

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

项目地址为：

https://github.com/UFreedom/FloatingView

相信自己，没有做不到的，只有想不到的

如果你觉得此文对您有所帮助，欢迎入群 QQ交流群 ：644196190
微信公众号：终端研发部

技术+职场