本系列文章一共5篇
谁说Android的动画不廉价（一）之项目分层
谁说Android的动画不廉价（二）之转场动画
谁说Android的动画不廉价（三）之共享元素动画
谁说Android的动画不廉价（四）之元素动画
谁说Android的动画不廉价（五）之水波纹动画
GitHub源码
引言
本篇博文是基于上一篇博文谁说Android的动画不廉价（二）之转场动画的基础上做的拓展。
目标效果图
转场动画
前提说明
上篇回顾
还记得上一篇提到过的startActivity(Intent intent,Bundle bundle);吧？我们把转场的动画参数通过ActivityOptionsCompat导出，然后通过Intent去传递。同样Android的共享动画也是在这里做手脚
相关知识
transitionName
还记得我们上篇博文中MainActivity的布局中设置过这个参数吗？
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:onClick="shareElements"
android:orientation="horizontal">
<ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:clickable="false"
android:src="@drawable/circle_orange"
android:transitionName="share" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="false"
android:gravity="center"
android:text="共享元素动画"
android:textSize="20sp" />
</LinearLayout>
共享元素动画标识哪两个元素需要联系到一起，就是通过transitionName参数。不过还需要一个Pair的类支持
Pair
Pair类把View和对应的transitionName联系在一起，所以上面的那个布局文件，未必需要添加transitionName属性，不过因为方便和标准。我们一般这么做。
改参数用于ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity,@Nullable Pair[] pairList);可指定多个
着手编码
先把三个布局文件写出来
activity_share_elements.xml
ShareElementsActivity
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/tool_bar" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="@string/android_linux_google" />
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>
</LinearLayout>
fragment_share_elements1.xml
ShareElementFragment1
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<View
android:id="@+id/img"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="30dp"
android:background="@drawable/circle_orange"
android:transitionName="share" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Fragment1"
android:textSize="24sp" />
<Button
android:id="@+id/next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:text="NEXT (OVERLAP TRANSITION = FALSE)" />
<Button
android:id="@+id/nextWithOverlap"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:text="NEXT (OVERLAP TRANSITION = TRUE)" />
</LinearLayout>
fragment_share_elements2.xml
ShareElementFragment2
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<View
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/circle_orange"
android:transitionName="share" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="Fragment2"
android:textSize="24sp" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Overlap"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="@string/overlap_entertransition_entertransition_exittransition"
android:textSize="18sp"/>
</LinearLayout>
代码
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<View, String>(imageView, imageView.getTransitionName()));
startActivity(intent, activityOptionsCompat.toBundle());
}
直接指定new Pair<View, String>(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自动生成的代码到不少。。。。
网友评论