文章目录
- 1、简介
- 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 启动动画
}