Android开发之Activity过渡动画

LevWiederma 8年前
   <h2>引子</h2>    <p>相信开发过iOS的程序员都知道iOS ViewController之间的跳转动画非常多,很酷对不对?这让开发Android的羡慕不已,曾几何时,Android中的Activity跳转是何等的生硬,But,在Android 5.0以后,Google也为Activity的转场设计了更加友好的动画效果。</p>    <p>转场动画(Activity Transition)基本介绍</p>    <p>Android 5.0 提供了三种Transition类型<br> <strong>进入</strong>:决定Activity中的所有的视图怎么进入屏幕。<br> <strong>退出</strong>:决定一个Activity中的所有视图怎么退出屏幕。<br> <strong>共享元素</strong>:决定两个activities之间的过渡,怎么共享(它们)的视图。</p>    <p>进入和退出包含如下动画效果</p>    <ul>     <li><strong>explode(分解)</strong> – 从屏幕中间进或出</li>     <li><strong>slide(滑动)</strong> - 从屏幕边缘进或出地</li>     <li><strong>fade(淡出)</strong> –通过改变屏幕上视图的不透明度达到添加或者移除视图的效果</li>    </ul>    <p>共享元素包含如下动画效果</p>    <ul>     <li><strong>changeBounds</strong> - 改变目标视图的布局边界</li>     <li><strong>changeClipBounds</strong> - 裁剪目标视图边界</li>     <li><strong>changeTransform</strong> - 改变目标视图的缩放比例和旋转角度</li>     <li><strong>changeImageTransform</strong> - 改变目标图片的大小和缩放比例</li>    </ul>    <h2>实践</h2>    <p>1.准备好2个Activity的布局,弄几个按钮,分别对应几种转场动画。</p>    <p>activity_one.xml ActivityOne的布局,其中最后一个Button是为了做共享元素动画</p>    <pre>  <code class="language-xhtml"><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:background="#ff0000"      android:gravity="center"      android:orientation="vertical"      tools:context=".MainActivity">        <Button          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_horizontal"          android:onClick="explode"          android:text="explode" />        <Button          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_horizontal"          android:onClick="slide"          android:text="slide" />        <Button          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_horizontal"          android:onClick="fade"          android:text="fade" />        <Button          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_horizontal"          android:onClick="share"          android:text="share" />          <Button          android:id="@+id/share"          android:layout_width="40dp"          android:layout_height="40dp"          android:layout_gravity="center_horizontal"          android:background="@drawable/football" />  </LinearLayout></code></pre>    <p>activity_two.xml ActivityTwo的布局,里面的Button与第一个布局中的最后一个Button呼应,只是大小不一样</p>    <pre>  <code class="language-xml"><RelativeLayout 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:background="#0000ff"      android:paddingBottom="@dimen/activity_vertical_margin"      android:paddingLeft="@dimen/activity_horizontal_margin"      android:paddingRight="@dimen/activity_horizontal_margin"      android:paddingTop="@dimen/activity_vertical_margin"      tools:context=".MainActivity">        <Button          android:id="@+id/share"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:transitionName="shareTransition"          android:layout_gravity="center_horizontal"          android:background="@drawable/football"          android:layout_centerInParent="true"          android:onClick="share" />  </RelativeLayout></code></pre>    <p>2.ActivityOne 与 ActivityTwo</p>    <p>ActivityOne.java</p>    <pre>  <code class="language-java">public class ActivityOne extends Activity {          private Intent intent;        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_one);          intent = new Intent(ActivityOne.this, ActivityTwo.class);      }        public void explode(View view) {            intent.putExtra("transition", "explode");          //将原先的跳转改成如下方式          startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle());        }        public void slide(View view) {            intent.putExtra("transition", "slide");          //将原先的跳转改成如下方式          startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle());        }        public void fade(View view) {            intent.putExtra("transition", "fade");          //将原先的跳转改成如下方式          startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this).toBundle());        }        public void share(View view) {            //共享元素          Button share = (Button) findViewById(R.id.share);          intent.putExtra("transition", "share");            //将原先的跳转改成如下方式,注意这里面的第三个参数决定了ActivityTwo 布局中的android:transitionName的值,它们要保持一致          startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(ActivityOne.this, share, "shareTransition").toBundle());        }      }</code></pre>    <p>ActivityTwo.java</p>    <pre>  <code class="language-java">public class ActivityTwo extends Activity {        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);            // 允许使用transitions          getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);            String transition = getIntent().getStringExtra("transition");            switch (transition) {              case "explode":                  // 设置进入时进入动画                  Explode explode = new Explode();                  explode.setDuration(1000);                  getWindow().setEnterTransition(explode);                    break;                case "slide":                  Slide slide = new Slide();                  slide.setDuration(1000);                  getWindow().setEnterTransition(slide);                    break;                case "fade":                  Fade fade = new Fade();                  fade.setDuration(1000);                  getWindow().setEnterTransition(fade);                    break;                case "share":                  break;          }            // 所有操作在设置内容视图之前          setContentView(R.layout.activity_two);        }    }</code></pre>    <p>说明:<br> <code>getWindow().setEnterTransition()</code>是进入动画,与之对应的<code>getWindow().setExitTransition()</code>就是退出转场动画,用法和上面一样,就不重复了</p>    <h2>测试效果<br> <strong>explode</strong></h2>    <p><img src="https://simg.open-open.com/show/daee18fe911c5d7c9081e29d894a8fcd.gif"></p>    <p>explode.gif</p>    <p><br> <strong>slide</strong></p>    <p><img src="https://simg.open-open.com/show/141e7b65b03cc10ef044f02ec48ff4dc.gif"></p>    <p>slide.gif</p>    <p><strong>fade</strong></p>    <p><img src="https://simg.open-open.com/show/ad08c963f84b9183346b805db699d0e5.gif"></p>    <p>fade.gif</p>    <p><br> <strong>share</strong></p>    <p><img src="https://simg.open-open.com/show/66a4425c4a2e55c7121286baee476693.gif"></p>    <p>share.gif</p>    <h2>问题</h2>    <p>explode效果感觉并没有从中间进,而是从上面下来的,这是为什么呢?欢迎知道的告知,感谢。</p>    <p>来自: <a href="/misc/goto?guid=4959671211175203928" rel="nofollow">http://www.jianshu.com/p/415a32976cc6</a></p>