插值器

在上面我们所认识到得到动画中,最常见的就是插值器。我们可以为动画添加适当的插值器,让其有不同的变化。

作用

他可以根据时间流逝的百分比来计算出当前属性的百分比。

流逝时间比每次都是固定增长的,那么要怎么才能实现不同的速率效果呢?这个解决办法就是使用使用我们所介绍的插值器。根据我们输入的值,可以经过自己的变换,最终输出一个不同的值,从而达到速率变换的效果。

系统预置的插值器有:

DecelerateInterpolator 减速,开始时快然后减速

AccelerateDecelerateInterolator 先加速后减速,开始结束时慢,中间加速

AnticipateInterpolator 反向,先向相反方向改变一段再加速播放

AnticipateOvershootInterpolator 反向加超越,先向相反方向改变,再加速播放,会超出目的值然后缓慢移动至目的值

BounceInterpolator 跳跃,快到目的值时值会跳跃,如目的值100,后面的值可能依次为85,77,70,80,90,100

CycleIinterpolator 循环,动画循环一定次数,值的改变为一正弦函数:Math.sin(2* mCycles* Math.PI* input)

LinearInterpolator 线性,线性均匀改变

OvershootInterpolator超越,最后超出目的值然后缓慢改变到目的值

单是看这些文字是有点抽象,插值器的作用就如同下图所示(X是所行走的总距离):

第一幅

第二幅

从第一幅图中我们可以从X的行走的距离和时间来看,那是一个典型的匀速动画,而第二幅图,在相同的时间间隔中,X的距离不再是固定了,而是变化越来越大,最后形成了一个加速的动画效果。

而在Android的动画效果中,实现这一点的就是使用了插值器。

TypeEveluator

当然,类型插值器不会自己把这些事情做完,而做完这些事情,就需要用到 TypeEveluator ,也就是类型估值器。他的作用就是根据当前改变的百分比来改变后的属性值,也就是说TypeEvaluaton算到的才是属性的值。时间插值器计算得到当前时间点的时间流逝百分比,TypeEvaluator根据这个百分比、属性起始值、目标值来计算出当前时刻该属性的值,最后这个值被设置给View,不断地重复这个过程就形成了动画。

系统预置的有整型属性(IntEvaluator)、浮点型属性(FloatEvaluator)和Color属性(ArgbEvaluato)

从代码中查找时间插值器

要找到插值器,肯定就要从动画中入手。

ImageView ivTweenCode = (ImageView) findViewById(R.id.iv_tween_code);
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
alphaAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
alphaAnimation.setDuration(1000);
alphaAnimation.setRepeatMode(Animation.REVERSE);
alphaAnimation.setRepeatCount(-1);
ivTweenCode.startAnimation(alphaAnimation);

上面的代码中是为一个View设置了一个 透明度变化的动画 , 最后调用了 startAnimation 来启动动画。这时View的动画就启动了。

View # startAnimation

public void startAnimation(Animation animation) {
    animation.setStartTime(Animation.START_ON_FIRST_FRAME);
    setAnimation(animation);
    invalidateParentCaches();
    invalidate(true);
}

在 startAnimation 中主要做了以下几个操作:

  1. 初始化动画开始时间
  2. 对View设置动画
  3. 刷新父类缓存
  4. 刷新View本身及子View

动画的实现其实就是不断对现有的视图不断的重绘。 在startAnimation中最后在向ViewGroup请求刷新视图,随后
ViewGroup就会调用dispatchDraw方法对这个View所在的区域进行重绘。对于View的重绘,最终就是调用View的draw。

View # draw

boolean draw(Canvas canvas, ViewGroup parent, long drawingTime) {
    ....        
    boolean more = false;
    ....
    //获取动画信息
    final Animation a = getAnimation();
    if (a != null) {
        //绘制动画
        more = applyLegacyAnimation(parent, drawingTime, a, scalingRequired);
        ....
    } else {
        ....
    }
}

在draw方法内部,会获取View的动画的信息,如果设置了动画,就会调用applyLegacyAnimation来绘制动画。

View # applyLegacyAnimation

