Android 常见插值器（Interpolator）

文章目录

1、简介
2、插值器的引用

1）在 xml 里面引用
2）在代码里引用

3、AccelerateDecelerateInterpolator 加速减速插值器
3、AccelerateInterpolator 加速插值器
4、DecelerateInterpolator 减速插值器
5、LinearInterpolator 线性插值器
6、AnticipateInterpolator 初始偏移插值器
7、OvershootInterpolator 结束偏移插值器
8、AnticipateOvershootInterpolator 初始结束偏移插值器
9、BounceInterpolator 弹跳插值器
10、CycleInterpolator 循环正弦插值器
11、LinearOutSlowInInterpolator 匀速减速插值器
12、FastOutSlowInInterpolator 加速减速插值器
13、FastOutLinearInInterpolator 加速匀速插值器

1、简介

Interpolator 叫插值器，也叫做加速器，用来指定动画如何变化的量。
系统常见的插值器有如下几种：

java类	说明
AccelerateDecelerateInterpolator	其变化开始和结束速率较慢，中间加速
AccelerateInterpolator	其变化开始速率较慢，后面加速
DecelerateInterpolator	其变化开始速率较快，后面减速
LinearInterpolator	其变化速率恒定
AnticipateInterpolator	沿着开始相反的方向先运行
OvershootInterpolator	结束后顺着结束的运行规律让然运行一段时间
AnticipateOvershootInterpolator	AnticipateInterpolator 和 OvershootInterpolator 的结合
BounceInterpolator	自由落体规律运动
CycleInterpolator	其速率为正弦曲线
LinearOutSlowInInterpolator	其变化先匀速再减速
FastOutSlowInInterpolator	其变化是先加速，然后减速
FastOutLinearInInterpolator	其变化先加速然后匀速，本质还是加速运动

2、插值器的引用

1）在 xml 里面引用

通过android:interpolator属性指定你想要的插值器，如：

<scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0"
        android:toYScale="0"
        **android:interpolator="@android:anim/accelerate_interpolator"/>**

2）在代码里引用

在代码中使用也超级简单，可以通过setInterpolator()方法，如：

animation.setInterpolator(new AccelerateInterpolator());

3、AccelerateDecelerateInterpolator 加速减速插值器

表示动画在开始结束的时候速率变化比较慢，在中间变化比较快。
我们依照平移为例：
在这里插入图片描述

主要代码结构如下：
在这里插入图片描述
xml 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
    android:orientation="vertical">


    <Button
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:id="@+id/bt_id"
        android:text="click"
        android:textSize="30dp"
        android:onClick="onClick"/>

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="50dp"
        android:id="@+id/img_id"
        android:background="@color/colorAccent"/>



</LinearLayout>

translate.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:toYDelta="500"
        android:duration="5000"/>
    <!--
        fromXDelta : 动画再X 轴方向的起始坐标
        toXDelta  ： 动画在X轴方向的结束坐标
        fromYDelta ： 动画在 Y 轴方向的起始坐标
        toYDelta ： 动画在Y轴方向的结束坐标
    -->

</set>

MainActivity 文件：

package myapplication.lum.com.myregion;

import android.media.Image;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (ImageView)findViewById(R.id.img_id);

    }

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new AccelerateDecelerateInterpolator()); //设置加速减速插值器
        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }
}

3、AccelerateInterpolator 加速插值器

就是动画的速率变化越来越快

稍微修改以上源码：

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        **translateAnim.setInterpolator(new AccelerateInterpolator()); //**设置动画加速插值器
           translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

4、DecelerateInterpolator 减速插值器

就是动画变化的速度越来越慢

示例：

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new DecelerateInterpolator()); //设置减速插值器
        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

5、LinearInterpolator 线性插值器

也就是动画变化的速率都是一样的，也叫匀速插值器

 public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new LinearInterpolator()); //设置线性插值器
        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

在这里插入图片描述

6、AnticipateInterpolator 初始偏移插值器

就是动画开始的时候，回向着动画相反的方向操作一段时间
比如设定向下滑，那开始它就向上滑，
设定减轻透明度，那开始它就增加透明度

示例：

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new AnticipateInterpolator()); //初始偏移插值器
        //  translateAnim.setInterpolator(new AnticipateInterpolator(4)); //初始偏移插值器 以及偏移等级 默认 为2  ，值越大 偏移越明显
        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

7、OvershootInterpolator 结束偏移插值器

动画结束时，延续动画运行一段时间，然后在回到结束位置

示例：

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new AnticipateInterpolator()); //结束偏移插值器
        //  translateAnim.setInterpolator(new AnticipateInterpolator(4)); //结束偏移插值器 以及偏移等级 默认 为2  ，值越大 偏移越明显
        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

8、AnticipateOvershootInterpolator 初始结束偏移插值器

就是初始偏移插值器和结束偏移插值器结束偏移插值器的结合。


    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new AnticipateOvershootInterpolator()); //设置初始结束偏移插值器
        //  translateAnim.setInterpolator(new AnticipateOvershootInterpolator(4)); //设置初始结束偏移插值器
        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

9、BounceInterpolator 弹跳插值器

就是模拟自由落体后的回弹动画

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new BounceInterpolator()); //设置弹跳插值器
        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

10、CycleInterpolator 循环正弦插值器

表示动画播放的速率就像正弦曲线那样，慢快慢···同时在正弦下方的速率会按照相反方向进行

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new CycleInterpolator(1)); //设置动画加速器

        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

11、LinearOutSlowInInterpolator 匀速减速插值器

先匀速运动后减速运动和Decelerate Interpolator类似

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new LinearOutSlowInInterpolator()); //设置匀速减速插值器

        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

12、FastOutSlowInInterpolator 加速减速插值器

先加速后减速的运动规律和AccelerateDecelerate Interpolator类似


    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new FastOutSlowInInterpolator()); //设置加速减速插值器

        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述

13、FastOutLinearInInterpolator 加速匀速插值器

其变化先加速然后匀速，本质还是加速运动，和Accelerate Interpolator类似

    public void onClick(View view) {
        Animation translateAnim = AnimationUtils.loadAnimation(this,R.anim.translate); //加载 动画
        translateAnim.setInterpolator(new FastOutLinearInInterpolator()); //设置加速匀速插值器

        translateAnim.setFillAfter(true);//设置 动画结束 停在结束位置
        imageView.startAnimation(translateAnim); //image 启动动画

    }

在这里插入图片描述