查看原文
其他

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

2017-08-30 codeGoogler 终端研发部


前言介绍

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

博客地址:

http://www.jianshu.com/p/456bfc75784b

正文

  一.使用  

Step 1

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

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

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.坐标系

  • 图类 

  • 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交流群 :232203809   

微信公众号:终端研发部


            

这里学到不仅仅是技术


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存