渗透理解Animation时间插值Interpolator类

========================================================

作者:qiujuer

博客:blog.csdn.net/qiujuer

网站:www.qiujuer.net

开源库:Genius-Android

转载请注明出处:http://blog.csdn.net/qiujuer/article/details/42430269

========================================================

  • 一个好的动画一定是用心做出来的,何为用心?其中一点我认为定义适当的 Interpolator 就是一种用心的表现;这点在 google material design 中尤为明显。
  • 一个好的动画一定要符合实际,一句老的话就是:石头下落一定要受重力才优雅,不然一颗石头像羽毛一样在风中还飘啊飘的那就不行了。

介绍

Interpolator 是个什么东西?

说到 Interpolator 啊,这个要从3年前说起,话说当年谷歌、诺基亚、Qiujuer 三分天下.... 哈哈,开个玩笑~

Interpolator 这个时间插值类,其主要使用在动画中,其作用主要是控制目标变量的变化值进行对应的变化。

你可以这么理解,现在小明去买酱油,规定时间是1个小时到达,里程是1公里;现在小明心里唯恐无法达到,所以先跑起来了,但因为体力消耗所以逐渐的慢下来了;然后成功到达。这样的一个过程中把小明逐渐慢下来的这个过程抽象出来也就是 Interpolator  的工作;当然 Interpolator 也可以控制小明先慢慢热身然后越跑越快最后达到。

这些都是 Interpolator 能完成的工作,同样 Interpolator 还能控制一个弹球掉在地上弹起来逐渐降低的过程,这些都是可以控制的。

Interpolator 的原理?

public interface Interpolator extends TimeInterpolator {
}

可以看见这个类其是是一个空的类,那么其操作在哪里?

/**
 * A time interpolator defines the rate of change of an animation. This allows animations
 * to have non-linear motion, such as acceleration and deceleration.
 */
public interface TimeInterpolator {

    /**
     * Maps a value representing the elapsed fraction of an animation to a value that represents
     * the interpolated fraction. This interpolated value is then multiplied by the change in
     * value of an animation to derive the animated value at the current elapsed animation time.
     *
     * @param input A value between 0 and 1.0 indicating our current point
     *        in the animation where 0 represents the start and 1.0 represents
     *        the end
     * @return The interpolation value. This value can be more than 1.0 for
     *         interpolators which overshoot their targets, or less than 0 for
     *         interpolators that undershoot their targets.
     */
    float getInterpolation(float input);
}

其操作在所继承的接口中,在所继承的接口中有一个方法 float getInterpolation(float input);

在这个方法中,传入的值是一个0.0~1.0的值,返回值可以小于0.0也可以大于1.0。

你可以这么理解:在Animation中时间是正常的走的,你设置了200ms,现在走到了100ms了,那么按照线性来说现在应该是走了一半的路程也就是0.5;现在就把这0.5传递给Interpolator 让 Interpolator 告诉我走到一半时间的时候此时小明在哪里;这也就是 Interpolator 的原理。

常用类

哎呀我的天天啊,访问不了谷歌就是麻烦,只能从源码截图了:

Android 官方提供的就是这么十种,是9种还是10种啊,没有数错吧。分别是:

  1. AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速
  2. AccelerateInterpolator  在动画开始的地方速率改变比较慢,然后开始加速
  3. AnticipateInterpolator 开始的时候向后然后向前甩
  4. AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
  5. BounceInterpolator   动画结束的时候弹起
  6. CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
  7. DecelerateInterpolator 在动画开始的地方快然后慢
  8. LinearInterpolator   以常量速率改变
  9. OvershootInterpolator    向前甩一定值后再回到原来位置
  10. PathInterpolator 这个是新增的我说原来怎么记得是9个,这个顾名思义就是可以定义路径坐标,然后可以按照路径坐标来跑动;注意其坐标并不是 XY,而是单方向,也就是我可以从0~1,然后弹回0.5 然后又弹到0.7 有到0.3,直到最后时间结束。(这个后面单独说说)

