Android动画介绍——插值器

一个学渣的自我救赎

已于 2024-05-02 12:04:13 修改

阅读量474

点赞数 4

分类专栏： Android App Android 动画文章标签： android

于 2024-05-01 17:41:05 首次发布

本文链接：https://blog.csdn.net/liuning1985622/article/details/138376579

版权

Android App 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

Android 动画

8 篇文章 0 订阅

订阅专栏

本文详细介绍了Android开发中使用的插值器（Interpolator），包括线性插值器、加速插值器、减速插值器、加速减速插值器等，以及它们在动画中的作用和示例代码。通过实例演示，帮助开发者理解插值器如何影响动画的变化速度和路径。

摘要由CSDN通过智能技术生成

本章介绍之前用来的一个东西，Interpolator，翻译成中文为插值器。

通俗易懂的说，Interpolator负责控制动画变化的速率，即确定了动画效果变化的模式，使得基本的动画效果能够以匀速、加速、减速、抛物线速率等各种速率变化。当然我们也可以自己实现Interpolator 接口，自行来控制动画的变化速度，而Android中已经为我们提供了几个可供选择的实现类：

差值器		描述
LinearInterpolator	线性插值器	动画以均匀的速度改变
AccelerateInterpolator	加速插值器	在动画开始的地方改变速度较慢，然后开始加速
DecelerateInterpolator	减速插值器	在动画开始的地方改变速度较快，然后开始减速
AccelerateDecelerateInterpolator	加速减速插值器	在动画开始、结束的地方改变速度较慢，中间时加速
AnticipateInterpolator	预期插值器	反向，先向相反方向改变一段再加速播放
OvershottInterpolator	过冲插值器	回弹，最后超出目的值然后缓慢改变到目的值
AnticipateOvershootInterpolator	预期过冲插值器	开始的时候向后然后向前甩一定值后返回最后的值
CycleInterpolator	循环插值器	动画循环播放特定次数，变化速度按正弦曲线改变
BounceInterpolator	弹跳插值器	跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100

动画是开发者给定开始和结束的“关键帧”，其变化的“中间帧”是有系统计算决定然后播放出来。因此，动画的每一帧都将在开始和结束之间的特定时间显示。此时动画时间被转换为时间索引，则动画时间轴上的每个点都可以转换成0.0到1.0之间的一个浮点数。然后再将该值用于计算该对象的属性变换。在变换的情况下，y轴上，0.0对应于起始位置，1.0对应于结束位置，0.5对应于起始和结束之间的中间，对于一些插值器其值还可以是0~1之外的数值。

比如：对于LinearInterpolator（线性插值器）的平移动画来讲，在0.3这个时间点视图则刚好移动了整个动画的30%。

Interpolator 本质上是一个数学函数，其取数字在0.0和1.0之间，并将其转换为另一个数字。Interpolator既可以用在补间动画上也可以用在属性动画上。

以上还是不是很好理解，下面我们敲个Domo就理解了。

如下为布局文件：

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


tools:context=".MainActivity">


    <Button
        android:id="@+id/button_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Start"
        android:textSize="12dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LinearInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv1"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AccelerateInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv2"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DecelerateInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv3"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AccelerateDecelerateInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv4"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AnticipateInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv5"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OvershootInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv6"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AnticipateOvershootInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv7"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CycleInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv8"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BounceInterpolator"
        android:textSize="12dp"/>


    <ImageView
        android:id="@+id/iv9"
        android:src="@drawable/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="25dp"
        android:maxWidth="25dp"/>


</LinearLayout>

如下为Activity文件：

package com.example.interpolatordomo;


import androidx.appcompat.app.AppCompatActivity;


import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
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.LinearInterpolator;
import android.view.animation.OvershootInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        Button button = (Button) findViewById(R.id.button_start);
        ImageView imageView1 = (ImageView)findViewById(R.id.iv1);
        ImageView imageView2 = (ImageView)findViewById(R.id.iv2);
        ImageView imageView3 = (ImageView)findViewById(R.id.iv3);
        ImageView imageView4 = (ImageView)findViewById(R.id.iv4);
        ImageView imageView5 = (ImageView)findViewById(R.id.iv5);
        ImageView imageView6 = (ImageView)findViewById(R.id.iv6);
        ImageView imageView7 = (ImageView)findViewById(R.id.iv7);
        ImageView imageView8 = (ImageView)findViewById(R.id.iv8);
        ImageView imageView9 = (ImageView)findViewById(R.id.iv9);


        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TranslateAnimation translateAnimation1 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation1.setDuration(2000);
                translateAnimation1.setInterpolator(new LinearInterpolator());  /*线性插值器*/
                imageView1.startAnimation(translateAnimation1);


                TranslateAnimation translateAnimation2 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation2.setDuration(2000);
                translateAnimation2.setInterpolator(new AccelerateInterpolator());  /*加速插值器*/
                imageView2.startAnimation(translateAnimation2);


                TranslateAnimation translateAnimation3 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation3.setDuration(2000);
                translateAnimation3.setInterpolator(new DecelerateInterpolator());  /*减速插值器*/
                imageView3.startAnimation(translateAnimation3);


                TranslateAnimation translateAnimation4 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation4.setDuration(2000);
                translateAnimation4.setInterpolator(new AccelerateDecelerateInterpolator());  /*加速减速插值器*/
                imageView4.startAnimation(translateAnimation4);


                TranslateAnimation translateAnimation5 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation5.setDuration(2000);
                translateAnimation5.setInterpolator(new AnticipateInterpolator());  /*预期插值器*/
                imageView5.startAnimation(translateAnimation5);


                TranslateAnimation translateAnimation6 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation6.setDuration(2000);
                translateAnimation6.setInterpolator(new OvershootInterpolator());  /*过冲插值器*/
                imageView6.startAnimation(translateAnimation6);


                TranslateAnimation translateAnimation7 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation7.setDuration(2000);
                translateAnimation7.setInterpolator(new AnticipateOvershootInterpolator());  /*预期过冲插值器*/
                imageView7.startAnimation(translateAnimation7);


                TranslateAnimation translateAnimation8 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation8.setDuration(2000);
                translateAnimation8.setInterpolator(new CycleInterpolator(1));  /*循环插值器*/
                imageView8.startAnimation(translateAnimation8);


                TranslateAnimation translateAnimation9 = new TranslateAnimation(
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0.8f,
                        Animation.ABSOLUTE,0, Animation.RELATIVE_TO_PARENT,0);
                translateAnimation9.setDuration(2000);
                translateAnimation9.setInterpolator(new BounceInterpolator());  /*弹跳插值器*/
                imageView9.startAnimation(translateAnimation9);
            }
        });
    }
}

程序跑起来点击Start会看到各个小球的运动规矩。

Domo代码：

Android动画介绍-插值器资源-CSDN文库

一个学渣的自我救赎

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Android动画介绍——插值器

此时动画时间被转换为时间索引，则动画时间轴上的每个点都可以转换成0.0到1.0之间的一个浮点数。在变换的情况下，y轴上，0.0对应于起始位置，1.0对应于结束位置，0.5对应于起始和结束之间的中间，对于一些插值器其值还可以是0~1之外的数值。通俗易懂的说，Interpolator负责控制动画变化的速率，即确定了动画效果变化的模式，使得基本的动画效果能够以匀速、加速、减速、抛物线速率等各种速率变化。跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100。
复制链接

扫一扫