项目地址:https://github.com/SherlockShi/AndroidMaterialAnimationPractise
一、前言
元素共享变换(shared element transition)决定了共享的view元素从一个Activity/Fragment 到另一个Activity/Fragment的切换中是如何动画变化的。
请记住,共享元素变换并不是真正实现了两个Activity或者Fragment之间元素的共享,界面还是两个不同界面,只不过Framework采用了不同的方法来达到相同的视觉效果。
二、效果图
三、实现方法
1. 在主题中启用窗口内容转换
values-v21/styles.xml
1 | <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> |
2. 在styles.xml文件中指定一个共享元素转换
values-v21/styles.xml
1 | <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> |
此处也可以直接使用系统默认自带的转换效果,如果这么做,则下一步
将转换效果定义为XML资源
可省略
1 | <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> |
3. 将转换效果定义为XML资源(可选)
transition-v21/def_transition.xml
1 | <?xml version="1.0" encoding="utf-8"?> |
changeBounds
- 为目标视图的布局边界的变化添加动画。changeClipBounds
- 为目标视图的裁剪边界的变化添加动画。changeTransform
- 为目标视图的缩放与旋转变化添加动画。changeImageTransform
- 为目标图像的大小与缩放变化添加动画。
详细文档可参考Transition类或具体某一属性的API文档。
4. 为共享元素指定transitionName
利用android:transitionName
属性对两个布局中的共享元素指定一个通用名称:
layout/activity_main.xml
1 | <ImageView |
activity_shared_elements.xml
1 | <ImageView |
要点:共享元素尽量设置固定值或wrap_content,否则在界面过渡的开始、结束位置容易出现闪屏。
分析原因可能为:由于元素的居中等显示属性的不同导致,如设置文本居中显示,则元素从起始位置开始移动,到达结束位置时,先移动到结束时的居中位置,然后瞬间变到结束位置,如果这时候两个位置不一致,会造成闪屏。
5. 使用 makeSceneTransitionAnimation() 方法
MainActivity.java
1 | View ivSquareBlue = findViewById(R.id.iv_square_blue); |
如果有多个共享元素,则使用以下方法:
1 | View ivSquareBlue = findViewById(R.id.iv_square_blue); |
四、参考资料
Material Animations
定义定制动画-Android开发文档
PS:欢迎关注SherlockShi博客