文档章节

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
重磅来袭 | 你的英语口音是英式还是美式?

        二哈哈      小猴子小猴子,我说了那么多年英语,还不知道自己的口音究竟偏向英音还是美音,这可咋办?      兔兔狲      小猴子小猴子,我背了这么多个单词,还傻...

微软亚洲研究院
11/23
0
0
放松一下】北美小游戏排行榜TOP10——“点击英雄”

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

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

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

liujiayu2
05/10
0
0
玩了三天三夜探挽懒月,我掉进一个巨大无比的坑

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

天善智能
07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
32分钟前
1
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
35分钟前
4
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
3
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
17
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部