Android-Transition allows the easy creation of view transitions that reacts to user inputs. The library is designed to be general enough such that the same transition can be applied to differnt UI components like Drawer, SlidingUpPanel, ViewPager, ObservableScrollView (work in progress), etc., as long as appropriate adapter is used.
[AnimateMenuAdapter] (https://github.com/kaichunlin/android-transition/blob/d4bb037a6ffe2aa3f6f45a692f28b43d1a7fdcbd/core/src/main/java/com/kaichunlin/transition/adapter/AnimateMenuAdapter.java) is added that can animate MenuItems. Core and SlidingUpPanel module have been updated to 0.8.2 to support this addition. On Android Studio update Gradle dependency to:
compile 'com.github.kaichunlin.transition:core:0.8.2'
compile 'com.github.kaichunlin.transition:slidinguppanel:0.8.2'
The app on Google Play may not be the latest version.
-
View and MenuItem Transition
view transition
MenuItem transition
-
Interpolator
It's very easy to apply standard Android Interpolator to the transition:
(AccelerateDecelerateInterpolator v.s. AnticipateInterpolator)
-
Custom Adapters
- Drawer
- SlidingUpPanel
- ViewPager
- ObservableScrollView (work in progress)
- Write one yourself!
The simplest way to integrate Android-Transition is to grab them from Maven Central or jCenter. On Android Studio, add the code below to Gradle dependencies:
compile 'com.github.kaichunlin.transition:core:0.8.2'
Adapters that adapts to UI components not found in Android framework or Android Support Library are provided as their own libraries, the table below is the list of libraries:
Library | Function | Description in build.gradle |
---|---|---|
core | Provides core transition function and adapters | com.github.kaichunlin.transition:core:0.8.2 |
slidinguppanel | AndroidSlidingUpPanel Adapter | com.github.kaichunlin.transition:slidinguppanel:0.8.2 |
As an example, if an app requires both the core & slidinguppanel libraries, then build.gradle will look like below:
dependencies {
//other dependencies
...
compile 'com.github.kaichunlin.transition:core:0.8.2'
compile 'com.github.kaichunlin.transition:slidinguppanel:0.8.2'
}
The app/ folder is a sample app containing dozens of examples.
Two steps to apply transition to any View (sample code):
- Use the appropriate adapter:
DrawerListenerAdapter mDrawerListenerAdapter = new DrawerListenerAdapter(mDrawerToggle, R.id.drawerList);
mDrawerListenerAdapter.setDrawerLayout(mDrawerLayout);
- Add desired transition to the adapter, ViewTransitionBuilder is used to build the transition:
mDrawerListenerAdapter.addTransition(
ViewTransitionBuilder.transit(findViewById(R.id.big_icon)).rotation(0f, 360f).scaleX(1f, 0.2f).scaleY(1f, 0f).translationX(200f));
Three steps to apply transition to a MenuItem (sample code):
- Use the appropriate adapter that extends MenuBaseAdapter:
DrawerListenerAdapter mDrawerListenerAdapter = new DrawerListenerAdapter(mDrawerToggle, R.id.drawerList);
mDrawerListenerAdapter.setDrawerLayout(mDrawerLayout);
- Let the adapter manage the creation of options menu:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
mDrawerListenerAdapter.onCreateOptionsMenu(this, menu);
return super.onCreateOptionsMenu(menu);
}
- Add desired transition to the adapter, MenuItemTransitionBuilder is used to build the transition:
//shared configuration
MenuItemTransitionBuilder builder = MenuItemTransitionBuilder.transit(toolbar).alpha(1f, 0.5f).scale(1f, 0f).cascade(0.3f).visibleOnStartAnimation(true).invalidateOptionOnStopTransition(this, true);
// create a transition to be used when the drawer transits from the closed state to the opened state
// notice that in most situations clone() should be used, i.e. builder.clone(), to prevent builder picking up effects that should only apply to a single transition
MenuItemTransition mShrinkClose = builder.translationX(0, 30).build();
// create a reverse transition to be used when the drawer transits from the opened state to the closed state
MenuItemTransition mShrinkOpen = builder.reverse().translationX(0, 30).build();
//tells adapter the transition and the menu options for both the opened and closed states
mDrawerListenerAdapter.setupOptions(this, new MenuOptionConfiguration(mShrinkOpen, R.menu.drawer), new MenuOptionConfiguration(mShrinkClose, R.menu.main));
-
To clear all transitions from an adapter:
mDrawerListenerAdapter.clearTransition();
-
Share a common builder (sample code):
//calling adapter(mSlidingUpPanelLayoutAdapter) means that when builder.build() is called, the resultant transition will automatically be added to mSlidingUpPanelLayoutAdapter ViewTransitionBuilder baseBuilder = ViewTransitionBuilder.transit().interpolator(mInterpolator).adapter(mSlidingUpPanelLayoutAdapter).rotationX(42f).scale(0.8f).translationYAsFractionOfHeight(-0.5f); //calls clone() so any modification will not be propagated to other transitions build from the same builder //adds a transition to view R.id.content_bg baseBuilder.clone().target(findViewById(R.id.content_bg)).build(); //apply the same transition effect to a different view (R.id.content) baseBuilder.clone().target(findViewById(R.id.content)).build();
-
Delay transition evaluation until layout is complete, this is required if a view's position/dimension is used in the evaluation, in such a case ViewUtil provides a helper function (sample code):
ViewUtil.executeOnGlobalLayout(findViewById(R.id.rotate_slide), new ViewTreeObserver.OnGlobalLayoutListener() { public void onGlobalLayout() { //create ViewTransitionBuilder here } });