FloatingView 可以說是 FloatingText 的升級版，前段時間開發的 FloatingText 目前已經有 551個 star，FloatingText 的設計初衷是一個能讓文本執行漂亮的漂浮動畫。然后有朋友提 issue 討論是不是可以讓 ImageView 執行漂浮動畫，或者漂浮別的 View，這個 Idea 非常不錯，所以這就誕生了FloatingView
<img width="288" height="512" src="http://upload-images.jianshu.io/upload_images/1721932-0b8648ab17ce73c1.gif?imageMogr2/auto-orient/strip" />
廢話不多說，快來看看怎么用吧
一.使用
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.坐標系
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 無法滿足你的需求，你可以直接使用 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 正在努力朝這方面發展
結束語
- 如果你覺得 FloatingView 還不錯的，請給我一個 star ??
- 任何意見或建議歡迎給我提 issue 或者 PR
最后奉上一個非常 nice 的 gif 動畫
<img width="320" height="240" src="http://upload-images.jianshu.io/upload_images/1721932-be7e9bb67087939f.gif?imageMogr2/auto-orient/strip" />
