Android实现布局动画和共享动画的结合效果

 更新时间:2023年09月13日 09:00:26   作者:似曾相识2022  
今天给大家带来能够提升用户体验感的交互动画,使用起来非常简单,体验效果非常赞,其中仅使用到布局动画和共享动画,文章通过代码示例介绍的非常详细,感兴趣的同学可以自己动手试一试

废话不多说,直接上效果图:

怎么样,效果看起来还不错吧。这其实都是官方提供的效果,接下来让我给大家简单分享下整套效果实现的过程和其中遇到的一些问题。

首先是布局动画,何为布局动画呢?

布局动画的作用于ViewGroup,执行动画效果的是内部的子View。布局动画在Android中可以通过LayoutAnimationLayoutTransition来实现。咱们这里直接使用LayoutAnimation方式。在项目目录res下新建anim文件夹,并在其中新建layout_slid_from_right.xml文件和slide_from_right.xml两个文件:

//GroupView中设置动画文件
android:layoutAnimation="@anim/layout_slid_from_right"
//layout_slid_from_right.xml文件
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/slide_from_right"
    android:animationOrder="normal"
    android:delay="15%"/>
//slide_from_right.xml文件
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600">
    <translate
        android:fromYDelta="100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0.5"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
    <scale
        android:fromXScale="20%"
        android:fromYScale="20%"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="100%"
        android:toYScale="100%" />
    <rotate
        android:fromDegrees="-5"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="0" />
</set>

其中set标签下可包含多个动画,运行时动画就是同时进行的。具体实现步骤可以参考我之前的文章:Android中LayoutAnimal的使用方法详解_Android_脚本之家 (jb51.net)

  • translate :平移动画
  • alpha:渐变动画
  • scale:缩放动画
  • rotate:旋转动画

接下来是共享动画,其实就是两个页面都包含了同一个元素,进行的一种转场动画。这是Android5.0以后Google推出Material Design设计风格中包含的功能。

如何使用呢?

  • 第一个ActivityXML文件中咱们将ImageView作为共享元素
<ImageView
    android:id="@+id/iv"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:riv_corner_radius="10dp" />
  • 第二个ActivityXML文件中需要添加一个transitionName属性,在跳转页面的时候也要用到它。
<ImageView
   android:id="@+id/iv"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:scaleType="centerCrop"
   android:transitionName="share"/>
  • 跳转页面时使用ActivityOptionsCompat设置共享信息并传输给下个页面:
val optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, iv, "share")//iv是当前点击的图片  share字符串是第二个activity布局中设置的**transitionName**属性
startActivity(Intent(this, MainActivity10::class.java).apply {
    putExtra("data", url) //这里仍然可以正常传值
}, optionsCompat.toBundle()) //注意这里是转化为了bundle
  • 当然关闭页面的时候不再使用finish() 方法而是使用如下方式:
ActivityCompat.finishAfterTransition(this)

到此运行程序,就能达到和上面一样的动画效果。

遇到的坑:

  • 设置布局动画的时候,一定要记得在set标签内添加duration属性并赋值,否则不会有动画效果
  • 布局动画作用于所有的GroupView
  • 转场动画在选用共享属性的时候最好选用原生View。笔者之前尝试过一些第三方的ImageView,在跳到目标页的时候即便XML中将图片宽高设置为了match_parent,结果却只展示了图片本身的宽高。很有可能是自定义过程中计算和官方有冲突。
  • 官方的转场动画从5.0开始支持

好了,以上便是布局动画和共享动画的结合效果的全部内容。大家可以根据自己的需求和喜好实现更多酷炫的效果,希望这篇内容能给大家带来收获!

到此这篇关于Android实现布局动画和共享动画的结合效果的文章就介绍到这了,更多相关Android布局动画和共享动画结合内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android中碎片的使用方法详解

    Android中碎片的使用方法详解

    这篇文章主要介绍了Android中碎片的使用方法详解,其实碎片很简单,但是网上胡乱充数的博文太多了,以至于我们有时候觉得比较乱,今天就来简单讲解一下碎片的使用,需要的朋友可以参考下
    2019-06-06
  • Android实现志愿者系统详细步骤与代码

    Android实现志愿者系统详细步骤与代码

    这篇文章主要介绍了Android实现志愿者系统,本系统采用MVC架构设计,SQLite数据表有用户表、成员表和活动表,有十多个Activity页面。打开应用,进入欢迎界面,3s后跳转登录界面,用户先注册账号,登录成功后进入主界面
    2023-02-02
  • Android Glide使用方法与原理分析

    Android Glide使用方法与原理分析

    Android Glide是一款强大的图片加载库,提供了丰富的功能和灵活的使用方式,本文将深入分析Glide的工作原理,并介绍一些使用姿势,助你更好地运用这个优秀的库,需要的朋友可以参考下
    2023-09-09
  • Flutter GetX使用实例详细解读

    Flutter GetX使用实例详细解读

    这篇文章主要为大家介绍了Flutter GetX使用示例详细解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Android使用SwipeListView实现类似QQ的滑动删除效果

    Android使用SwipeListView实现类似QQ的滑动删除效果

    这篇文章主要介绍了Android使用SwipeListView实现类似QQ的滑动删除效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Android实现授权访问网页的方法

    Android实现授权访问网页的方法

    这篇文章主要介绍了Android实现授权访问网页的方法,需要的朋友可以参考下
    2014-07-07
  • android使用ViewPager实现轮播效果

    android使用ViewPager实现轮播效果

    这篇文章主要为大家详细介绍了android使用ViewPager实现轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 使用RadioButton+Fragment实现底部导航栏效果

    使用RadioButton+Fragment实现底部导航栏效果

    这篇文章主要为大家详细介绍了使用RadioButton+Fragment实现底部导航栏效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Android 照片选择区域功能实现示例

    Android 照片选择区域功能实现示例

    这篇文章主要介绍了Android 照片选择区域功能实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Android监听电池状态实例代码

    Android监听电池状态实例代码

    这篇文章给大家介绍Android监听电池状态实例代码,对android监听电池状态相关知识感兴趣的朋友一起学习吧
    2016-03-03

最新评论