谁说Android的动画不廉价(三)之共享元素动画

本系列文章一共5篇
谁说Android的动画不廉价(一)之项目分层
谁说Android的动画不廉价(二)之转场动画
谁说Android的动画不廉价(三)之共享元素动画
谁说Android的动画不廉价(四)之元素动画
谁说Android的动画不廉价(五)之水波纹动画
GitHub源码

引言

本篇博文是基于上一篇博文谁说Android的动画不廉价(二)之转场动画的基础上做的拓展。

目标效果图

转场动画

前提说明

上篇回顾

还记得上一篇提到过的startActivity(Intent intent,Bundle bundle);吧?我们把转场的动画参数通过ActivityOptionsCompat导出,然后通过Intent去传递。同样Android的共享动画也是在这里做手脚

相关知识

transitionName

还记得我们上篇博文中MainActivity的布局中设置过这个参数吗?



        

        


共享元素动画标识哪两个元素需要联系到一起,就是通过transitionName参数。不过还需要一个Pair的类支持

Pair

Pair类把View和对应的transitionName联系在一起,所以上面的那个布局文件,未必需要添加transitionName属性,不过因为方便和标准。我们一般这么做。
改参数用于ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity,@Nullable Pair[] pairList);可指定多个

着手编码

先把三个布局文件写出来

activity_share_elements.xml

谁说Android的动画不廉价(三)之共享元素动画_第1张图片
ShareElementsActivity



    

    

    

fragment_share_elements1.xml

谁说Android的动画不廉价(三)之共享元素动画_第2张图片
ShareElementFragment1



    

    

    

fragment_share_elements2.xml

谁说Android的动画不廉价(三)之共享元素动画_第3张图片
ShareElementFragment2




    

        

        
    

    

    

代码

MainActivity.java

public void shareElements(View v) {
        ImageView imageView = (ImageView) findViewById(R.id.img);
        Intent intent = new Intent(this, ShareElementsActivity.class);
        ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, new Pair(imageView, imageView.getTransitionName()));
        startActivity(intent, activityOptionsCompat.toBundle());
    }

直接指定new Pair(imageView, imageView.getTransitionName())即可

ShareElementsFragment1.java

package demo.august1996.top.transitionanimationsdemo.Fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.transition.ChangeBounds;
import android.transition.Slide;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import demo.august1996.top.transitionanimationsdemo.R;

/**
 * Created by August on 16/9/8.
 */
public class ShareElementsFragment1 extends Fragment {


    View view;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_share_elements1, container, false);
        view.findViewById(R.id.next).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                replaceFragment(false);
            }
        });
        view.findViewById(R.id.nextWithOverlap).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                replaceFragment(true);
            }
        });
        this.view = view.findViewById(R.id.img);
        return view;
    }

    private void replaceFragment(boolean isOverlap) {
        Fragment fragment = new ShareElementsFragment2();
        Slide slide = new Slide();
        slide.setDuration(1000);
        slide.setSlideEdge(Gravity.LEFT);
        fragment.setAllowEnterTransitionOverlap(isOverlap);
        fragment.setAllowReturnTransitionOverlap(isOverlap);
        fragment.setEnterTransition(slide);
        ChangeBounds changeBounds = new ChangeBounds();
        changeBounds.setDuration(1000);
        fragment.setSharedElementEnterTransition(changeBounds);

        getActivity()
                .getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.container, fragment)
                .addToBackStack(null)
                .addSharedElement(view, view.getTransitionName())
                .commit();
    }
}
  • FragmentTransaction.addSharedElement(View view,String transitionName);可以为Fragment添加共享元素。

  • Fragment.setXXXTransition(Transition transition);可以为Fragment添加向Activity一样的转场效果

  • 当Overlap的属性为真的时候,下一个页面的EnterTransition会马上开始。当为假的时候,下一个页面的EnterTransition要等上一个页面的ExitTransition完了之后才开始。

ShareElementsFragment2.java

package demo.august1996.top.transitionanimationsdemo.Fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import demo.august1996.top.transitionanimationsdemo.R;

/**
 * Created by August on 16/9/8.
 */
public class ShareElementsFragment2 extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_share_elements2,container,false);
        return view;
    }
}

ShareElementsActivity.java

package demo.august1996.top.transitionanimationsdemo;

import android.support.v4.app.Fragment;
import android.transition.Slide;

import demo.august1996.top.transitionanimationsdemo.Activity.ToolbarActivity;
import demo.august1996.top.transitionanimationsdemo.Fragment.ShareElementsFragment1;

public class ShareElementsActivity extends ToolbarActivity {


    @Override
    protected String getToolbarTitle() {
        return "共享元素动画";
    }

    @Override
    protected void initView() {
        Fragment fragment = new ShareElementsFragment1();
        Slide slide = new Slide();
        slide.setDuration(1000);
        fragment.setExitTransition(slide);
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.container, fragment)
                .commit();
    }

    @Override
    protected int getContentViewID() {
        return R.layout.activity_share_elements;
    }

    @Override
    protected boolean canBack() {
        return true;
    }
}

我们的效果图

我们的效果图

总结

其实别看文章这么长,关键的东西其实没有多少。AS自动生成的代码到不少。。。。

你可能感兴趣的:(谁说Android的动画不廉价(三)之共享元素动画)