Android转场动画深度解析

前言

所谓转场动画，通俗的讲就是一个Activity跳转到另一个Activity是的动画;Activity的转场动画很早就有了，5.0之前用的是overridePendingTransition()这个方法。在5.0之后，Google使用Material Design设计风格，进而有了的新的转场转场动画的诞生，效果还是挺炫酷的;今天我们就来讲解下。

一、转场动画兼容性

1、API21之前Activity过渡动画使用

API21之前Activity过渡动画通过两种方式来实现:style主题里面统一设置、使用代码overridePendingTransition函数单独设置;

style文件主题里面统一定义，全局为所有Activity设置过渡动画效果;

 
 
 
 
    
  
  
  
  
  1. @style/Animation.Activity.Customer
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.         
    4. 
  
  
  
  
  4.         @anim/right_in
    5. 
  
  
  
  
  5.         
    6. 
  
  
  
  
  6.         @anim/left_out
    7. 
  
  
  
  
  7.         
    8. 
  
  
  
  
  8.         @anim/left_in
    9. 
  
  
  
  
  9.         
    10. 
  
  
  
  
  10.         @anim/right_out
    11. 
  
  
  
  
  11.

代码overridePendingTransition(enterAnim, exitAnim);

关于overridePendingTransition函数，有一个需要注意的地方就是：它必需紧挨着startActivity()或者finish()或者onBackPressed()函数调用，否则不一定有效果;

2、API 21 之后Activity过渡动画使用

在API 21之后google又推出了一种比之前效果更加赞的过渡动画;

通过ActivityOptions + Transition来实现Activity过渡动画;

所以在使用之前需要进行版本判断。当版本API 大于21时使用转场动画，否则不使用;

 
 
 
 
    
  
  
  
  
  1. // Check if we're running on Android 5.0 or higher
    2. 
  
  
  
  
  2. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    3. 
  
  
  
  
  3.     // Apply activity transition
    4. 
  
  
  
  
  4. } else {
    5. 
  
  
  
  
  5.     // Swap without transition
    6. 
  
  
  
  
  6. }
    7.

ActivityOptions + Transition来实现Activity过渡动画之前先来了看下ActivityOptions里面几个函数代表啥意思;

 
 
 
 
    
  
  
  
  
  1. /**
    2. 
  
  
  
  
  2.  * 和overridePendingTransition类似,设置跳转时候的进入动画和退出动画
    3. 
  
  
  
  
  3.  */
    4. 
  
  
  
  
  4. public static ActivityOptions makeCustomAnimation(Context context, int enterResId, int exitResId);
    5. 
  
  
  
  
  5. /**
    6. 
  
  
  
  
  6.  * 通过把要进入的Activity通过放大的效果过渡进去
    7. 
  
  
  
  
  7.  * 举一个简单的例子来理解source=view,startX=view.getWidth(),startY=view.getHeight(),startWidth=0,startHeight=0
    8. 
  
  
  
  
  8.  * 表明新的Activity从view的中心从无到有慢慢放大的过程
    9. 
  
  
  
  
  9.  */
    10. 
  
  
  
  
  10. public static ActivityOptions makeScaleUpAnimation(View source, int startX, int startY, int width, int height);
    11. 
  
  
  
  
  11. /**
    12. 
  
  
  
  
  12.  * 通过放大一个图片过渡到新的Activity
    13. 
  
  
  
  
  13.  */
    14. 
  
  
  
  
  14. public static ActivityOptions makeThumbnailScaleUpAnimation(View source, Bitmap thumbnail, int startX, int startY);
    15. 
  
  
  
  
  15. /**
    16. 
  
  
  
  
  16.  * 场景动画，体现在两个Activity中的某些view协同去完成过渡动画效果，等下在例子中能更好的看到效果
    17. 
  
  
  
  
  17.  */
    18. 
  
  
  
  
  18. public static ActivityOptions makeSceneTransitionAnimation(Activity activity, View sharedElement, String sharedElementName);
    19. 
  
  
  
  
  19. /**
    20. 
  
  
  
  
  20.  * 场景动画，同上是对多个View同时起作用
    21. 
  
  
  
  
  21.  */
    22. 
  
  
  
  
  22. public static ActivityOptions makeSceneTransitionAnimation(Activity activity, android.util.Pair... sharedElements);
    23.

对于Transition Activity过渡动画的使用，我们简单的分为三个步骤：告诉系统以Transition的方式启动Activity、定义过渡动画、设置过渡动画。

3、转场动画的使用场景

Android中的转场动画主要有三种场景：

  • 在两个activity之间切换时界面的过渡效果;
  • 两个activity或者Fragment之间shared elements 切换效果;

下面分别详细的介绍。

二、转场动画的使用场景

1、两个activity之间切换时界面的过渡效果

两个activity切换时的，有两个动画，从activity A 切换到activity B时，会有A的退出动画和B的进入动画;

