Android 动画学习五 插值器

2017-10-19  本文已影响9人  Lost_Robot
1.插值器的介绍

插值器只是一个概念,系统中与之相关的类叫做 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.

翻译: 该时间插值器定义了动画的变化率,允许动画做非线性的运动,比如加速、减速。

接口代码:

package android.animation;

/**
 * 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);

1. 方法参数 input 接收 0 和 1.0 之间的值表示动画的当前进度,是线性变化的,其中0表示开始,1.0表示结束;
2. 返回值表示对 input 进行插值之后的值,我们就是在这儿做“手脚”,让返回值不再是线性的,就完成自己定义动画的变化率了。

在使用动画的时候,默认是匀速变化的,在使用插值器后,可以先加速后减速,也可以先减速后加速...

2.插值器的作用

改变动画的变化率。

系统有很多插值器,开发者也可以自定义插值器:

3.插值器的使用

下面着重分析插值器 AccelerateDecelerateInterpolator,其是属性动画默认采用的插值器,我们看一下其内部 getInterpolation() 方法的实现:

/*
 * Copyright (C) 2007 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package android.view.animation;

import android.content.Context;
import android.util.AttributeSet;

import com.android.internal.view.animation.HasNativeInterpolator;
import com.android.internal.view.animation.NativeInterpolatorFactory;
import com.android.internal.view.animation.NativeInterpolatorFactoryHelper;

/**
 * An interpolator where the rate of change starts and ends slowly but
 * accelerates through the middle.
 */
@HasNativeInterpolator
public class AccelerateDecelerateInterpolator extends BaseInterpolator
        implements NativeInterpolatorFactory {
    public AccelerateDecelerateInterpolator() {
    }

    @SuppressWarnings({"UnusedDeclaration"})
    public AccelerateDecelerateInterpolator(Context context, AttributeSet attrs) {
    }

    //默认插值器的算法
    public float getInterpolation(float input) {
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
    }

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

输入:input,值即为fraction,从0~1
计算:cos((input+1) * Math.PI) 即表示cos(π)到cos(2π),该区间函数值范围为-11,再除以2,则为-0.50.5,最后再加上0.5
输出:范围0~1。

我们对比一下直接输出input和对input进行变换后输出的效果图:

属性动画4-先加速后减速

绿色线条表示直接输出,其表示随时间推移的匀速变化,而红色的曲线,是对input经过三角变换后的输出,分析其切线,能明显感觉出其先加速,在 input 为 0.5 处速度达到最大,而后减速的过程。

使用插值器:

valueAnimator.setInterpolator(new MyInterpolator());
4.自定义插值器

只是使用系统的插值器是满足不了大家日常的需求的,现在我们来自定义一个插值器:

public class MyInterpolator implements TimeInterpolator {
    @Override
    public float getInterpolation(float input) {
        if (input <= 0.5) {
            return (float) (Math.sin(Math.PI * input)) / 2;
        } else {
            return (float) (2 - Math.sin(Math.PI * input)) / 2;
        }
    }
}

该插值器变换后的图像:

MyInterpolator 图像

插值器的神器

上一篇 下一篇

猜你喜欢

热点阅读