将动画挂钩到视图过渡

时间:2017-10-21 00:55:14

标签: android material-design shared-element-transition

我正在开发一个小项目,一个用于图像板的App,我正在努力实现100%的材料设计。

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

我想为每个项目的叠加层添加一个小的淡入淡出动画。正如您在点击某个项目时所看到的那样,顶部和底部叠加层都在执行淡出动画。事情是,当它回来时,动画看起来有点笨重。我希望细节中的图像缩小,然后回到原来的位置,然后顶部和底部的叠加层以淡入淡出的动画返回。

这里的问题是我无法找到合适的钩子来做到这一点。我的意思是,我如何知道过渡动画何时结束然后执行淡入淡出动画?

以下是一些代码:

public void onItemClicked(final Vox vox, final VoxItemView view) {
    //I'm using an AnimatorInflator to inflates these animations in the fragment's onCreate method
    mFadeOutBottom.setTarget(view.getBottomOverlayView());
    mFadeOutTop.setTarget(view.getTopOverlayView());

    mFadeInBottom.setTarget(view.getBottomOverlayView());
    mFadeInTop.setTarget(view.getTopOverlayView());

    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.playTogether(mFadeOutBottom, mFadeOutTop);


    animatorSet.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            //When the animation ends then I jump to the detail screen
            ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                    getActivity(),
                    view.getImageView(),
                    ViewCompat.getTransitionName(view.getImageView()));

            startActivity(VoxDetailActivity.getStartIntent(getActivity(), vox), options.toBundle());

            //I tried setting the fade in animation here, but it doesnt work
            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.playTogether(mFadeInBottom, mFadeInTop);
            animatorSet.start();
        }
    });

    animatorSet.start();
}

VoxItemViews是RecyclerView网格中的视图。

如果有人能指出我正确的方向,我会很感激。

1 个答案:

答案 0 :(得分:0)

在这里回答我自己的问题,发现这真的很有帮助希望对别人也有价值。

显然我们可以在共享转换之间来回切换时使用回调挂钩。

这个项目有几个关于如何使用它的很酷的例子:

https://github.com/alexjlockwood/adp-activity-transitions/blob/master/app/src/main/java/com/alexjlockwood/activity/transitions/DetailsFragment.java

我自己还没有实现它,但我很确定这是要走的路。