在Google提供的android.transition.Transition包中从activity A切换到activity B有三种方式：Explode, Slide 和Fade;

  • Explode：从屏幕的中间进入或退出;
  • Slide：从屏幕的一边向另一边进入或退出;
  • Fade：通过改变透明度来出现或消失;

上面的三种动画有两种实现方式：

①通过xml声明;

在res目录下新建transition文件夹在transition文件夹下新建activity_fade.xml文件;

activity_fade.xml

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     android:duration="1000"/>
    4.

activity_slide.xml

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     android:duration="1000"/>
    4.

ActivityA的代码如下：因为从ActivityA切换到ActivityB,所以ActivityA是退出动画使用的方法是：getWindow().setExitTransition(slide);

 
 
 
 
    
  
  
  
  
  1. @Override
    2. 
  
  
  
  
  2.     protected void onCreate(Bundle savedInstanceState) {
    3. 
  
  
  
  
  3.         super.onCreate(savedInstanceState);
    4. 
  
  
  
  
  4.         setContentView(R.layout.activity_transition);
    5. 
  
  
  
  
  5.         setupWindowAnimations();
    6. 
  
  
  
  
  6.     }
    7. 
  
  
  
  
  7.     private void setupWindowAnimations() {
    8. 
  
  
  
  
  8.         Slide slide = TransitionInflater.from(this).inflateTransition(R.transition.activity_slide);
    9. 
  
  
  
  
  9.         getWindow().setExitTransition(slide);
    10. 
  
  
  
  
  10.     }
    11.

ActivityB是进入动画使用方法：getWindow().setEnterTransition(fade);，ActivityB的代码如下

 
 
 
 
    
  
  
  
  
  1. @Override
    2. 
  
  
  
  
  2.     protected void onCreate(Bundle savedInstanceState) {
    3. 
  
  
  
  
  3.         super.onCreate(savedInstanceState);
    4. 
  
  
  
  
  4.         setContentView(R.layout.activity_transition);
    5. 
  
  
  
  
  5.         setupWindowAnimations();
    6. 
  
  
  
  
  6.     }
    7. 
  
  
  
  
  7.     private void setupWindowAnimations() {
    8. 
  
  
  
  
  8.         Fade fade = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade);
    9. 
  
  
  
  
  9.         getWindow().setEnterTransition(fade);
    10. 
  
  
  
  
  10.     }
    11.

②代码方式

ActivityA代码如下：实现一个Slide对象并且设置时间为1000毫秒

 
 
 
 
    
  
  
  
  
  1. @Override
    2. 
  
  
  
  
  2.     protected void onCreate(Bundle savedInstanceState) {
    3. 
  
  
  
  
  3.         super.onCreate(savedInstanceState);
    4. 
  
  
  
  
  4.         setContentView(R.layout.activity_transition);
    5. 
  
  
  
  
  5.         setupWindowAnimations();
    6. 
  
  
  
  
  6.     }
    7. 
  
  
  
  
  7.     private void setupWindowAnimations() {
    8. 
  
  
  
  
  8.         Slide slide = new Slide();
    9. 
  
  
  
  
  9.         slide.setDuration(1000);
    10. 
  
  
  
  
  10.         getWindow().setExitTransition(slide);
    11. 
  
  
  
  
  11.     }
    12.

ActivityB中实现一个Fide对象并且设置时间为1000毫秒;

 
 
 
 
    
  
  
  
  
  1. @Override
    2. 
  
  
  
  
  2.     protected void onCreate(Bundle savedInstanceState) {
    3. 
  
  
  
  
  3.         super.onCreate(savedInstanceState);
    4. 
  
  
  
  
  4.         setContentView(R.layout.activity_transition);
    5. 
  
  
  
  
  5.         setupWindowAnimations();
    6. 
  
  
  
  
  6.     }
    7. 
  
  
  
  
  7.     private void setupWindowAnimations() {
    8. 
  
  
  
  
  8.         Fade fade = new Fade();
    9. 
  
  
  
  
  9.         fade.setDuration(1000);
    10. 
  
  
  
  
  10.         getWindow().setEnterTransition(fade);
    11. 
  
  
  
  
  11.     }
    12.

2、两个activity或者Fragment之间shared elements 切换效果

Shared elements转换确定两个Activity之间共享的视图如何在这两个Activity之间转换;

如果两个Activity在不同的位置和大小中具有相同的图像，则通过Shared elements转换会在这两个Activity之间平滑地转换和缩放图像;

当从Activity A跳转到Activity B时，ActivityA， ActivityB中的两个item有动画变化，但是要注意的时ActivityA ，ActivityB中的item是两个独立的item;

shared elements转换包括以下几种：

  • changeBounds 改变目标布局中view的边界
  • changeClipBounds 裁剪目标布局中view的边界
  • changeTransform 实现旋转或者缩放动画
  • changeImageTransform 实现目标布局中ImageView的旋转或者缩放动画

实现上面的效果需要三个步骤：

