共享元素转场动画Part1————Activity to Activity
2017-11-14 16:30
369 查看
https://hexiangyuan.github.io/2017/03/02/%E5%85%B1%E4%BA%AB%E5%85%83%E7%B4%A0%E8%BD%AC%E5%9C%BA%E5%8A%A8%E7%94%BBPart1--ActivityToActivity/
https://hexiangyuan.github.io/2017/03/02/%E5%85%B1%E4%BA%AB%E5%85%83%E7%B4%A0%E8%BD%AC%E5%9C%BA%E5%8A%A8%E7%94%BBPart1--ActivityToActivity/ https://hexiangyuan.github.io/2017/03/02/%E5%85%B1%E4%BA%AB%E5%85%83%E7%B4%A0%E8%BD%AC%E5%9C%BA%E5%8A%A8%E7%94%BBPart1--ActivityToActivity/
发表于 2017-03-02
Share Element Transition(共享元素变换)这一概念是在android 5.0 Material Design中提出的新的页面转场的方式。
那么本文将教你一步一步的做出炫酷的MD Style的转场动画。
元素共享变换的定义:共享的View元素从一个Activity/Fragment到另一个Activity/Fragment的切换中是如何变化的;
在Google Play,Google Music 等众多Google嫡系APP中就得到了很多的运用。例如下图是Google Music的变化效果:
上图中的Activity A 中Grid列表的CardView中ImageView和Acitivty B 的ImageView拥有共享的元素图片,于是就形成了
无缝的动画切换效果。
首先,我们要开启windowContentTransitions.
如果你的targetSdk < 21,那么你需要在你的res文件夹下创建一个value-v21的资源文件夹,添加以下一行代码
然后,我们搭建两个Activity ActivityA 和ActivityB,如下图 ActivityA中有一个图片ImageView和一个按钮Button,ActivityB中有一个大图ImageView和一个描述的TextView。
ActivityA layout 布局文件如下:
特别注意的是
Studio会变黄的tips提醒
This check finds attributes set in XML files that were introduced in a version newer than the oldest version targeted by your application (with the minSdkVersion attribute).
This is not an error;
the application will simply ignore the attribute. However, if the attribute is important to the appearance of functionality of your application, you should consider finding an alternative way to achieve the same result with only available attributes, and then
you can optionally create a copy of > > the layout in a layout-vNN folder which will be used on API NN or higher where you can take advantage of the newer attribute.
意思是:这不是个错误,当你的target < 21时,你会收到lint的警告,你可以忽略或者设置不提醒。
AcitivityA java代码文件如下:
需要留意的是
通过这个
然后,在ActivityB中:
layout布局文件
java
在ActivityB中就只需要在共享元素上添加一个属性
那么,Acitity to Activity 的共享动画就完成了,赶快Run 一下看看成果吧,是不是很简单?So easy!
未完待续…….
下期预告 part2 – Fragment to Fragment
https://hexiangyuan.github.io/2017/03/02/%E5%85%B1%E4%BA%AB%E5%85%83%E7%B4%A0%E8%BD%AC%E5%9C%BA%E5%8A%A8%E7%94%BBPart1--ActivityToActivity/ https://hexiangyuan.github.io/2017/03/02/%E5%85%B1%E4%BA%AB%E5%85%83%E7%B4%A0%E8%BD%AC%E5%9C%BA%E5%8A%A8%E7%94%BBPart1--ActivityToActivity/
共享元素转场动画Part1————Activity to Activity
发表于 2017-03-02Share Element Transition(共享元素变换)这一概念是在android 5.0 Material Design中提出的新的页面转场的方式。
那么本文将教你一步一步的做出炫酷的MD Style的转场动画。
什么是共享元素变换?
元素共享变换的定义:共享的View元素从一个Activity/Fragment到另一个Activity/Fragment的切换中是如何变化的;在Google Play,Google Music 等众多Google嫡系APP中就得到了很多的运用。例如下图是Google Music的变化效果:
上图中的Activity A 中Grid列表的CardView中ImageView和Acitivty B 的ImageView拥有共享的元素图片,于是就形成了
无缝的动画切换效果。
开始准备工作
首先,我们要开启windowContentTransitions.如果你的targetSdk < 21,那么你需要在你的res文件夹下创建一个value-v21的资源文件夹,添加以下一行代码
123456 | <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> //add this line to open transitions <item name="android:windowContentTransitions">true</item> </style> |
Activity
to Activity
然后,我们搭建两个Activity ActivityA 和ActivityB,如下图 ActivityA中有一个图片ImageView和一个按钮Button,ActivityB中有一个大图ImageView和一个描述的TextView。ActivityA layout 布局文件如下:
123456789101112131415161718192021222324252627282930 | <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" 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="io.github.hexiangyuan.sharedelementtransitionsdemo.ActivityA"> <ImageView android:id="@+id/imageView" android:layout_width="148dp" android:layout_height="148dp" android:scaleType="centerCrop" android:transitionName="@string/transitions_name" android:src="@drawable/image" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_below="@+id/imageView" android:onClick="imageClick" android:text="Click Me" /></RelativeLayout> |
android:transitionName="@string/transitions_name这一个属性,需要加在共享元素的View下,细心的朋友会发现Android
Studio会变黄的tips提醒
This check finds attributes set in XML files that were introduced in a version newer than the oldest version targeted by your application (with the minSdkVersion attribute).
This is not an error;
the application will simply ignore the attribute. However, if the attribute is important to the appearance of functionality of your application, you should consider finding an alternative way to achieve the same result with only available attributes, and then
you can optionally create a copy of > > the layout in a layout-vNN folder which will be used on API NN or higher where you can take advantage of the newer attribute.
意思是:这不是个错误,当你的target < 21时,你会收到lint的警告,你可以忽略或者设置不提醒。
AcitivityA java代码文件如下:
1234567891011121314151617181920 | public class ActivityA extends AppCompatActivity { private ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.acitivit_a); imageView = (ImageView) findViewById(R.id.imageView); } public void imageClick(View v) { Intent intent = new Intent(this, SimpleActivityB.class); ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation( this, imageView, getString(R.string.transitions_name) ); startActivity(intent, optionsCompat.toBundle()); }} |
123456 | Intent intent = new Intent(this, SimpleActivityB.class); ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation( this, imageView, getString(R.string.transitions_name) ); startActivity(intent, optionsCompat.toBundle()); |
ActivityOptionsCompat.makeSceneTransitionAnimation方法,传入(context,view,transitionName)这些参数,然后跳转时候会将optiont通过bundle的方式传递过去;
然后,在ActivityB中:
layout布局文件
1234567891011121314151617181920212223242526272829 | <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="io.github.hexiangyuan.sharedelementtransitionsdemo.ActivityA"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="184dp" android:scaleType="centerCrop" android:transitionName="@string/transitions_name" android:src="@drawable/image" /> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_below="@+id/imageView" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:text="这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容" android:textSize="16sp" /></RelativeLayout> |
12345678 | public class ActivityB extends AppCompatActivity{ @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_b); }} |
android:transitionName="@string/transitions_name"就OK了;
那么,Acitity to Activity 的共享动画就完成了,赶快Run 一下看看成果吧,是不是很简单?So easy!
未完待续…….
下期预告 part2 – Fragment to Fragment
相关文章推荐
- Android共享元素转场动画Part2——Fragment to Fragment
- Android使用共享元素实现转场动画 错误:Unable to create layer for LinearLayout
- Android 5.0学习之Activity共享元素过渡动画
- Android中Activity切换时共享视图元素的切换动画(4.x兼容方案)
- 在Fragment如何使用共享元素转场动画
- 实现Activity间的共享控件转场动画
- Android中Activity切换时共享视图元素的切换动画(4.x兼容方案)
- Material Design之定制动画--触摸反馈,循环揭露,转场动画,共享元素和曲线运动
- 详解Android(共享元素)转场动画开发实践
- 实现Activity间的共享控件转场动画
- Android中Activity切换时共享视图元素的切换动画(5.0以上)
- Android中Activity切换时共享视图元素的切换动画(4.x兼容方案)
- Android5.0之Activity的转场动画
- Android 动画-共享元素动画
- Activity转场动画
- Android共享元素场景切换动画的实现
- Activity转场动画
- ActivityOptionsCompat 转场动画 Palette 颜色拾取学习
- 使用ActivityOptions动画共享组件的方式实现跳转Activity动画
- Android5.0之Activity的转场动画的示例