Android Activity Transition(ShareElement)

Preview:

Citation preview

ActivityTransition

Ted

more about

https://www.youtube.com/watch?v=RhiPJByIMr

M

2:45

step 1

<style name="AppTheme" parent="android:Theme.Material.Light">

<item name="android:windowSharedElementEnterTransition">

@transition/change_image_transform</item>

<item name="android:windowSharedElementExitTransition">

@transition/change_image_transform</item>

</style>

step 2

res/transition/ 加入change_image_transform

<?xml version="1.0" encoding="utf-8"?>

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">

<changeBounds />

<changeImageTransform/>

</transitionSet>

step3Intent intent = new Intent(this,NextActivity.class);

ActivityOptions options = ActivityOptions

.makeSceneTransitionAnimation(this,

Pair.create(event.getView(),

NextActivity.VIEW_NAME));

startActivity(intent, options.toBundle());

final step

img.setTransitionName(VIEW_NAME);

sample code:

https://github.com/nightbear1009/LolipopActivityTransition

what about pre-L

step1

overridePendingTransition(0, 0);

step2

<style name="Transparent" parent="android:Theme.Holo.Light.DarkActionBar">>

<item name="android:windowIsTranslucent">true</item>

<item name="android:windowBackground">@android:color/transparent</item>

</style>

step3

int[] screenLocation = new int[2];

view.getLocationOnScreen(screenLocation);

intent.putExtra("left", screenLocation[0]).

putExtra("top", screenLocation[1]).

putExtra("width", view.getWidth()).

putExtra("height", view.getHeight());

step4

mView.setPivotX(0);

mView.setPivotY(0);

mView.setScaleX(mWidthScale);

mView.setScaleY(mHeightScale);

mView.setTranslationX(mLeftDelta);

mView.setTranslationY(mTopDelta);

step5

mView.animate().setDuration(duration).

scaleX(1).scaleY(1).

translationX(0).translationY(0).

setInterpolator(sDecelerator);

mView.animate().setDuration(duration).

scaleX(mWidthScale).scaleY(mHeightScale).

translationX(mLeftDelta).translationY(mTopDelta);

ObjectAnimator bgAnim = ObjectAnimator.ofFloat(mView, "alpha", 0);

bgAnim.setDuration(duration);

bgAnim.start();

sample code

https://github.com/nightbear1009/ActivityAnimations

the end...

no~ not yet!!

what about transition after http request?

nothing will happen….

what about transition from recyclerview to

recyclerview?

nothing will happen...

postponeEnterTransition();

&

holder.imageView.getViewTreeObserver().addOnPreDrawListener(new

ViewTreeObserver.OnPreDrawListener() {

@Override

public boolean onPreDraw() {

startPostponedEnterTransition();

return true;

}

});

reminder

postponeEnterTransition(); will block ui thread.

所以我們必須將這個activity要顯示的資料從上個activity先帶進來,等到http request 結束之後才換成新的資料

sample code

https://github.com/nightbear1009/LolipopActivityTransition

Recommended