① Window Content Transition

设置styles.xml文件，允许windowContentTransitions如下：

 
 
 
 
    
  
  
  
  
  1. value/style.xml
    2. 
  
  
  
  
    3. 
  
  
  
  
  3.     ...
    4. 
  
  
  
  
  4.     true
  
  
  
  
  5.     ...
    6. 
  
  
  
  
  6.

②定义一个相同的transition名称

分别在Activity A 和Activity B的布局文件中定义item，这两个item的属性可以不一样，但是android:transitionName必须一样。如下：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.         android:id="@+id/small_blue_icon"
    3. 
  
  
  
  
  3.         style="@style/MaterialAnimations.Icon.Small"
    4. 
  
  
  
  
  4.         android:src="@drawable/circle"
    5. 
  
  
  
  
  5.         android:transitionName="@string/blue_name" />
    6.

activity_b.xml

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.         android:id="@+id/big_blue_icon"
    3. 
  
  
  
  
  3.         style="@style/MaterialAnimations.Icon.Big"
    4. 
  
  
  
  
  4.         android:src="@drawable/circle"
    5. 
  
  
  
  
  5.         android:transitionName="@string/blue_name" />
    6.

③在activity中启动shared element

使用ActivityOptions.makeSceneTransitionAnimation()方法

ActivityA.java

 
 
 
 
    
  
  
  
  
  1. blueIconImageView.setOnClickListener(new View.OnClickListener() {
    2. 
  
  
  
  
  2.     @Override
    3. 
  
  
  
  
  3.     public void onClick(View v) {
    4. 
  
  
  
  
  4.         Intent i = new Intent(MainActivity.this, SharedElementActivity.class);
    5. 
  
  
  
  
  5.         View sharedView = blueIconImageView;
    6. 
  
  
  
  
  6.         String transitionName = getString(R.string.blue_name);
    7. 
  
  
  
  
  7.         ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);
    8. 
  
  
  
  
  8.         startActivity(i, transitionActivityOptions.toBundle());
    9. 
  
  
  
  
  9.     }
    10. 
  
  
  
  
  10. });
    11.

Fragment之间Shared elements

Fragment之间的Shared elements的使用过程和Activity之间的类似，分为三个步骤：

①允许windowContentTransitions

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     ...
    3. 
  
  
  
  
  3.     true
    4. 
  
  
  
  
  4.     ...
    5. 
  
  
  
  
  5.

②定义一个共同的变换名称

layout/fragment_a.xml

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.         android:id="@+id/small_blue_icon"
    3. 
  
  
  
  
  3.         style="@style/MaterialAnimations.Icon.Small"
    4. 
  
  
  
  
  4.         android:src="@drawable/circle"
    5. 
  
  
  
  
  5.         android:transitionName="@string/blue_name" />
    6.

layout/fragment_b.xml

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.         android:id="@+id/big_blue_icon"
    3. 
  
  
  
  
  3.         style="@style/MaterialAnimations.Icon.Big"
    4. 
  
  
  
  
  4.         android:src="@drawable/circle"
    5. 
  
  
  
  
  5.         android:transitionName="@string/blue_name" />
    6.

③使用FragmentTransaction

 
 
 
 
    
  
  
  
  
  1. FragmentB fragmentB = FragmentB.newInstance(sample);
    2. 
  
  
  
  
  2. // Defines enter transition for all fragment views
    3. 
  
  
  
  
  3. Slide slideTransition = new Slide(Gravity.RIGHT);
    4. 
  
  
  
  
  4. slideTransition.setDuration(1000);
    5. 
  
  
  
  
  5. sharedElementFragment2.setEnterTransition(slideTransition);
    6. 
  
  
  
  
  6. // Defines enter transition only for shared element
    7. 
  
  
  
  
  7. ChangeBounds changeBoundsTransition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds);
    8. 
  
  
  
  
  8. fragmentB.setSharedElementEnterTransition(changeBoundsTransition);
    9. 
  
  
  
  
  9. getFragmentManager().beginTransaction()
    10. 
  
  
  
  
  10.         .replace(R.id.content, fragmentB)
    11. 
  
  
  
  
  11.         .addSharedElement(blueView, getString(R.string.blue_name))
    12. 
  
  
  
  
  12.         .commit();
    13.

新闻标题：Android转场动画深度解析
网页网址：http://www.csdahua.cn/qtweb/news13/456313.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

企业建站知识

各行业网站

珉田数据中心　　 　LED显示屏　　 　中国电信成都枢纽中心　　 　简阳做网站　　 　成都众诚伟业　　 　成都网站制作　　 　成都做网站　　 　名片　　 　3D立体画　　 　金堂发电机　　 　成都网站建设　　 　成都网页设计　　 　草坪音箱　　 　成都工商注册代办　　 　虚拟主机　　 　成都网站排名　　 　企业网站设计　　 　整合营销　　 　分类目录网站　　 　营销网站建设