private boolean applyLegacyAnimation(ViewGroup parent, long drawingTime,
        Animation a, boolean scalingRequired) {
    Transformation invalidationTransform;
    final int flags = parent.mGroupFlags;
    //判断动画是否已经初始化
    final boolean initialized = a.isInitialized();
    if (!initialized) {
        ....
        //如果设置了动画的监听,则触发对应的回调
        onAnimationStart();
    }
        
    ....
    //通过        getTransformation 来 获取动画的相关值
    boolean more = a.getTransformation(drawingTime, t, 1f);
    ....

    if (more) {
        //判断当前动画类型是否需要进行调整位置大小,然后刷新不同的区域
        if (!a.willChangeBounds()) {
            ....
        } else {
            ...
            //获取重绘的区域
            a.getInvalidateRegion(0, 0, mRight - mLeft, mBottom - mTop, region,
                    invalidationTransform);
            parent.mPrivateFlags |= PFLAG_DRAW_ANIMATION;
            //重新计算有效区域
            final int left = mLeft + (int) region.left;
            final int top = mTop + (int) region.top;
            //更新这块区域                
            parent.invalidate(left, top, left + (int) (region.width() + .5f),
                    top + (int) (region.height() + .5f));
        }
    }
    return more;
}

在这个方法的内部主要是对动画初始化、动画操作、界面刷新。

动画的具体实现是通过Animation中的 getTransformation 方法。

Animation # getTransformation

public boolean getTransformation(long currentTime, Transformation outTransformation,
    float scale) {
    mScaleFactor = scale;
    return getTransformation(currentTime, outTransformation);
}

在这个方法的内部,最后就是调用了 getTransformation(long currentTime, Transformation outTransformation) 来计算和应用动画效果。

Animation # getTransformation

public boolean getTransformation(long currentTime, Transformation outTransformation) {
    .....
    float normalizedTime;
    //计算当前时间的流逝百分比
    if (duration != 0) {
        normalizedTime = ((float) (currentTime - (mStartTime + startOffset))) /
                (float) duration;
    } else {
        // time is a step-change with a zero duration
        normalizedTime = currentTime < mStartTime ? 0.0f : 1.0f;
    }
    //动画是否已经完成
    final boolean expired = normalizedTime >= 1.0f || isCanceled();
    ....
    if ((normalizedTime >= 0.0f || mFillBefore) && (normalizedTime <= 1.0f || mFillAfter)) {
        ....            
        // 通过插值器获取动画的执行的百分比
        final float interpolatedTime = mInterpolator.getInterpolation(normalizedTime);
        //应用动画效果
        applyTransformation(interpolatedTime, outTransformation);
    }

    ....
    
}

在上面的方法中主要的关键就是会获取获取已流逝动画执行的百分比,然后再通过插值器来重新计算这个百分比,也就是调用了插值器的getInterpolation方法来获取当前时间的百分比,并且以此来计算当前动画的属性值。

下面我们来看看几个插值器吧

LinearInterpolator

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

LinearInterpolator这个插值器并没有使动画的速率发生改变。

AccelerateInterpolator

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

AccelerateInterpolator是加速插值器, 会随时间的推移,变化范围就会越大。

在调用了getInterpolation之后,会继续调用动画类的applyTransformation方法来将属性应用到对应的对象中。

在 类 Animation中 applyTransformation 其实就是一个空实现

Animation # applyTransformation

protected void applyTransformation(float interpolatedTime, Transformation t) {
}

而因为我们一开始设置的是透明度动画,所以由 AlphaAnimation 中看一下applyTransformation。

AlphaAnimation # applyTransformation

 @Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
    //通过了Matrix实现View的透明度变化
    final float alpha = mFromAlpha;
    t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime));
}

当执行完applyTransformation之后,View的属性就会发生变化,只要动画没有结束,那么这个过程会不断的重复,动画也就产生了。

Animation # setInterpolator

//为动画设置 插值器
public void setInterpolator(Interpolator i) {
    mInterpolator = i;
}   

在上面的代码中,插值器扮演了一个很重要的角色。我们可以为动画设置不同的插值器。不同的插值器通过一个统一的接口 getInterpolation(float input) 来修改动画的流逝时间百分比。最终可以形成不同的动态效果,而无需修改Animation中的代码。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容