ShareElement

#ShareElement
什么是共享元素变换？
元素共享式变换（shared Element transition） 决定了共享的view元素从一个Activity/Fragment 到另一个Activity/Fragment 的切换时如何动画变化的。共享元素在被调用Activity进入和返回时播放动画，共享元素在进入和返回时的变换效果通过window和Fragment的如下的方法来设置：
进入：
setShareElementEnterTransition（）
设置在B进入时播放的动画，共享元素以A中的位置作为起始，B中的位置为结束来播放动画。
返回：
setShareElementReturnTransition（）
设置在b返回A时 的动画，共享元素以B中的位置作为起始，A中的位置为结束来播放动画。

废话不多说上代码（从Fragment里面设置要共享的元素跳转到里一个Activity的代码如下可参照）：

BranchDetialFragment branchDetialFragment = new BranchDetialFragment();

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){

// branchDetialFragment.setSharedElementEnterTransition(new DetialTransition());
// setExitTransition(new Fade());
// branchDetialFragment.setSharedElementReturnTransition(new DetialTransition());
// setEnterTransition(new Fade());
///
// 另一种写法 关于shareElement的//
///
setSharedElementReturnTransition(TransitionInflater.from(
getActivity()).inflateTransition(R.transition.change_image_trans));
setExitTransition(TransitionInflater.from(
getActivity()).inflateTransition(android.R.transition.fade));

        branchDetialFragment.setSharedElementEnterTransition(TransitionInflater.from(
                getActivity()).inflateTransition(R.transition.change_image_trans));
        branchDetialFragment.setEnterTransition(TransitionInflater.from(
                getActivity()).inflateTransition(android.R.transition.fade));

        transitionName = ivImageView.getTransitionName();
        tvTitleTransition = tvTitle.getTransitionName();
    }
    bundle.putSerializable("key", (Serializable) dataBeen);
    bundle.putString("name1",transitionName);
    bundle.putString("name2",tvTitleTransition);

    branchDetialFragment.setArguments(bundle);


    fragmentManager
            .beginTransaction()
            .replace(R.id.container,branchDetialFragment,"BranchDetialFragment")
            .addToBackStack("Payment")
            .addSharedElement(ivImageView,transitionName)
            .addSharedElement(tvTitle,tvTitleTransition)
            .commit();

跳转目标Activity界面中的代码：
public class BranchDetialFragment extends Fragment {

private TextView tvTitle;
private TextView tvContent;
private ImageView ivImageView;
private List<BranchBean.DataBean> list;
private String transition ;
private String transition2;

public BranchDetialFragment() {
    // Required empty public constructor
}

@Override
public void onAttach(Context context) {
    super.onAttach(context);
    Bundle bundle = getArguments();
    list = ((List<BranchBean.DataBean>) bundle.get("key"));
    transition = bundle.getString("name1");
    transition2 = bundle.getString("name2");
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    getActivity().setTitle("dajiahao");
    View view = inflater.inflate(R.layout.fragment_branch_detial,container,false);
    tvTitle = ((TextView) view.findViewById(R.id.branch_fragment_title_detial));
    tvContent = ((TextView) view.findViewById(R.id.branch_fragment_content_detial));
    ivImageView = ((ImageView) view.findViewById(R.id.branch_fragment_imageview_detial));

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
        ivImageView.setTransitionName(transition);
        tvTitle.setTransitionName(transition2);
    }
    // 把每个图片视图设置不同的Transition名称, 防止在一个视图内有多个相同的名称, 在变换的时候造成混乱
    // Fragment支持多个View进行变换, 使用适配器时, 需要加以区分

    tvTitle.setText(list.get(0).getTitle());
    tvContent.setText(list.get(0).getDesc());
    Picasso.with(getContext()).load(list.get(0).getCover()).into(ivImageView);

    return view;
}

}

如上共享元素的初始化的第一种方法（可写一个类来继承TransitionSet），代码如下：
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public class DetialTransition extends TransitionSet {
public DetialTransition(){
init();
}

/**
 * 允许资源文件的使用
 * @param context
 * @param attrs
 */
public DetialTransition(Context context, AttributeSet attrs){
    super(context,attrs);
    init();
}

private void init() {
    setOrdering(ORDERING_TOGETHER);
    addTransition(new ChangeBounds())
            .addTransition(new ChangeTransform())
            .addTransition(new ChangeImageTransform());
}

}

##总结：
ShareElement涵盖的几个要点：
1、元素共享式变换（share element transition）决定了共享的View元素从一个Activity/Fragment 到里一个Activity/Fragment的切换中如何动画变换的。
2、共享元素变化取决于每个共享元素的位置、大小以及外观。
3、共享元素默认其实是在绘制整个View树结构的最上层，在一个叫ViewOverlay的东西上面。
4、共享元素变换并不是真正实现了两个Activity或者Fragment之间元素的共享，Fragment采用了不同的方法来达到相同的视觉效果。