FloatingView-android能够让View执行漂亮的漂浮动画的库
一.使用
- 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](http://facebook.github.io/rebound/) 回弹动画效果,你可以使用 [SpringHelper](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/spring/SpringHelper.java),例如 [ScaleFloatingTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/effect/ScaleFloatingTransition.java):复制代码
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](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/spring/SpringHelper.java) 无法满足你的需求,你可以直接使用 [YumFloating](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/transition/YumFloating.java) 的createSpringByBouncinessAndSpeed(double bounciness, double speed)
或者createSpringByTensionAndFriction(double tension, double friction)
创建 Spring, 然后使用transition(double progress, float startValue, float endValue)
进行数值转换
- 4.路径漂浮动画
实现路径漂浮同样很简单,例如 [CurveFloatingPathTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/effect/CurveFloatingPathTransition.java) ,首先你需要继承 [BaseFloatingPathTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/transition/BaseFloatingPathTransition.java) 类.和继承 [FloatingTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/transition/FloatingTransition.java) 类不同的是,你需要再实现一个getFloatingPath()
方法.在getFloatingPath()
方法内使用Path
创建你想漂浮的路径,然后调用FloatingPath.create(path, false)
进行返回. 例如 [CurveFloatingPathTransition](https://github.com/UFreedom/FloatingView/blob/master/FloatingViewLib/src/main/java/com/ufreedom/floatingview/effect/CurveFloatingPathTransition.java) 实现:复制代码
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 正在努力朝这方面发展
项目地址为:
相信自己,没有做不到的,只有想不到的
如果你觉得此文对您有所帮助,欢迎入群 QQ交流群 :644196190
微信公众号:终端研发部