在Android上创建气泡按钮动画
为整理动画相关文章,方便日后查询,特摘录本文:https://evgenii.com/blog/spring-button-animation-on-android/
![](https://img.haomeiwen.com/i3314217/1c1b3b2f2221a64b.gif)
本教程说明如何使用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”。
![](https://img.haomeiwen.com/i3314217/0c89d27700a82914.png)
写bounce作为文件名
选择“ Animation”资源类型。目录名字段将更改为anim。
![](https://img.haomeiwen.com/i3314217/b51e2ec63aed1917.png)
接下来,打开为您创建的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);
}
如果您运行该应用程序并点击该按钮,它将从小到大平滑地进行动画处理。
![](https://img.haomeiwen.com/i3314217/026303d1ef568a4f.gif)
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方法将添加到了动画中。如果运行该应用程序并点击按钮,它将以弹簧效果进行动画处理。
![](https://img.haomeiwen.com/i3314217/4a6c8732d8ab6511.gif)
弹跳动画插值器如何工作
我们MyBounceInterpolator用两个参数初始化了对象。
MyBounceInterpolator interpolator=new MyBounceInterpolator(0.2,20);
第一个值0.2是反弹幅度。值越高,反弹越明显。
第二个值20是跳动的频率。较高的值会在动画时间段内产生更多的摆动。
为了达到弹跳效果,该getInterpolation方法使用以下函数来映射时间:
![](https://img.haomeiwen.com/i3314217/0bd934d3613d688f.png)
在此等式中,a和w是振幅和频率值,t是时间。该方程式包含一个余弦函数,该函数会在动画过程中引起周期性的摆动。为了随时间减小幅度,我们将余弦乘以一个指数函数。下图显示了动画首先超过值1的超调,然后更接近它。
![](https://img.haomeiwen.com/i3314217/18c92c87a8633825.png)
参考