Skip to content

Slider child view animation

代码家 edited this page Jun 10, 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 choose.

###Step1:

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 slider layout, there are two slider view is important, the current item and the next item.

Current item is always going to disappear, the next item is always going to show.

When the current item has a tendency to leave, for example, you scroll the SliderLayout, then suddenly, onPrepareCurrentItemLeaveScreen and onPrepareNextItemShowInScreen will be called.

When the current item totally disappear, and the next item totally show, then onCurrentItemDisappear and onNextItemAppear will be called.

You can add animation 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:To make it more compatible, please use ViewHelper to get the properties of a view. ###Step3

Use it.

slider.setCustomAnimation(new DescriptionAnimation());

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

Clone this wiki locally