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

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

使用

Step 1

build.gradle 文件中添加库依赖

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

Step 2

使用 FloatingBuilder 创建一个 FloatingElement

1
2
3
4
5
6
7
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 飞起来

1
2
Floating floating = new Floating(getActivity());
floating.startFloating(builder);

自定义

坐标系

20171108151015672071477.png

图类

20171108151015676013276.png

漂浮动画

实现漂浮动画很简单,你只需要实现 FloatingTransition 接口就可以

1
2
3
public interface FloatingTransition {
public void applyFloating(YumFloating yumFloating);
}

在applyFloating方法,你可以使用 Android Animation 创建动画,然后使用 YumFloating 进行 Alpha,Scale,Translate,Rotate 等变换如果你想加入 Facebook Rebound 回弹动画效果,你可以使用 SpringHelper,例如 ScaleFloatingTransition:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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)
进行数值转换

路径漂浮动画

实现路径漂浮同样很简单,例如 CurveFloatingPathTransition ,首先你需要继承 BaseFloatingPathTransition 类.和继承 FloatingTransition 类不同的是,你需要再实现一个getFloatingPath()
方法.在getFloatingPath()方法内使用Path创建你想漂浮的路径,然后调用FloatingPath.create(path, false)
进行返回. 例如 CurveFloatingPathTransition 实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 正在努力朝这方面发展

项目地址为:github.com/UFreedom/Fl…