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:
- use
getStartPathPosition()
Method to get the starting position of the path - use
getEndPathPosition()
Method to get the end location of a path - use
getFloatingPosition(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