android 动画之插值器

最新推荐文章于 2024-11-09 17:06:34 发布

sun_star1chen

最新推荐文章于 2024-11-09 17:06:34 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签： animation 动画 Android 插值器

本文链接：https://blog.youkuaiyun.com/sun_star1chen/article/details/12843741

android 专栏收录该内容

58 篇文章

订阅专栏

本文介绍了插值器的概念及其在Android动画补间中的作用，详细解释了不同插值器的效果，并通过代码示例展示了如何在Android应用中定义和使用插值器来控制动画的流畅性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要了解为什么需要插值器，因为在补间动画中，我们一般只定义关键帧（首帧或尾帧），然后由系统自动生成中间帧，生成中间帧的这个过程可以成为“插值”。插值器的作用是告诉动画某个属性（比如颜色的渐变）如何随时间变化。下面是几种常见的插值器：

android 系统支持AccelerateDecelerateInterpolator 、 AccelerateInterpolator 、 AnticipateInterpolator 、AnticipateOverShootInterpolator 、 BounceInterpolator 、 CycleInterpolator 、DecelerateInerpolator 、 LinearInterpolator 、 OverShootInterpolator 共 9 种插值器（若这些插值器不能满足需求，则可以自定义插值器）。

下面写个示例看看如何在代码中定义插值器。

1、创建好工程后，在res/layout目录下创建文件 interpolator_layout.xml ，文件内容如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/acc_dec_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/acc_dec_str" />

        <Button
            android:id="@+id/acc_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/acc_str" />

        <Button
            android:id="@+id/anti_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/anti_str" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/anti_over_shoot_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/anti_over_shoot_str" />

        <Button
            android:id="@+id/bounce_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bounce_str" />

        <Button
            android:id="@+id/cycle_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cycle_str" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/dec_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/dec_str" />

        <Button
            android:id="@+id/linear_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/linear_str" />

        <Button
            android:id="@+id/over_shoot_btn"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/over_shoot_str" />
    </LinearLayout>

    <ImageView
        android:id="@+id/anim_show_img"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:src="@drawable/ting_frame_3"
        android:adjustViewBounds="true" />

</LinearLayout>

2、准备好我们的插值器，在包下面创建文件 nterpolatorUtils.java (定义了各种插值器的类) ，内容如下

import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.AnticipateOvershootInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.CycleInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;

public class InterpolatorUtils {

    public final static Interpolator ACC_DEC_INERPOLATOR = new AccelerateDecelerateInterpolator();
    public final static Interpolator ACC_INTERPOLATOR = new AccelerateInterpolator(
            10.0f);
    public final static Interpolator ANTI_INTERPOLATOR = new AnticipateInterpolator(
            10.0f);
    public final static Interpolator ANTI_OVER_SHOOT_INTERPOLATOR = new AnticipateOvershootInterpolator(
            10.0f);
    public final static Interpolator BOUNCE_INTEPOLATOR = new BounceInterpolator();
    public final static Interpolator CYCLE_INTERPOLATOR = new CycleInterpolator(
            5);
    public final static Interpolator DEC_INTERPOLATOR = new DecelerateInterpolator(
            10.0f);
    public final static Interpolator LINEAR_INTERPOLATOR = new LinearInterpolator();
    public final static Interpolator OVER_SHOOT_INTERPOLATOR = new OvershootInterpolator(
            10.0f);
}

3、创建显示动画的activity —— InterpolatorActivity.java ，内容如下：

