Android 应用的动画实践

Stella981
• 阅读 272

尝试搜索了一下android 动画的中文资料,很多都是一些枯燥的翻译api的一些文档,很少有系统讲解如何利用动画开发一个应用的资料,忽然,发现很多应用也不怎么注重动画在app的应用,想了想,自己尝试总结一下吧。因为,本人也不是什么动画制作师,没法把动画做得很绚丽,只好,利用内置的效果,进行简单加工,如何发挥,由各位的创意来定。鉴于,很多有关的android的动画资料里面,都是堆代码的,所以,全部代码均放在了github上面,查看完整代码可以移步到github上面去

特地说明一下,由于android 模拟器和录制工具的原因,例子展示中的gif 的抽筋播放效果不等同于实际效果,自己脑补把抽筋的部分去掉

在Android 里你能够使用的动画效果:

  • 平移

  • 缩放

  • 旋转

  • 透明

以上动画的基本使用就是本文的内容了。由于,本人的能力问题,实在搞不出让人眼前一亮的动画,就凑合着看着吧。不过,那些令人赞叹的动画效果的基础就是这些。

一般而言,要做动画的,需要封装点物理公式,用作为计算帧与帧间的数值计算,不过,如果,只是,为了搞些动画让app好用一些,倒不需要搞得这么复杂,android 官方api 已经封装好了一些常用的动画插值器。

默认内置7种类型的插值器,个人觉得,如果只是应用里面的一些动画的话这7个就够用了。

  1. AccelerateInterpolator

    加速
    Android 应用的动画实践

  2. Decelerate

    减速
    Android 应用的动画实践

  3. AccelerateDecelerateInterpolator

    开始,和结尾都很慢,但是,中间加速
    Android 应用的动画实践

  4. AnticipateInterpolator

    开始向后一点,然后,往前抛
    Android 应用的动画实践

  5. OvershootInterpolator

    往前抛超过一点,然后返回来
    Android 应用的动画实践

  6. AnticipateOvershootInterpolator

    开始向后一点,往前抛过点,然后返回来
    Android 应用的动画实践

  7. BounceInterpolator

    结束的时候弹一下
    Android 应用的动画实践

  8. LinearInterpolator

    匀速

以上动画都源自android官方api demo,用eclipse adt android 选择例子项目导航,然后,选择APIDEMOS 就能创建(什么没听说过?现在知道了吧。。。)

好了,虽然截取的gif 动画播放起来有点抽筋的感觉,接下来我们该如何在应用中使用这些知识呢?

目前讲解动画api 的资料比较多,这里就不在重复那些基础的知识了!

现在让我们学习一下,如何利用,平移,缩放,旋转创造出让人眼前一亮的动画.

为了,更有目的的使用动画,下面假想一个使用场景。

假想:商品购物车案例

Notice :为了方便看效果,动画延时时间将会设置的比较长。特地说明一下:假想就是随便想,切勿对号入座。

任务:

为了,让商城app有更好的交互效果,决定对购物车控件和商品控件上面加一些动画效果。

购物车动画设计方案:

利用,透明,平移,对购物车的出现和离开增加动画交互效果。

经过一番努力效果如下(凑合着看吧。。):

Android 应用的动画实践

相关知识点

一些动画常用的通用基础属性:

Notice: 所谓通用就是说所有动画标签都适用于这些属性

  • android:duration 设置动画播放的时间
  • android:startOffset 设置动画的开始播放时间
  • andorid:interpolator 设置动画的插值器
  • android:repeatCount 动画播放的常用次数
  • android:repeatMode 动画重播的模式,即从头到尾,从头到尾,还是从头到尾,在从尾到头。

透明的使用:

<alpha />

value 从 0 (透明) 到 1 (不透明)在android中透明主要用于对view 淡入,淡出的效果控制主要有两个属性

  • android:fromAlpha view在动画开始的透明度。
  • android:toAlpha view在动画结束的透明度。

平移的使用:

<translate />

支持使用 %,如 “50%“ 获取的是这个view的百分之50,除此之外还有另外一种写法:”50%p“ 意思是获取这个view的上一级view的百分之50 当然,指定特定值也是支持的“22.2”,不过为了兼容更多的android设备建议还是使用百分比的值。

  • android:fromXDelta

  • android:fromYDelta

    from?Delta 意思是开始的轴线

  • android:toXDelta

  • android:toYDelta

    to?Delta 意思是结束的轴线

这次的方案展示了两个插值器的使用:

用于出现的:BounceInterpolator

用于离开的: AnticipateInterpolator

所谓插值器就是用于数值的起始间的变化,就是相当于一个类似于物理引擎的东西。android官方内置了一些简单常用的数值变换,让我们,不需要去学习相关的物理知识。

例如:

开始值为1,结束值为 100.那么我们如何控制变化这个值的变化过程呢?这里就是插值器的使用。

一般匀速的话就是:

1,2,3,4,5...100。 然后我们就会看到物体以一个匀速的速度进行平移操作。

那么我们需要物体像汽车那样加速度的前进,我们可以用加速插值器,我们从1到100的过程,就会是:

1,2,4,5,8,16.。。。。100 展示在我们面前的view对象就会以一个加速度的形式进行平移。

有很多应用开发者并不熟悉动画制作的一些基础知识,可能不太明白。现在,通过对源码进行分析,来彻底搞明白这个概念。

我们分析一些Interpolator 类树:

从api文档TimeInterpolator 我们可以知道,这个插值器的实现只有一个方法:

getInterpolation(float t);

然后我们挑选前面用过的BounceInterpolator 看下,它是如何实现这个方法。如果感兴趣的,可以按照这种方法,把其他几个插值器的实现都看一遍。

最后我们会发现,插值器的作用就是返回值。

接着我们来看下Animation line:869 是怎么用这个接口的.

看完这这几个地方,相信应该对android 动画框架怎么对值进行变换的原理应该有所了解。

有了以上知识,我们对android的动画框架基本上已经完全了解,现在,我们利用学到的知识,进行更好的动画设计。

我们接着刚才的案例,着手设计商品控件的动画设计

商品动画设计:

这次,我们学习一个新的动画标签缩放(<scale>)

效果如下:

Android 应用的动画实践

<scale />

使view 大点或者小点

  • android:fromXScale

  • android:fromYScale

    from?Scale 意思是开始轴线的缩放比例(默认 1.0)

  • android:toXScale

  • android:toYScale

    to?Scale 意思是结束轴线的缩放比例(默认 1.0)

  • android:pivotX

  • android:pivotX

    旋转用的轴点坐标

最后我们把购物车的动画,和商品的动画在组合起来。效果如下:

添加商品的时候,如果购物车还没出现,先出现购物车显示的动画,在进行商品的动画播放。

具体实现 line: 77 -104

Android 应用的动画实践

这次我们学习一下如何监听动画的动作,对于AnimationListener()主要有三个

  • onAnimationStart(Animation animation)

  • onAnimationRepeat(Animation animation)

  • onAnimationEnd(Animation animation)

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Material Component 动画基础—Spring Animation
不管是在AndroidMaterialDesign,还是Flutter中,Google都在尝试统一动画的行为和实现,在Google看来,动画基本都分为两种,即模拟动画和物理动画,本篇将介绍物理动画,这个概念在Android开发中,涉及的非常少,同时文档也最少,但却是实现很多优雅动画的基础,特别是MDC中封装的一些动画,在很多细节的处理上,都使用到了物理动
Stella981 Stella981
2年前
CocosCreator 教你玩转Animation动画(第十四篇)
前言:Animation动画在游戏中是必不可少的,各种人物的走跑跳飞,以及各种表情动作,反正做游戏Animation动画是必修课了。这一篇章可以学会制作和控制各种动画,主要从一下几个方面介绍:1.动画制作流程;2.使用Animation动画编辑器制作动画;3.代码控制动画;一、动画制作的流程
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这