FloatingView is an updated version of FloatingText, which has 551 stars. FloatingText is designed to float text beautifully. Then a friend raised an issue and discussed whether ImageView could float, or float another View. The Idea was very good, so FloatingView was born




Without further ado, let’s see how it works, shall we

A.

Step 1

Add library dependencies in the build.gradle file

Dependencies {the compile 'com. Ufreedom. Uikit: FloatingViewLib: 1.0.1'}Copy the code

Step 2

Create a FloatingElement using FloatingBuilder

FloatingElement builder = new FloatingBuilder()
                            .anchorView(View)
                            .targetView(View)
                            .offsetX(int)
                            .offsetY(int)
                            .floatingTransition(FloatingTransition)
                            .build();Copy the code

Using FloatingBuilder, you can set

  • AnchorView: The anchor point, which View you want to animate floating
  • Target: The View where you want to float
  • OffsetX: indicates the offset in the x direction, in px
  • OffsetY: indicates the offset in the y direction, in px
  • FloatingTransition: floatingTransition, which is ScaleFloatingTransition by default. You can also float on your own

Step 3

Create a FloatingView as a container for FloatingElement and let your View fly

    Floating floating = new Floating(getActivity());
    floating.startFloating(builder);Copy the code

2. Customization

1. The coordinate system




2. The class diagram




3. Floating animation

Implementing FloatingTransition is easy, you just need to implement the FloatingTransition interface:

    public interface FloatingTransition {
        public void applyFloating(YumFloating yumFloating);
    }Copy the code

In applyFloating method, you can use the Android create Animation Animation, then use YumFloating Alpha, Scale, Translate, Rotate and transform

If you want to add a Facebook Rebound animation, you can use SpringHelper, such as ScaleFloatingTransition:

public class ScaleFloatingTransition implements FloatingTransition { ... @Override public void applyFloating(final YumFloating yumFloating) { ValueAnimator alphaAnimator = ObjectAnimator. OfFloat (0.0 1.0 f, f); alphaAnimator.setDuration(duration); alphaAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { yumFloating.setAlpha((Float) valueAnimator.getAnimatedValue()); }}); alphaAnimator.start(); SpringHelper. CreateWidthBouncinessAndSpeed (0.0 f, 1.0 f, bounciness, speed) .reboundListener(new SimpleReboundListener(){ @Override public void onReboundUpdate(double currentValue) { yumFloating.setScaleX((float) currentValue); yumFloating.setScaleY((float) currentValue); } }).start(yumFloating); }}Copy the code

If SpringHelper doesn’t meet your needs, You can directly use the createSpringByBouncinessAndSpeed YumFloating (double bounciness. Double speed) or createSpringByTensionAndFriction (double recogniton, double friction) create Spring, Then use Transition (Double Progress, float startValue, float endValue) to convert the value

4. Path floating animation

Implementation path also is very simple, floating CurveFloatingPathTransition, for example, you need to inherit BaseFloatingPathTransition class first. Instead of inheriting the FloatingTransition class, you implement a getFloatingPath() method. Create the Path you want to float using Path in the getFloatingPath() method and call floatingPath.create (Path, False) to return it. For example CurveFloatingPathTransition implementation:

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); }}); . }}Copy the code

Use Path to map out the Path you want to float and then in the applyFloating method:

  • usegetStartPathPosition()Method to get the starting position of the path
  • usegetEndPathPosition()Method to get the end location of a path
  • usegetFloatingPosition(float progress)Gets the location of the current progress

The getFloatingPosition(float Progress) method returns a PathPosition object whose attributes X and y represent the x and Y coordinates of the current path animation, respectively.

conclusion

  • If you think FloatingView is good, please send me a star 😁
  • Any comments or suggestions are welcome to issue or PR to me

And finally, a very nice GIF