FloatingView can make the target view floating above the anchor view with cool animation

UFreedom

Last update: Dec 27, 2022

Related tags

Overview

FloatingView

FloatingView can make the target view floating above the anchor view with cool animation

Usage

Step 1

Add dependencies in build.gradle.

    dependencies {
        compile 'com.ufreedom.uikit:FloatingViewLib:1.0.2'
    }

Step 2

Use FloatingBuilder to create a FloatingElement

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

The use of FloatingBuilder can be configured to have：

anchorView ：Anchor, is you want to float animation in which View above
target：Target, The view which you want to float
offsetX：X direction of offset, unit PX
offsetY: Y direction of offset, unit PX
floatingTransition : Floating effect, the default is ScaleFloatingTransition

Step 3

Create a Floating as a FloatingElement container, and then let your View fly up

    Floating floating = new Floating(getActivity());
    floating.startFloating(builder);

Customisation

####1.Coordinates

####2.Class Diagram

####3.Floating Animation

Implementation of floating animation is very simple, you only need to implement the FloatingTransition interface.

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

In the applyFloating method, you can use Android Animation to do the animation, and then use the YumFloating to do Alpha , Scale, Translate, Rotate and other transformations. If you want to add the Facebook Rebound animation effect, you can use the SpringHelper, for example, 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.createWithBouncinessAndSpeed(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);
    }
    
}

If SpringHelper can not meet your needs, you can directly use the createSpringByBouncinessAndSpeed(double bounciness, double speed) or createSpringByTensionAndFriction(double tension, double friction) to create the Spring, and then use transition (Progress double, startValue float, endValue float) for numerical conversion

####4.Floating Path Animation The floating path animation is also very simple, such as CurveFloatingPathTransition, first you need to inherit from the BaseFloatingPathTransition class ,The difference is, you need to implement a getFloatingPath () method. Use Path in the getFloatingPath () method to create the path you want to float, and then call FloatingPath.create (path, false) to return. 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);
    
                }
            });
               
           ...
        }
    
}

Use Path to describe the path you want to float, and then in applyFloating (YumFloating yumFloating):

Use getStartPathPosition () method to obtain the starting position of the path
Use getEndPathPosition () method to obtain the end position of the path
Use getFloatingPosition(float progress) to get the position of the current progress

getFloatingPosition(float progress)method will return a PathPosition object, its properties x an y representing the current path animation x coordinates and Y coordinates.

Release Log

v1.0.2

Fix bug

v1.0.1

First Version

License

Copyright 2015 UFreedom

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

You might also like...

[Archived] Highlight the best bits of your app to users quickly, simply, and cool...ly

ShowcaseView The ShowcaseView (SCV) library is designed to highlight and showcase specific parts of apps to the user with a distinctive and attractive

5.6k Dec 16, 2022

Helper class to make any view rotatable

Rotatable This is a helper class actually, it simplifies having a view as rotatable by setting touch events and handling a lot of boilerplate works! S

300 Nov 11, 2022

Pop animation with circular dust effect for any view updation

Popview-Android Pop animation with circular dust effect for any view updation Getting Started In your build.gradle dependencies { compile 'rb.popv

489 Dec 28, 2022

Animation View to Highlight particular Views 🎯 for Android

TargetView Animation View to Highlight particular Views 🎯 for Android, it can be Used with Views that you see important (Like CountDownTimer), And al

53 Aug 7, 2021

:bread: Make your native android Toasts Tasty

TastyToast Make your native android toast look beautiful. Preview About Refer Here Wiki Grab the above demo app from here : Dependency Add dependency

2k Dec 29, 2022

Make your native android Toasts Fancy. A library that takes the standard Android toast to the next level with a variety of styling options. Style your toast from code.

FancyToast-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ... ma

1.2k Dec 26, 2022

Make your native android Dialog Fancy. A library that takes the standard Android Dialog to the next level with a variety of styling options. Style your dialog from code.

FancyAlertDialog-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ..

350 Dec 9, 2022

A set of Android-UI components to make it easier to request permission in a user friendly way.

Permission UI A set of Android-UI components to make it easier to request permission in a user friendly way. Access background location A jetpack comp