文档章节

FloatingView 来啦,快来玩一玩

UFreedom
 UFreedom
发布于 2016/11/09 20:07
字数 820
阅读 1
收藏 0

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 动画

© 著作权归作者所有

共有 人打赏支持
UFreedom
粉丝 0
博文 1
码字总数 820
作品 0
东城
程序员
10月15-16日 成都、重庆 OSC 源创会开始报名啦

秋高气爽的十月,源创会双城齐发,分别来到天府之国成都和山城重庆,与各位OSCer来一场,不,两场久违的线下面基,独家干货分享。快来报名吧>> 10月15日成都源创会报名及详情请点击:https:/...

凝小紫
2016/09/14
1K
4
放松一下】北美小游戏排行榜TOP10——“点击英雄”

大家平时工作都比较忙,在这里推荐一款游戏让大家放松一下,让你体验到指数爆炸般挣钱的快感。 北美小游戏排行榜TOP10——“点击英雄” 简要说明: 游戏可以挂机,关闭电脑,游戏也会自动赚钱...

PHP开发学习门户
2014/11/04
0
0
必玩的10个塔防游戏塔防游戏排行

塔防向来是个比较容易消磨时间的好游戏,因为你要合理的布置炮塔的位置,计算兵种和炮塔的相克性,有的玩家为了拿个金牌更是要玩好几个回合。我把从去年这个时候到现在玩了差不多快三百多个的...

liujiayu2
05/10
0
0
炎炎夏日送清凉,转发集赞得T恤,51CTO定制T恤免费送了

夏至已过,蒸笼模式已经全面开启,51CTO来给大家送T恤了 转发集赞赢T恤,定制T恤免费送,数量有限,先到先得,快来参与吧!!!! 集赞时间: 2018年7月5日——7月10日23:59分 参与方式: 1、...

51CTO博客
07/05
0
0
玩了三天三夜探挽懒月,我掉进一个巨大无比的坑

欢迎关注天善智能,我们是专注于商业智能BI,人工智能AI,大数据分析与挖掘领域的垂直社区,学习,问答、求职一站式搞定! 对商业智能BI、大数据分析挖掘、机器学习,python,R等数据领域感兴...

天善智能
07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

学习设计模式——中介者模式

1. 认识中介者模式 1. 定义:用一个中介对象来封装一系列的对象交互行为,中介者使得各对象不需要显式的互相引用,从而使其松散耦合,独立的改变他们之间的交互。 2. 结构: Mediator:中介者...

江左煤郎
26分钟前
0
0
深入理解Plasma(1):Plasma 框架

这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等。本篇文章作为开篇,主要目的是理解 Plasma 框架。 Plasma 作为以太坊的二层扩容...

HiBlock
33分钟前
0
0
Java 8 日期 示例

Java 8 推出了全新的日期时间API。Java处理日期、日历和时间的方式一直为社区所诟病,将 java.util.Date设定为可变类型,以及SimpleDateFormat的非线程安全使其应用非常受限。Java也意识到需...

阿刚ABC
59分钟前
1
0
RxJava操作符lift 笔记

在内部,每个Rx operator都做3件事: 它订阅源并观察值。 它根据操作员的目的转换观察到的序列。 它通过调用onNext,onError和onCompleted将修改后的序列推送到自己的订阅者。 compose运算符...

woshixin
今天
1
0
lnmp+coreseek实现站内全文检索(安装篇)

软件安装包 安装环境 系统环境 centos7.2 1核2G 软件环境 coreseek-3.2.14 lnmp1.5 安装mmseg 更新依赖包和安装编译环境 yum -y install m4 autoconf automake libtoolyum -y install gcc g...

毛毛雨rain
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部