源码

这里说几个简单的源码

LinearInterpolator

@HasNativeInterpolator
public class LinearInterpolator implements Interpolator, NativeInterpolatorFactory {

    public LinearInterpolator() {
    }

    public LinearInterpolator(Context context, AttributeSet attrs) {
    }

    public float getInterpolation(float input) {
        return input;
    }

    /** @hide */
    @Override
    public long createNativeInterpolator() {
        return NativeInterpolatorFactoryHelper.createLinearInterpolator();
    }
}

最简单的一个由于是线性,所以直接返回。

DecelerateInterpolator

public class DecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {
    public DecelerateInterpolator() {
    }

    /**
     * Constructor
     *
     * @param factor Degree to which the animation should be eased. Setting factor to 1.0f produces
     *        an upside-down y=x^2 parabola. Increasing factor above 1.0f makes exaggerates the
     *        ease-out effect (i.e., it starts even faster and ends evens slower)
     */
    public DecelerateInterpolator(float factor) {
        mFactor = factor;
    }

    public DecelerateInterpolator(Context context, AttributeSet attrs) {
        this(context.getResources(), context.getTheme(), attrs);
    }

    /** @hide */
    public DecelerateInterpolator(Resources res, Theme theme, AttributeSet attrs) {
        TypedArray a;
        if (theme != null) {
            a = theme.obtainStyledAttributes(attrs, R.styleable.DecelerateInterpolator, 0, 0);
        } else {
            a = res.obtainAttributes(attrs, R.styleable.DecelerateInterpolator);
        }

        mFactor = a.getFloat(R.styleable.DecelerateInterpolator_factor, 1.0f);

        a.recycle();
    }

    public float getInterpolation(float input) {
        float result;
        if (mFactor == 1.0f) {
            result = (float)(1.0f - (1.0f - input) * (1.0f - input));
        } else {
            result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));
        }
        return result;
    }

    private float mFactor = 1.0f;

    /** @hide */
    @Override
    public long createNativeInterpolator() {
        return NativeInterpolatorFactoryHelper.createDecelerateInterpolator(mFactor);
    }
}

从其中可以看出,其并不是一个简单的类,其是是可以通过 XML 进行设置的类,通过 XML 可以设置其中的 mFactor 变量,其值默认是1.0;值越大其变化越快;得到的结果就是,开始的时候更加的快,其结果就是更加的慢,好比一个人开始跑的很快,但是换来的就是后面的路程将会花更多时间慢慢走。

在方法

    public float getInterpolation(float input) {
        float result;
        if (mFactor == 1.0f) {
            result = (float)(1.0f - (1.0f - input) * (1.0f - input));
        } else {
            result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));
        }
        return result;
    }

其描述的是一个初中学的抛物方程(话说是初中吧),y = x^2 我擦不知道怎么弄上去,就这样吧;意思懂就OK。

由于篇幅就说这么两个;下面说说其他东西。

动画表

这个图片相信前段时间看的不少吧?前段时间 material design 刚刚出来的时候好多人说这个啊,但是好像都是说图,但是没有说说其如何实现吧。

实现

这里送上福利,其是最开始我发现的是 C++ 的版本:

float Elastic::easeIn (float t,float b , float c, float d) {
 if (t==0) return b;  if ((t/=d)==1) return b+c;
 float p=d*.3f;
 float a=c;
 float s=p/4;
 float postFix =a*pow(2,10*(t-=1)); // this is a fix, again, with post-increment operators
 return -(postFix * sin((t*d-s)*(2*PI)/p )) + b;
}

float Elastic::easeOut(float t,float b , float c, float d) {
 if (t==0) return b;  if ((t/=d)==1) return b+c;
 float p=d*.3f;
 float a=c;
 float s=p/4;
 return (a*pow(2,-10*t) * sin( (t*d-s)*(2*PI)/p ) + c + b);
}

