Skip to content

Slider child view animation

代码家 edited this page Jun 25, 2014 · 4 revisions

Have you ever noticed that there was an animation in the child view of the slider which is showing.

If you want to make your slider view more attractive, animation is a good choice.

Step 1

Create a class and implement the interface BaseAnimationInterface.

public class DescriptionAnimation implements BaseAnimationInterface {
@Override
    public void onPrepareCurrentItemLeaveScreen(View current) {

    }

    @Override
    public void onPrepareNextItemShowInScreen(View next) {

    }


    @Override
    public void onCurrentItemDisappear(View view) {

    }

    @Override
    public void onNextItemAppear(View view) {
    
    }
}

In the slider layout, there are two slider views that are important: the current item and the next item.

The current item is always going to disappear, the next item is always going to show.

When the current item is about to disappear (e.g. you scroll the SliderLayout), onPrepareCurrentItemLeaveScreen and onPrepareNextItemShowInScreen will be called.

When the current item has completely disappeared and the next item is totally visible, then onCurrentItemDisappear and onNextItemAppear will be called.

You can add animations or some other effect in this cycle.

For example, the preset DescriptionAnimation:

public class DescriptionAnimation implements BaseAnimationInterface {
    /**
     * When current item is going to leave, let's make the description layout disappear.
     */
    @Override
    public void onPrepareCurrentItemLeaveScreen(View current) {
        View descriptionLayout = current.findViewById(R.id.description_layout);
        if (descriptionLayout != null) {
            current.findViewById(R.id.description_layout).setVisibility(View.INVISIBLE);
        }
    }

    /**
     * When next item is coming to show, let's hide the description layout.
     */
    @Override
    public void onPrepareNextItemShowInScreen(View next) {
        View descriptionLayout = next.findViewById(R.id.description_layout);
        if (descriptionLayout != null) {
            next.findViewById(R.id.description_layout).setVisibility(View.INVISIBLE);
        }
    }

    @Override
    public void onCurrentItemDisappear(View current) {

    }

    /**
     * When next item is shown, let's make an animation to show the
     * description layout.
     */
    @Override
    public void onNextItemAppear(View next) {

        View descriptionLayout = view.findViewById(R.id.description_layout);
        if (descriptionLayout != null) {
            float layoutY = ViewHelper.getY(descriptionLayout);
            next.findViewById(R.id.description_layout).setVisibility(View.VISIBLE);
            ValueAnimator animator = ObjectAnimator.ofFloat(
                    descriptionLayout,"y",layoutY + descriptionLayout.getHeight(),
                    layoutY).setDuration(500);
            animator.start();
        }
    }
}

NOTICE: For compatibility back to Android 2.2, please use ViewHelper to get the properties of a view.

You can also use my another library named AndroidViewAnimations to show amazing child view animation.

Step 3

Use it.

slider.setCustomAnimation(new DescriptionAnimation());

Pretty easy right? Use your imagination and to create it! And I also welcome you to contribute your own great design!

Clone this wiki locally