Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 941|回复: 0

[默认分类] Android动画之translate(位移动画)

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-12 15:25:50 | 显示全部楼层 |阅读模式
    上一篇文章讲了 Android的左右滑动切换,实现过程是非常简单,一些新手可能会向深入了了解Activity切换的原理,下面主要对左右滑动进行深入的探讨,并以项目中的一个切换效果来进一步了解。
    Activity的切换效果使用的是Android的动画效果,Android的动画在官方有相关资料:http://developer.android.com/guide/topics/graphics/animation.htmlhttp://developer.android.com/guide/topics/resources/animation-resource.html ,Activity的切换动画实际上是Android的View Animation(视图动画)中的Tween Animation效果,Tween Animation分为4种动画效果,分别是:alpha (透明变化) translate(位置移动) scale(缩放) rotate(旋转), 而左右滑动切换使用的是 translate(位置移动)的效果,在下一篇我们再讨论一下 alpha (透明变化) 、scale(缩放)、 rotate(旋转) 这三种效果,本篇只将 translate(位置移动)。
    Translate动画是非常好理解,就是定义一个开始的位置和一个结束位置,定义移动时间,然后就能自动产生移动动画。Android的translate移动方向有 横向(X) 竖向(Y), 左右滑动使用了横向移动效果,对于竖向(Y)的位置如下:


    定义一个向上退出的动画(从位置2 移动位置3)和从下面进入(从位置1移动位置2)的动画定义文件如下:
    out_to_up.xml (从屏幕上面退出)


      
       <?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/accelerate_interpolator"    android:fromYDelta="0%p"    android:toYDelta="-100%p"    android:duration="1000"></translate>
      


    in_from_down.xml (从屏幕下面进入)


      
       <?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/accelerate_interpolator"    android:fromYDelta="100%p"    android:toYDelta="0%p"    android:duration="1000"></translate>
      


    接下来讲一讲translate的几个重要的属性:
    android:interpolator: 加速器,非常有用的属性,可以简单理解为动画的速度,可以是越来越快,也可以是越来越慢,或者是先快后忙,或者是均匀的速度等等,对于值如下:


      
       @android:anim/accelerate_interpolator: 越来越快@android:anim/decelerate_interpolator:越来越慢@android:anim/accelerate_decelerate_interpolator:先快后慢@android:anim/anticipate_interpolator: 先后退一小步然后向前加速@android:anim/overshoot_interpolator:快速到达终点超出一小步然后回到终点@android:anim/anticipate_overshoot_interpolator:到达终点超出一小步然后回到终点@android:anim/bounce_interpolator:到达终点产生弹球效果,弹几下回到终点@android:anim/linear_interpolator:均匀速度。
      


    android:duration: 动画运行时间,定义在多次时间(ms)内完成动画
    android:startOffset: 延迟一定时间后运行动画
    fromXDelta: X轴方向开始位置,可以是%,也可以是具体的像素 具体见图
    toXDelta:   X轴方向结束位置,可以是%,也可以是具体的像素
    fromYDelta: Y轴方向开始位置,可以是%,也可以是具体的像素
    toYDelta:    Y轴方向结束位置,可以是%,也可以是具体的像素

    当你了解上面的属性后,你可以组合出很多有趣的位置移动效果。比如使用加速器:@android:anim/bounce_interpolator 可以产生弹球落地时的效果。
    在实际项目中需要在进行只使用“左右上下滑动”的效果可能还不够炫,希望在切换时能产生更动态的效果,比如开始切换时第1个Activity先向后退一步,然后在向左方向退出屏幕。然后第2个Activity紧跟后面从右边进入屏幕,到达终点时有一个动态效果。在了解了动画加速器后,大家都知道可以采用:anticipate_overshoot_interpolator、anticipate_interpolator、overshoot_interpolator这三个加速器实现左右滑动切换时启动或者结束的动态效果。
    动画文件定义如下:
    dync_out_to_left.xml


      
       <?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="500"    android:fromXDelta="0%p"    android:interpolator="@android:anim/anticipate_interpolator"    android:toXDelta="-100%p" />
      


    dync_in_from_right.xml


      
       <?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="500"    android:fromXDelta="100%p"    android:interpolator=" @android:anim/anticipate_overshoot_interpolator "    android:toXDelta="0%p" />
      


    但是再使用以上动画配置,会出现以下问题:
    1.     第1个Activity使用anticipate_interpolator时,开始移动时先向后退一步,然后向前移动。但向后退一步步伐太大,略显夸张,实际应用中只希望退后一小小步就行了。
    2.     由于开始向后退一步,额外增加了移动时间,导致前一Activity和后一个Activity的时间不同步。
    为了解决以上问题,重新定义动态效果,将第1个Activity的移动分为2个动画效果:(1)用200毫秒时间先向后移动2%p的位置 (2) 延迟200毫秒后从2%p位置向前移动到-100%p位置。 然后第2个Activity从延迟200毫秒然后从102%p位置移动到0%p位置。
    动画定义如下:
    new_dync_out_to_left.xml


      
       <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:shareInterpolator="false" >     <translate        android:duration="200"        android:fromXDelta="0%p"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:toXDelta="2%p" />    <translate        android:duration="1000"        android:fromXDelta="2%p"        android:interpolator="@android:anim/accelerate_interpolator"        android:startOffset="200"        android:toXDelta="-100%p" /> </set>
      


    new_dync_in_from_right.xml



      
       <?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="1000"    android:fromXDelta="102%p"    android:interpolator="@android:anim/anticipate_overshoot_interpolator"    android:startOffset="200"    android:toXDelta="0%p" />
      


    配套代码:http://www.oschina.net/code/snippet_97118_7734

    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-4-20 03:31 , Processed in 0.367478 second(s), 37 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表