float Elastic::easeInOut(float t,float b , float c, float d) {
 if (t==0) return b;  if ((t/=d/2)==2) return b+c;
 float p=d*(.3f*1.5f);
 float a=c;
 float s=p/4;

 if (t < 1) {
 float postFix =a*pow(2,10*(t-=1)); // postIncrement is evil
 return -.5f*(postFix* sin( (t*d-s)*(2*PI)/p )) + b;
 }
 float postFix =  a*pow(2,-10*(t-=1)); // postIncrement is evil
 return postFix * sin( (t*d-s)*(2*PI)/p )*.5f + c + b;
}

参数的意思:

  • t – 动画中当前的时间
  • b – 开始值
  • c – 结束值
  • d – 动画的总时间

看看 Java 的 第一行前三个的:

public class Sine {

	public static float  easeIn(float t,float b , float c, float d) {
		return -c * (float)Math.cos(t/d * (Math.PI/2)) + c + b;
	}

	public static float  easeOut(float t,float b , float c, float d) {
		return c * (float)Math.sin(t/d * (Math.PI/2)) + b;
	}

	public static float  easeInOut(float t,float b , float c, float d) {
		return -c/2 * ((float)Math.cos(Math.PI*t/d) - 1) + b;
	}

}

虽然 Java 的也有了,但是话说这个怎么用啊,跟上面的Interpolator如何联系起来啊?

一个简单的方法:首先把 d 总时间设置为固定值 1.0 ,把 b 开始值设置为 0.0 把结束值设置为1.0,然后把 t 当作上面 Interpolator 中的 float getInterpolation(float input);传入值,此时不就能用上了?对不?

举个Case

/**
 * Created by Qiujuer on 2015/1/5.
 */
public class InSineInterpolator implements Interpolator{
    public static float  easeIn(float t,float b , float c, float d) {
        return -c * (float)Math.cos(t/d * (Math.PI/2)) + c + b;
    }

    @Override
    public float getInterpolation(float input) {
        return easeIn(input, 0, 1, 1);
    }
}

使用

        //AnimatorSet
        mAnimatorSet = new AnimatorSet();
        mAnimatorSet.playTogether(aPaintX, aPaintY, aRadius, aBackground);
        mAnimatorSet.setInterpolator(new InSineInterpolator());
        mAnimatorSet.start();

可以看出使用与上面 Android 自带的完全一样,当然这个只是一个 Case ,具体使用中你可以随意封装,前提是别改动了主要部分。

好了,完成了,擦又是三个小时过去了,我的 LOL 又没法打了。

最后送上福利,全部的实现类:

下载地址

Animation Interpolator.zip

愿大家都能做出自己满意的动画!

——学之开源,用于开源;初学者的心态,与君共勉!

========================================================

作者:qiujuer

博客:blog.csdn.net/qiujuer

网站:www.qiujuer.net

开源库:Genius-Android

转载请注明出处:http://blog.csdn.net/qiujuer/article/details/42430269

========================================================

时间: 2024-10-09 12:23:26

渗透理解Animation时间插值Interpolator类的相关文章

从源码角度理解android动画Interpolator类的使用

做过android动画的人对Interpolator应该不会陌生,这个类主要是用来控制android动画的执行速率,一般情况下,如果我们不设置,动画都不是匀速执行的,系统默认是先加速后减速这样一种动画执行速率. android通过Interpolator类来让我们自己控制动画的执行速率,还记得上一篇博客中我们使用属性动画实现的旋转效果吗?在不设置Interpolator的情况下,这个动画是先加速后减速,我们现在使用android系统提供的类LinearInterpolator来设置动画的执行速率

总结一下关于时间的一些类

今天下午,闲着没事,突然看到一些关于时间类的一些用法,感觉几个类有点复杂,就总结一下: (一些不对的地方还麻烦大家指出来,不要让我误导了初学者.谢谢) 具体的类主要有这几个: Date    Calendar    SimpleDateFormat 1.Date类 这个类中的大部分方法都过时了. 具体可以这么用: Date date = new Date(); System.out.println(date.toString()); 可以直接打印出当前的时间:Mon Jun 30 12:50:0

