Android共享元素转场动画Part2——Fragment to Fragment

继续Part1部分--Activity to Activity，这个部分我们简单介绍下Fragment to Fragment的共享动画实现；

github源码

先看效果

fragmentToFragment

Fragment to Fragment

首先我们需要创建一个Activity容器来加载Fragment：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Fragment fragment = getSupportFragmentManager().findFragmentByTag(FragmentA.class.getName());
        if (fragment == null) {
            fragment = FragmentA.newInstance();
            getSupportFragmentManager().beginTransaction().add(R.id.activity_main,
                fragment,
                FragmentA.class.getName())
                .commit();
        }
    }
}

按照代码所示，我们现在Activity中加载FragmentA 然后由FragmentA跳转到FragmentB，并且实现共享动画。

下面实现FragmentA：

FragmentA中的xml代码实现，一个ImageView 和一个Button ，其中ImageView为FragmentA的共享元素，并且为他设置属性android:transitionName="simple transition name"：

FragmentA的java代码

public class FragmentA extends Fragment {
    public static final String TAG = FragmentA.class.getSimpleName();
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_a, container, false);
    }

    public static FragmentA newInstance() {
        return new FragmentA();
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        final ImageView imageView = (ImageView) getView().findViewById(R.id.imageView);
        getActivity().findViewById(R.id.btn_click).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Fragment fragmentB = getFragmentManager().findFragmentByTag(TAG);
                if (fragmentB == null) fragmentB = FragmentB.newInstance();
                getFragmentManager()
                        .beginTransaction()
                        .addSharedElement(imageView,
                        ViewCompat.getTransitionName(imageView))
                        .addToBackStack(TAG)
                        .replace(R.id.activity_main, fragmentB)
                        .commit();
            }
        });
    }
}

值得注意的是在addShareElement()这个方法以及addToBackStack()这个方法；

• addShareElement:设置了作为共享元素的控件以及transitionName;
• addToBackStack：为了让fragment回栈，如果不设置这个回栈，当跳转到fragmentB的时候，BackClick就会直接退出Activity；

那么在FragmentB就比较容易实现了：

FragmentB：

   @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            setSharedElementEnterTransition(
                    TransitionInflater.from(getContext())
                            .inflateTransition(android.R.transition.move));
        }
    }

只需要在FragmentB的

• xml 的共享控件里面设置android:transitionName="simple transition name"
• onCreate里面设置动画为android.R.transition.move

加载网络图片的元素共享（以Picasso为例）

一般在App中，我们的ImageView都是在网络URL获取的资源，那么网络加载的ImageView也是可以实现共享元素转换的，下面我们就以Picasso为例：

添加依赖

 compile 'com.squareup.picasso:picasso:2.5.2'

FragmentA中

Picasso.with(getActivity())
                .load("https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg")
                .fit()
                .centerCrop()
                .into(imageView);
                 getActivity().findViewById(R.id.btn_click).setOnClickListener(new View.OnClickListener() {
     @Override
public void onClick(View view) {
                Fragment fragmentB = getFragmentManager().findFragmentByTag(TAG);
                if (fragmentB == null) fragmentB = FragmentB.newInstance();
                getFragmentManager()
                        .beginTransaction()
                        .addSharedElement(imageView,
                         ViewCompat.getTransitionName(imageView))
                        .addToBackStack(TAG)
                        .replace(R.id.activity_main, fragmentB)
                        .commit();
            }
        });

FragmentB中添加加载图片的:

  @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        ImageView imageView = (ImageView) getView().findViewById(R.id.imageView);
        Picasso.with(getContext())
                .load("https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg")
                .fit()
                .centerCrop()
                .noFade()
                .into(imageView, new Callback() {
                    @Override
                    public void onSuccess() {
                        startPostponedEnterTransition();
                    }

                    @Override
                    public void onError() {

                    }
                });
    }

• 添加noFade禁用渐隐的效果促使动画更加的流畅。
• 在CallBack的onSuccess()中设置startPostponedEnterTransition()。

github banch

Blog

非常感谢，你能耐心读完；