前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android 动画总结(3) - 补间动画

Android 动画总结(3) - 补间动画

作者头像
三流之路
发布2018-09-11 16:23:30
5540
发布2018-09-11 16:23:30
举报
文章被收录于专栏:三流程序员的挣扎

Tween Animation 包括、ScaleAnimation、TranslateAnimation、RotateAnimation 以及这四种动画的组合 AnimationSet。

这种动画不改变 View 的位置,比如 TranslateAnimation,虽然看着 View 移走了,但是点击事件仍然在原位置触发,过去遇到这种情况,需要计算动画结束后 View 在屏幕上的精确位置,然后在这个位置再显示出一个 View 来,将原来的隐藏掉,现在遇到这种情况可以用 Property Animation 来替换。

xml 方式

res/anim 下创建 set_demo_anim.xml,只为说明,运行时间位置比较随便。

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:shareInterpolator="false">
    <alpha
        android:duration="200"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <translate
        android:duration="300"
        android:fromXDelta="5"
        android:fromYDelta="0%"
        android:toXDelta="20"
        android:toYDelta="30%p" />
    <rotate
        android:duration="200"
        android:fromDegrees="0"
        android:toDegrees="359"
        android:pivotX="5"
        android:pivotY="50%p"
        android:repeatCount="1" />
    <set
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="700">
        <scale
            android:duration="100"
            android:fromXScale="0.9"
            android:fromYScale="0.9"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="1.1"
            android:toYScale="1.1" />

        <scale
            android:duration="100"
            android:fromXScale="1"
            android:fromYScale="1"
            android:pivotX="50%"
            android:pivotY="50%"
            android:startOffset="100"
            android:toXScale="0.9090909"
            android:toYScale="0.9090909" />
    </set>
</set>
  1. <set> 里可以嵌套 <set>
  2. <set> 中,如果 startOffset 了,后一个动画是在前一个基础上改变的,比如上面最后两个 <scale>,第一步从 0.9 放大到 1.1,第二步想从 1.1 回到 1 的,但 fromXScale 不能是 1.1,toXScale 也不能是 1,因为这样相当于在前面一个动画结束的基础上先变成 1.1 倍,再回 1,即对于原控件,是 1.21 变到最后的 1.1,所以想变成原始的 1,是对已经变成 1.1 的这个大小来说,从它的 1 变成 1/1.1 = 0.9090909
  3. 如果是 <set>,fillAfter 这种属性要设置在 <set> 标签里才有效
代码语言:javascript
复制
val anim = AnimationUtils.loadAnimation(ctx, R.anim.set_demo_anim)
view.animation = anim

代码方式

上面的动画 xml 对应的代码书写方式

代码语言:javascript
复制
val set = AnimationSet(false)
set.fillAfter = true

val alpha = AlphaAnimation(0f, 1f)
alpha.duration = 200

val translate = TranslateAnimation(Animation.ABSOLUTE, 5f, Animation.ABSOLUTE, 20f,
        Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_PARENT, 0.3f)
translate.duration = 300

val rotate = RotateAnimation(0f, 359f, Animation.ABSOLUTE,
        5f, Animation.RELATIVE_TO_PARENT, 0.5f)
rotate.duration = 200
rotate.repeatCount = 1

///////////////////////////
val childSet = AnimationSet(false)
childSet.interpolator = AccelerateInterpolator()
childSet.startOffset = 700

val scaleInChildSet = ScaleAnimation(0.9f, 1.1f, 0.9f, 1.1f, 0.5f, 0.5f)
scaleInChildSet.duration = 100

val scaleInChildSet2 = ScaleAnimation(1f, .9090909f, 1f, .9090909f, 0.5f, 0.5f)
scaleInChildSet2.duration = 100
scaleInChildSet2.startOffset = 100

childSet.addAnimation(scaleInChildSet)
childSet.addAnimation(scaleInChildSet2)
///////////////////////////

set.addAnimation(alpha)
set.addAnimation(translate)
set.addAnimation(rotate)
set.addAnimation(childSet)

view.startAnimation(set)
// set.cancel()
// set.reset()
// view.clearAnimation();

属性值

特有属性:

  • set
    • android:interpolator - 指定插值器
    • android:shareInterpolator - true 表示所有的子结点共享这一个插值器
  • alpha
    • android:fromAlpha - 开始时透明度
    • android:toAlpha - 结束时透明度
  • scale
    • android:fromXScale - 开始时水平方向缩放比例
    • android:toXScale - 结束时水平方向缩放比例
    • android:fromYScale
    • android:toYScale
    • android:pivotX - 水平方向动画的中心点
    • android:pivotY
  • translate
    • android:fromXDelta - 开始时水平方向相对于自身位置的偏移量
      • 浮点值(5),自身偏移 5 像素
      • 百分比(5%),自身宽的5%
      • 百分比(5%p),父容器宽的5%
    • android:toXDelta
    • android:fromYDelta
    • android:toYDelta
  • rotate
    • android:fromDegrees - 旋转前的角度
    • android:toDegrees - 旋转后的角度
    • android:pivotX - 水平方向旋转中心位置
      • 浮点值(5),离自身左边缘 5 像素
      • 百分比(5%),离自身左边缘的大小是自身宽的5%
      • 百分比(5%p),离父容器左边缘的大小是自身宽的5%
    • android:pivotY

通用属性:

属性名

含义

android:detachWallpaper

Special option for window animations: if this window is on top of a wallpaper, don't animate the wallpaper with it.

android:duration

动画持续时间(毫秒)

android:fillAfter

true 时,动画结束停留在最后

android:fillBefore

动画结束回到最初。fillEnabled 为 false 时,系统默认它为 true,即使设为 false 也没用。fillEnable 为 true 才可以控制

android:fillEnabled

为 true 时 fillBefore 才有效

android:interpolator

指定插值器

android:repeatCount

动画重复次数

android:repeatMode

动画重复模式,有 restart 和 reverse 两种

android:startOffset

延迟执行动画

android:zAdjustment

动画期间 Z 轴位置,有三个值:bottom(放到其它所有内容下面),normal(保持动画前状态),top(放到其它所有内容上面)

自定义补间动画

若几种基本的动画无法实现需求,可以继承 Animation 自定义 Tween Animation,主要是重写 applyTransformation 方法。具体的写法可以参考 AlphaAnimation 这类系统已经实现了的。

代码语言:javascript
复制
class MyAnimation : Animation() {
    /**
     * @param interpolatedTime 动画时间进行比,从 0 到 1
     * @param t 在不同时刻对动画的变形程度
     */
    override fun applyTransformation(interpolatedTime: Float, t: Transformation?) {
        super.applyTransformation(interpolatedTime, t)
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.04.01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • xml 方式
  • 代码方式
  • 属性值
  • 自定义补间动画
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档