在上一篇中我们说到了使用Navigation导航Fragment,介绍了Navigation的基本使用,然后突然想到做一些Fragment的跳转动画,所以产生了一些内容哈哈哈
Navigation中使用动画
通常我们设置一个跳转action是酱紫的:
<action android:id="@+id/action_scale1" app:destination="@id/fragmentTwo" app:enterAnim="@anim/scale_in_right" app:exitAnim="@anim/scale_out_left" app:popExitAnim="@anim/scale_out_right" app:popEnterAnim="@anim/scale_in_left"/>
|
可以点击Fragment,通过傍边的小箭头设置:
其中可以设置目的地,动画,返回地址:
设置动画需要在res目录下新建anim文件夹,保存动画xml文件:
关于几个参数的介绍:
属性 |
详情 |
app:enterAnim |
目标Fragment进场动画 |
app:exitAnim |
原Fragment退出动画 |
app:popExitAnim |
返回时,原Fragment退出动画 |
app:popEnterAnim |
返回Fragment进场动画 |
动画属性说明
这里使用的是补间动画,就是显示样式看起来改变了,其实view的实际位置是没有变化的:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="4000" android:fillAfter="true" android:fillBefore="true" android:interpolator="@[package:]anim/interpolator_resource" android:repeatMode="restart | reverse" android:repeatCount = “0” android:shareInterpolator="true" android:startOffset="float"> <alpha android:fromAlpha="float" android:toAlpha="float" /> <scale android:fromXScale="float" android:fromYScale="float" android:pivotX="float" android:pivotY="float" android:toXScale="float" android:toYScale="float" /> <rotate android:fromDegrees="float" android:pivotX="float" android:pivotY="float" android:toDegrees="float" /> <translate android:fromXDelta="float" android:fromYDelta="float" android:toXDelta="float" android:toYDelta="float" /> </set>
|
常用的属性:
属性 |
介绍 |
alpha |
透明度设置效果 |
scale |
大小缩放效果 |
rotate |
旋转效果 |
translate |
位移效果 |
常用设置:
属性 |
介绍 |
android:duration |
动画时长 |
fromXX |
开始状态 |
toXX |
结束状态 |
具体的参数太多了,可以参考:
https://www.jianshu.com/p/1aabbd498262
https://wiki.jikexueyuan.com/project/android-animation/1.html
接下来我们自己定义一些跳转动画,为了让大家看清楚,时间设置的会长一点,实际使用建议设置短一点,这样看起来干净利落。我一般将经场动画设置为400ms,出场动画设置为250ms
样式总结
渐入渐出样式
AS提供了一些默认的动画,是渐入渐出样式:
<action android:id="@+id/action_default" app:destination="@id/fragmentTwo" app:enterAnim="@anim/nav_default_enter_anim" app:exitAnim="@anim/nav_default_exit_anim" app:popEnterAnim="@anim/nav_default_pop_enter_anim" app:popExitAnim="@anim/nav_default_pop_exit_anim"/>
|
平移样式
自定义平移样式,主要是设置X轴偏移:
<translate android:duration="400" android:fromXDelta="100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%"/>
|
缩放样式1
自定义缩放样式,translate配合scale使用:
<translate android:fromXDelta="-100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="300"/>
<scale android:duration="300" android:fromXScale="0.5" android:fromYScale="0.5" android:pivotX="50%" android:pivotY="50%" android:toXScale="1" android:toYScale="1" />
|
缩放样式2
缩放样式3
从下往上出现
旋转
如果你想玩点花的,还可以这样子:
最后附上代码:
https://github.com/xluu233/NavigationAnim
卑微Androider在线求个Star😅
相关阅读:
封装一个好看的吐司工具