深刻理解Python中的元类

译注:这是一篇在Stack overflow上很热的帖子.提问者自称已经掌握了有关Python OOP编程中的各种概念,但始终觉得元类(metaclass)难以理解.他知道这肯定和自省有关,但仍然觉得不太明白,希望大家可以给出一些实际的例子和代码片段以帮助理解,以及在什么情况下需要进行元编程.于是e-satis同学给出了神一般的回复,该回复获得了985点的赞同点数,更有人评论说这段回复应该加入到Python的官方文档中去.而e-satis同学本人在Stack Overflow中的声望积分也高达6

深刻理解Python中的元类(metaclass)以及元类实现单例模式

深刻理解Python中的元类(metaclass)以及元类实现单例模式 在看一些框架源代码的过程中碰到很多元类的实例,看起来很吃力很晦涩:在看python cookbook中关于元类创建单例模式的那一节有些疑惑.因此花了几天时间研究下元类这个概念.通过学习元类,我对python的面向对象有了更加深入的了解.这里将一篇写的非常好的文章基本照搬过来吧,这是一篇在Stack overflow上很热的帖子,我看http://blog.jobbole.com/21351/这篇博客对其进行了翻译. 一.理解

1、自学——Linux的学习进度与任务【时间日期管理类的命令】

时间日期管理类的命令 时间日期管理类的命令:  # date :显示 # date MMDDhhmm[CC]YY.ss :设定 # date [+FORMAT] %Y:4位年份 %y:  2位年份 %M:  分 %m:月 %d:  日 %H:  时 %S:  秒 %T: 时间(以冒号隔开) %D:日期 %F: 日期(以横杆隔开) unix元年:1970-01-01 00:00:00 %s:timestamp:从unix元年开始到此刻所经历的秒数 # cal   :    显示日历 # cal #

Problem B: 时间和日期类(III)

Problem B: 时间和日期类(III) Time Limit: 4 Sec  Memory Limit: 128 MBSubmit: 2889  Solved: 1732[Submit][Status][Web Board] Description 设计一个日期时间类,用于读取输入的数据,按格式输出日期和时间. 设计日期时间类DateTime由2个成员组成,分别是一个Date类对象和一个Time类对象: 设计DateTime类需支持以下操作: DateTime::DateTime()无参构

《深入理解java虚拟机》:类的初始化

深入理解java虚拟机>:类的初始化 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载七个阶段.其中验证.准备.解析3个部分统称为连接.类加载的过程包括了加载.验证.准备.解析.初始化五个阶段. 加载.验证.准备.初始化和卸载这5个阶段的顺序时确定的,类的加载过程必须按照这种顺序按部就班的开始,而解析阶段则不一定,它在某些情况下可以在初始化阶段之后开始,这是为了支持Java语言的运行时绑定(也成为动态绑定或晚期绑定).另外注意这里的

时间格式转换类

 时间格式转换类 时间的字符串形式与毫秒形式相互转换的类. using System; namespace myspace { /// <summary> /// 指定若干常数,表示计时格式. /// </summary> public enum TimingFormat : byte { /// <summary> /// 毫秒. /// </summary> Ms, /// <summary> /// 秒 /// </summary

ActionScript 3.0日期与时间管理(Date类)

/*Flash中,Date类管理着日期和时间信息.要获取   当前日期,可以新建一个Date对象   */var now:Date =new Date();trace (now);     /*输出当前时间和日期,格式如:                  Sun Jul 27 19:45:57 GMT+0800 2014  */ /*以上代码中,Date对象中包括了当前的秒.分.小时.  星期数.日.月.年.时区等信息...如果仅需要返  回星期值和日期值,而不返回时间或时区,可以使用Date