FloatingView 可以說(shuō)是 FloatingText 的升級(jí)版胖缤，前段時(shí)間開(kāi)發(fā)的 FloatingText 目前已經(jīng)有 551個(gè) star，FloatingText 的設(shè)計(jì)初衷是一個(gè)能讓文本執(zhí)行漂亮的漂浮動(dòng)畫阀圾。然后有朋友提 issue 討論是不是可以讓 ImageView 執(zhí)行漂浮動(dòng)畫哪廓，或者漂浮別的 View，這個(gè) Idea 非常不錯(cuò)初烘，所以這就誕生了FloatingView
<img width="288" height="512" src="http://upload-images.jianshu.io/upload_images/1721932-0b8648ab17ce73c1.gif?imageMogr2/auto-orient/strip" />
廢話不多說(shuō)撩独，快來(lái)看看怎么用吧
一.使用
Step 1
在 build.gradle 文件中添加庫(kù)依賴
dependencies {
compile 'com.ufreedom.uikit:FloatingViewLib:1.0.2'
}
Step 2
使用 FloatingBuilder 創(chuàng)建一個(gè) FloatingElement
FloatingElement builder = new FloatingBuilder()
.anchorView(View)
.targetView(View)
.offsetX(int)
.offsetY(int)
.floatingTransition(FloatingTransition)
.build();
使用 FloatingBuilder 可以設(shè)置的有
- anchorView ：錨點(diǎn)，也就是你想在哪個(gè) View 上面進(jìn)行漂浮動(dòng)畫
- target：目標(biāo)账月，你想漂浮的 View
- offsetX：x 方向的偏移量，單位 px
- offsetY: y 方向的偏移量澳迫，單位 px
- floatingTransition : 漂浮效果局齿，默認(rèn)是 ScaleFloatingTransition，也可以自己實(shí)現(xiàn)漂浮效果
Step 3
創(chuàng)建一個(gè) FloatingView 作為 FloatingElement 的容器,然后讓你的 View 飛起來(lái)
Floating floating = new Floating(getActivity());
floating.startFloating(builder);
二.自定義
1.坐標(biāo)系
2.類圖
3.漂浮動(dòng)畫
實(shí)現(xiàn)漂浮動(dòng)畫很簡(jiǎn)單橄登，你只需要實(shí)現(xiàn) FloatingTransition 接口就可以:
public interface FloatingTransition {
public void applyFloating(YumFloating yumFloating);
}
在 applyFloating 方法抓歼，你可以使用 Android Animation 創(chuàng)建動(dòng)畫，然后使用 YumFloating 進(jìn)行 Alpha,Scale,Translate,Rotate 等變換
如果你想加入 Facebook Rebound 回彈動(dòng)畫效果拢锹，你可以使用 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 無(wú)法滿足你的需求谣妻，你可以直接使用 YumFloating 的 createSpringByBouncinessAndSpeed(double bounciness, double speed) 或者
createSpringByTensionAndFriction(double tension, double friction) 創(chuàng)建 Spring, 然后使用 transition(double progress, float startValue, float endValue) 進(jìn)行數(shù)值轉(zhuǎn)換
4.路徑漂浮動(dòng)畫
實(shí)現(xiàn)路徑漂浮同樣很簡(jiǎn)單，例如 CurveFloatingPathTransition ,首先你需要繼承 BaseFloatingPathTransition 類.和繼承 FloatingTransition 類不同的是卒稳，你需要再實(shí)現(xiàn)一個(gè) getFloatingPath() 方法.
在 getFloatingPath() 方法內(nèi)使用 Path 創(chuàng)建你想漂浮的路徑蹋半，然后調(diào)用 FloatingPath.create(path, false) 進(jìn)行返回. 例如 CurveFloatingPathTransition 實(shí)現(xiàn)：
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 將你想要漂浮的路徑的描繪出來(lái)，然后在 applyFloating(final YumFloating yumFloating) 方法中:
- 使用
getStartPathPosition()方法獲取路徑的開(kāi)始位置 - 使用
getEndPathPosition()方法獲取路徑的結(jié)束位置 - 使用
getFloatingPosition(float progress)獲取當(dāng)前進(jìn)度的位置
getFloatingPosition(float progress) 方法會(huì)返回一個(gè) PathPosition 對(duì)象充坑，其屬性 x,y 分別代表當(dāng)前路徑動(dòng)畫的 x 坐標(biāo)减江，和 y 坐標(biāo).
設(shè)計(jì)思想
對(duì)于開(kāi)源庫(kù)來(lái)說(shuō)染突，易用，擴(kuò)展性強(qiáng)辈灼，非常重要份企， FloatingView 正在努力朝這方面發(fā)展
結(jié)束語(yǔ)
- 如果你覺(jué)得 FloatingView 還不錯(cuò)的，請(qǐng)給我一個(gè) star ??
- 任何意見(jiàn)或建議歡迎給我提 issue 或者 PR
最后奉上一個(gè)非常 nice 的 gif 動(dòng)畫
<img width="320" height="240" src="http://upload-images.jianshu.io/upload_images/1721932-be7e9bb67087939f.gif?imageMogr2/auto-orient/strip" />
