FloatingView 来啦,快来玩一玩
博客专区 > UFreedom 的博客 > 博客详情
FloatingView 来啦,快来玩一玩
UFreedom 发表于1年前
FloatingView 来啦,快来玩一玩
  • 发表于 1年前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: FloatingView 能够让 View 执行漂亮的漂浮动画

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

demo

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

一.使用

Step 1

在 build.gradle 文件中添加库依赖

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

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 无法满足你的需求,你可以直接使用 YumFloatingcreateSpringByBouncinessAndSpeed(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 动画

标签: Android Github
共有 人打赏支持
粉丝 0
博文 1
码字总数 820
×
UFreedom
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: