Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

将基于物理的动画添加到 Android 应用程序

by
Difficulty:BeginnerLength:MediumLanguages:

Chinese (Simplified) (中文(简体)) translation by Zuojianzifu 作茧自缚 (you can also view the original English article)

感觉到流体和真实的动画往往使用户界面更具吸引力。难怪材料设计语言如此强调他们 !

如果你曾经试图创建此类的动画,但是,你知道Android SDK 所提供的简单动画和插值器往往不够好。这就是所谓的动态动画出现的原因,该物理模块是随着最近修订的Android支持库一同出现的。

通过使用动态动画,你可以创建基于物理的动画,该动画十分类似于现实世界中物体的运动。 你也可以使他们实时响应用户操作。在本教程中,将展示你如何创建几个这样的动画。

系统必备组件

接下来,确保你有下列组件

  • Android Studio 3.0 Canary 4 或者更高版本
  • 一个运Android 4.4 或更高版本的Android设备或模拟器

1.添加依赖项

为了能在您的项目中使用动态动画,必须将其添加为您的app模块下 build.gradle 文件中的implementation 依赖项:

在本教程中,我们要将要在ImageView控件上运行动画。当然,它会显示一些图片,所以打开 Vector Assets Studio将下列材料图标添加到您的项目:

  • 中性表情
  • 非常满意表情

他们看起来像:

Two Material icons

为获得最佳效果,我建议你设置图标的大小为 56 x 56 dp。

2.创建一个Fling动画

当你在现实世界中扔物体时,你给它大的动量。因为动量只不过是质量和速度的产物,该对象将最初具有很高的速度。 然而,渐渐地,由于摩擦,这会减慢直到它完全停止移动。使用动态动画 FlingAnimation 类,您可以在您的应用程序内模拟这种行为。

为了演示,让我们现在创建的布局,其中包含可滑动的ImageView控件,显示 ic_sentiment_neutral_black_56dp 图标和一个用户可以触发滑动动画的Button。如果你将它们都放到一个RelativeLayout容器中,您布局的 XML 文件将如下所示:

上面的代码中,你可以看到Button部件具有一个 onClick 属性。通过点击 Android Studio显示在它旁边的红色灯泡图标,你可以在你的Activity类内生成相关联的单击事件。:

您现在可以使用其构造函数创建FlingAnimation类的新实例,该构造函数需要一个View对象和一个可动画属性的名称。动态动画支持几个动画属性,如规模、 平移、 旋转和透明(alpha)。

以下代码显示了如何创建一个FlingAnimation实例,该实例的动画将作用于我们布局的ImageView的X坐标:

默认情况下,FlingAnimation实例被配置为使用0像素/秒作为其初始速度。 这意味着一旦动画开始就会停止。 为了模拟一个真实的滑动,你必须永远记得调用setStartVelocity()方法并传递一个很大的值。

此外必须了解,如果没有摩擦力,动画将不会停止。因此,你还必须调用 setFriction() 方法并传递给它一个小的数值。

下面的代码配置了 FlingAnimation 实例,这样 ImageView在动画运行期间不会滑动出用户屏幕的边界:

这时,你可以简单地调用 start() 方法启动动画。

如果您现在运行应用程序并按下按钮,您应该能够看到滑动动画。

值得注意的是,在创建基于物理的动画时,不要指定持续时间或结束值 - 当动画意识到它的目标对象(前文的ImageView)在用户的屏幕上没有显示任何可见的移动时,动画会自动停止。

3.模拟弹簧

动态动画允许您轻松地添加弹簧动态效果到您的动画。 换句话说,它可以帮助您创建动画,使您的小部件以自然的方式反弹,拉伸和挤压。

为了简单起见,我们现在重新使用我们的布局的ImageView,并将一个基于弹簧的动画应用到它。 然而,为了允许用户启动动画,您需要在布局中添加另一个Button小部件。

若要创建一个基于弹簧的动画,您必须使用 SpringAnimation 类。其构造函数参数需要一个View对象和一个动画的属性。 以下代码创建一个配置为对ImageView的x坐标进行动画的SpringAnimation实例:

为了控制一个基于弹簧的动画行为,你需要一个弹簧。 您可以使用SpringForce类创建一个,指定弹簧的静止位置,阻尼比和刚度。 您可以将阻尼比视为一个常数,就像摩擦一样,负责将动画放慢直到停止。 另一方面,刚度指定拉伸弹簧需要多少力。。

如果所有这些都听起来有点复杂,那么这个好消息是,SpringForce类提供了几个直观命名的常量,可用于快速配置您的弹簧。 例如,以下代码创建一个非常有弹性和非常灵活的弹簧:

在上面的代码中,您可以看到我们将弹簧的最终静止位置的值设置为ImageView的初始X坐标。 通过这种配置,您可以想象ImageView附加到一个紧密的,不可见的橡皮筋上,每次移动时,都可以将ImageView恢复到原来的位置。

现在可以使用setSpring()方法将弹簧与SpringAnimation实例相关联。

最后,在开始动画之前,您必须确保使用setStartVelocity()方法给它一个很大的初始速度。

如果您现在运行应用程序,您应该可以看到这样的场景:

4. 监听动画事件

使用动态动画库创建的动画必须始终从UI线程启动。 您也可以确定它将在调用start()方法时立即开始。 但是,它会异步运行。 因此,如果要在结束时收到通知,则必须使用addEndListener()方法将OnAnimationEndListener对象附加到该对象。

若要查看侦听器在行动,让我们改变材料图标 ImageView 显示每次基于弹簧的动画,我们在上一步中创建的在开始和结束。 建议你动画启动时使用 ic_sentiment_very_satisfied_black_56dp 图标;当它结束的时候使用ic_sentiment_neutral_black_56dp 图标。下面的代码所示:

使用上面的代码,动画将看起来像这样:

5.多个属性进行动画处理

FlingAnimationSpringAnimation类的构造函数只能接受一个可动画属性参数。 如果要同时为多个属性生成动画,则可以创建多个类的实例,这些实例可能会变得麻烦,或者创建一个封装了所有所需属性的新定制属性。

要创建一个自定义的动画属性,您必须创建一个FloatPropertyCompat类的子类,它有两个抽象方法:setValue()getValue()。 你可能已经猜到了,你可以在 setValue() 方法内部更新所有你所需的动画属性的值。但是,在 getValue() 方法里面,你仅仅只能返回一个任何属性的当前值。 由于这个限制,通常要在确保封装的属性的值不是完全相互独立。

例如,以下代码显示了如何创建一个名为scale的自定义属性,可以均匀地为控件(widget)创建SCALE_XSCALE_Y属性:

现在自定义属性已准备就绪,您可以像任何其他动画属性一样使用它。 以下代码显示了如何使用它创建一个SpringAnimation对象:

在创建使用自定义属性的动画时,最好也调用setMinimumVisibleChange()方法并传递一个有意义的值,以确保动画不会消耗太多的CPU周期。 对于我们的缩放控件的动画,您可以使用以下代码:

以下是自定义属性动画的外观:

结论

您现在知道使用动态动画的基础知识。 通过本教程中学到的技术,您可以在几分钟内创建令人信服的基于物理的动画,即使您对牛顿物理知识知之甚少。

要了解有关动态动画的更多信息,请参阅官方文档。 在此期间,请查看我们最近在Android应用程序开发中发布的其他一些文章!

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.