文档章节

FloatingView 来啦,快来玩一玩

UFreedom
 UFreedom
发布于 2016/11/09 20:07
字数 820
阅读 1
收藏 0
点赞 0
评论 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 ⋅ 4

必玩的10个塔防游戏塔防游戏排行

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

liujiayu2 ⋅ 05/10 ⋅ 0

【程序员交友】angkee-一位热爱生活的小鲜肉

头像就是本人 「昵称」:angkee 96 年小鲜肉一枚,虽然年纪不大,编程已有三年经验,18 岁的时候就入职了 TCl 哦。 现居帝都~望京,身高 176cm。 说起爱好,不尽其数。 喜欢读书; 喜欢美食,...

angkee ⋅ 2017/11/04 ⋅ 0

放松一下】北美小游戏排行榜TOP10——“点击英雄”

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

PHP开发学习门户 ⋅ 2014/11/04 ⋅ 0

我都帮你选好“女秘”了,来挑一个呗

身边掠过一个灰常漂亮的小姐姐 听说是主编新招的秘书助理 眼馋,羡慕,嫉妒 哼! 我也有小助理 我的语音助手 谈起语音助手,大家第一个想到的就是Siri,它的出现给安卓带来了不小的震撼。随着...

m7720eiosi6oa9 ⋅ 01/05 ⋅ 0

HT for Web 中Painter的介绍及用法

鉴于许多同学对Painter不熟悉,所以撰写此文介绍下。Painter的中文意思是画家、漆工,那放到HT里是什么意思呢?很简单,这是HT特有的一种接口,允许开发者在拓扑及其它通用组件上使用Canvas画...

xhload3d ⋅ 2015/09/28 ⋅ 0

Windows Phone游戏应用大门罗

  【IT168资讯】游戏对智能手机用户来说必不可少,每一个用户的手机中至少包含一款或者一款以上游戏应用。我们如此青睐手机游戏源于手机游戏的便捷,只要拥有一款手机就可以随时随地快速享...

it168网站 ⋅ 2012/05/15 ⋅ 0

【爆炸消息】BDP社区上线啦!还有可视化争霸赛等你来战!

在6月7日这个特别的日子里,BDP社区也在大家的殷殷期盼中善良上线啦!社区上线的同时还推出了重磅活动:可视化图表大赛。本次活动奖品多多,一起来玩啊~ BDP社区:干货多多,和大神们一起玩数...

王小美 ⋅ 2017/06/09 ⋅ 0

不能在 Linux 下玩游戏?快来看看这些解决方案

自述:从第一次看到Linux系统,从大神那里了解到了Linux灵活、干净、开源等诸多的好处后,我打算入坑。但是,作为一个游戏迷,用笔记本打游戏绝对是不能省的。装双系统或虚拟机又太麻烦,也容...

局长 ⋅ 2017/11/06 ⋅ 16

20个值得学习的优秀开源框架,应用开发者必备精选

一、BeautifulRefreshLayout-漂亮的美食下拉刷新 项目地址 github.com/android-cjj… 二、基于zxing的二维码扫描,速度快,界面美观,可以自定义 项目地址 github.com/shuijilove/…) 三、模...

codeGoogle ⋅ 2017/11/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从零开始搭建Risc-v Rocket环境---(1)

为了搭建Rocke环境,我买了一个2T的移动硬盘,安装的ubuntu-16.04 LTS版。没有java8,gcc是5.4.0 joe@joe-Inspiron-7460:~$ java -version程序 'java' 已包含在下列软件包中: * default-...

whoisliang ⋅ 4分钟前 ⋅ 0

大数据学习路线(自己制定的,从零开始学习大数据)

大数据已经火了很久了,一直想了解它学习它结果没时间,过年后终于有时间了,了解了一些资料,结合我自己的情况,初步整理了一个学习路线,有问题的希望大神指点。 学习路线 Linux(shell,高并...

董黎明 ⋅ 10分钟前 ⋅ 0

systemd编写服务

一、开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件。 如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例)。 ...

勇敢的飞石 ⋅ 12分钟前 ⋅ 0

mysql 基本sql

CREATE TABLE `BBB_build_info` ( `community_id` varchar(50) NOT NULL COMMENT '小区ID', `layer` int(11) NOT NULL COMMENT '地址层数', `id` int(11) NOT NULL COMMENT '地址id', `full_......

zaolonglei ⋅ 20分钟前 ⋅ 0

安装chrome的vue插件

参看文档:https://www.cnblogs.com/yulingjia/p/7904138.html

xiaoge2016 ⋅ 23分钟前 ⋅ 0

用SQL命令查看Mysql数据库大小

要想知道每个数据库的大小的话,步骤如下: 1、进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2、查询所有数据的大小: select concat(round(sum(da...

源哥L ⋅ 45分钟前 ⋅ 0

两个小实验简单介绍@Scope("prototype")

实验一 首先有如下代码(其中@RestController的作用相当于@Controller+@Responsebody,可忽略) @RestController//@Scope("prototype")public class TestController { @RequestMap...

kalnkaya ⋅ 50分钟前 ⋅ 0

php-fpm的pool&php-fpm慢执行日志&open_basedir&php-fpm进程管理

12.21 php-fpm的pool pool是PHP-fpm的资源池,如果多个站点共用一个pool,则可能造成资源池中的资源耗尽,最终访问网站时出现502。 为了解决上述问题,我们可以配置多个pool,不同的站点使用...

影夜Linux ⋅ 今天 ⋅ 0

微服务 WildFly Swarm 管理

Expose Application Metrics and Information 要公开关于我们的微服务的有用信息,我们需要做的就是将监视器模块添加到我们的pom.xml中: 这将使在管理和监视功能得到实现。从监控角度来看,...

woshixin ⋅ 今天 ⋅ 0

java连接 mongo伪集群部署遇到的坑

部署mongo伪集群 #创建mongo数据存放文件地址mkdir -p /usr/local/config1/datamkdir -p /usr/local/config2/data mkdir -p /usr/local/config3/data mkdir -p /usr/local/config1/l......

努力爬坑人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部