import com.zt.xy.animation.utils.InterpolatorUtils;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class InterpolatorActivity extends Activity implements OnClickListener {
    private Button mAccDec;
    private Button mAcc;
    private Button mAnti;
    private Button mAtiOverShoot;
    private Button mBounce;
    private Button mCycle;
    private Button mDec;
    private Button mLinear;
    private Button mOverShoot;

    Animation mTransAnim;
    private ImageView mInterpolatorImg;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.interpolator_layout);
        init();
        mTransAnim = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
    }

    private void init() {
        mAccDec = (Button) findViewById(R.id.acc_dec_btn);
        mAccDec.setOnClickListener(this);

        mAcc = (Button) findViewById(R.id.acc_btn);
        mAcc.setOnClickListener(this);

        mAnti = (Button) findViewById(R.id.anti_btn);
        mAnti.setOnClickListener(this);

        mAtiOverShoot = (Button) findViewById(R.id.anti_over_shoot_btn);
        mAtiOverShoot.setOnClickListener(this);

        mBounce = (Button) findViewById(R.id.bounce_btn);
        mBounce.setOnClickListener(this);

        mCycle = (Button) findViewById(R.id.cycle_btn);
        mCycle.setOnClickListener(this);

        mDec = (Button) findViewById(R.id.dec_btn);
        mDec.setOnClickListener(this);

        mLinear = (Button) findViewById(R.id.linear_btn);
        mLinear.setOnClickListener(this);

        mOverShoot = (Button) findViewById(R.id.over_shoot_btn);
        mOverShoot.setOnClickListener(this);

        mInterpolatorImg = (ImageView) findViewById(R.id.anim_show_img);
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.acc_dec_btn:
            mTransAnim.setInterpolator(InterpolatorUtils.ACC_DEC_INERPOLATOR);
            break;
        case R.id.acc_btn:
            mTransAnim.setInterpolator(InterpolatorUtils.ACC_INTERPOLATOR);
            break;
        case R.id.anti_btn:
            mTransAnim.setInterpolator(InterpolatorUtils.ANTI_INTERPOLATOR);
            break;
        case R.id.anti_over_shoot_btn:
            mTransAnim
                    .setInterpolator(InterpolatorUtils.ANTI_OVER_SHOOT_INTERPOLATOR);
            break;
        case R.id.bounce_btn:
            mTransAnim.setInterpolator(InterpolatorUtils.BOUNCE_INTEPOLATOR);
            break;
        case R.id.cycle_btn:
            mTransAnim.setInterpolator(InterpolatorUtils.CYCLE_INTERPOLATOR);
            break;
        case R.id.dec_btn:
            mTransAnim.setInterpolator(InterpolatorUtils.DEC_INTERPOLATOR);
            break;
        case R.id.linear_btn:
            mTransAnim.setInterpolator(InterpolatorUtils.LINEAR_INTERPOLATOR);
            break;
        case R.id.over_shoot_btn:
            mTransAnim
                    .setInterpolator(InterpolatorUtils.OVER_SHOOT_INTERPOLATOR);
            break;
        }
        cancleAnim();
        startAnim();

    }

    private void cancleAnim() {
        if (mTransAnim != null) {
            mTransAnim.cancel();
        }
    }

    private void startAnim() {
        if (mTransAnim != null) {
            mInterpolatorImg.startAnimation(mTransAnim);
        }
    }
}

当然在能运行程序前先准备好一张名为anim_show_img的图片放到drawable文件夹中。

开始的时候仅仅是显示一张图片，点击不同按钮则添加不同的插值器到TranslateAnimation中，等等，貌似我们忘记定义translate_anim 动画文件了——亲，点我探探translate_anim.xml究竟。

在layout文件中使用了很多字符串，下面的字串做个参考（具体字串，朋友们自由发挥）

<string name="acc_dec_str">accelerateDecelerate</string>
    <string name="acc_str">accelerate</string>
    <string name="anti_str">anticipate</string>
    <string name="anti_over_shoot_str">anticipateOverShoot</string>
    <string name="bounce_str">bounce</string>
    <string name="cycle_str">cycle</string>
    <string name="dec_str">decelerate</string>
    <string name="linear_str">linear</string>
    <string name="over_shoot_str">overShoot</string>

ok，大功告成！有问题请留言，谢谢！