-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Slider child view animation
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.
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.
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!
You are welcome to contribute and share your amazing indicator, transformer or slider child view animation design. 😄