在Android上创建气泡按钮动画

2020-07-21  本文已影响0人  EnZone

为整理动画相关文章,方便日后查询,特摘录本文:https://evgenii.com/blog/spring-button-animation-on-android/ 

本教程说明如何使用Android Studio 2.3版在Android上对具有反弹效果的按钮进行动画处理。

1)添加按钮视图

我们首先在活动布局文件res / layout / activity_main.xml中放置一个按钮。

<?xml version="1.0"encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.evgenii.sixbouncingbuttons.MainActivity">

<Button

android:id="@+id/button"android:layout_width="92dp"

android:layout_height="92dp"

android:onClick="didTapButton"

android:background="#FFA400"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

2)创建比例动画

接下来,我们创建一个动画文件res / anim / bounce.xml来缩放视图。

右键单击res文件夹。

选择“ New/ Android resource file”

bounce作为文件名

选择“ Animation”资源类型。目录名字段将更改为anim

接下来,打开为您创建的res / anim / bounce.xml文件,并将其内容替换为以下代码。

<?xml version="1.0"encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

<scale

android:duration="2000"

android:fromXScale="0.3"

android:toXScale="1.0"

android:fromYScale="0.3"

android:toYScale="1.0"

android:pivotX="50%"

android:pivotY="50%"/>

</set>

此代码创建一个动画,该动画在两秒钟内将视图的大小从30%更改为100%。

3)对按钮点击做出反应

现在,我们添加了使点击按钮动画化的代码。将以下方法添加到您的活动Java文件中。

public void didTapButton(Viewview) {

Button button=(Button)findViewById(R.id.button);

final Animation myAnim=AnimationUtils.loadAnimation(this,R.anim.bounce);

button.startAnimation(myAnim);

}

如果您运行该应用程序并点击该按钮,它将从小到大平滑地进行动画处理。

4)实施反弹插补器

接下来,我们编写将弹跳效果添加到比例动画的代码。

在您的应用模块中创建一个新的Java类文件,并将其命名为MyBounceInterpolator

打开创建的Java文件,并用以下代码替换类代码。

class MyBounceInterpolator implementsandroid.view.animation.Interpolator{

privatedoublemAmplitude=1;

privatedoublemFrequency=10;

MyBounceInterpolator(doubleamplitude,doublefrequency) {

mAmplitude=amplitude;

mFrequency=frequency;

}

publicfloatgetInterpolation(floattime) {

return(float) (-1*Math.pow(Math.E,-time/mAmplitude)*Math.cos(mFrequency*time)+1);}}

我将在稍后解释该代码的工作方式。

5)使用反弹插值器

最后,再次打开您的活动Java文件,并用didTapButton以下代码替换整个方法。

public void didTapButton(Viewview) 

{Button button=(Button)findViewById(R.id.button);

final Animation myAnim=AnimationUtils.loadAnimation(this,R.anim.bounce);

// Use bounce interpolator with amplitude 0.2 and frequency 20

MyBounceInterpolator interpolator=newMyBounceInterpolator(0.2,20);

myAnim.setInterpolator(interpolator);button.startAnimation(myAnim);}

在这里,我们MyBounceInterpolator通过setInterpolator方法将添加到了动画中。如果运行该应用程序并点击按钮,它将以弹簧效果进行动画处理。

弹跳动画插值器如何工作

我们MyBounceInterpolator用两个参数初始化了对象。

MyBounceInterpolator interpolator=new MyBounceInterpolator(0.2,20);

第一个值0.2是反弹幅度。值越高,反弹越明显。

第二个值20是跳动的频率。较高的值会在动画时间段内产生更多的摆动。

为了达到弹跳效果,该getInterpolation方法使用以下函数来映射时间:

在此等式中,aw是振幅和频率值,t是时间。该方程式包含一个余弦函数,该函数会在动画过程中引起周期性的摆动。为了随时间减小幅度,我们将余弦乘以一个指数函数。下图显示了动画首先超过值1的超调,然后更接近它。

参考

演示Android应用程序的源代码

时间插值器功能的实时图形

亚历山大·科尔帕科夫(Alexander Kolpakov)制作的使用反弹插值器的开关控件

上一篇 下一篇

猜你喜欢

热点阅读