Android中的Interpolator

亦凉 2022-08-02 13:44 140阅读 0赞

> 首先介绍一个网站 [https://www.desmos.com][https_www.desmos.com]，这是一个通过函数来生成函数图像的网站，使用起来很灵活，可以 同时添加多个函数图像，分别指定他们的定义域。感谢道哥分享！

# 系统提供的Interpolator #

## LinearInterpolator 线性插值器 ##

![这里写图片描述][20150722001839478]  
![这里写图片描述][linear_settings.png]

public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
        
    
        public LinearInterpolator() {
        }
    
        public LinearInterpolator(Context context, AttributeSet attrs) {
        }
    
        public float getInterpolation(float input) {
            return input;
        }
    
        /** @hide */
        @Override
        public long createNativeInterpolator() {
            return NativeInterpolatorFactoryHelper.createLinearInterpolator();
        }
    }

## AccelerateInterpolator 加速插值器 ##

![这里写图片描述][20150722000557925]  
![这里写图片描述][accelerate_settings.png]  
源代码：

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();
        }
    }

## 减速DecelerateInterpolator ##

![这里写图片描述][20150722001105691]  
![这里写图片描述][decelerate_settings.png]  
源码：

/**
     * An interpolator where the rate of change starts out quickly and
     * and then decelerates.
     *
     */
    @HasNativeInterpolator
    public class DecelerateInterpolator extends BaseInterpolator implements 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);
            setChangingConfiguration(a.getChangingConfigurations());
            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);
        }
    }

## AccelerateDecelerateInterpolator 加速减速插值器 ##

![这里写图片描述][20150722001638975]  
![这里写图片描述][accelerate_decelerate_settings.png]  
源码：

@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();
        }
    }

--------------------

## BounceInterpolator 弹跳插值器 ##

![这里写图片描述][20150722004214712]  
![这里写图片描述][bounce_settings.png]

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 change bounces at the end.
     */
    @HasNativeInterpolator
    public class BounceInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
        
        public BounceInterpolator() {
        }
    
        @SuppressWarnings({
       "UnusedDeclaration"})
        public BounceInterpolator(Context context, AttributeSet attrs) {
        }
    
        private static float bounce(float t) {
            return t * t * 8.0f;
        }
    
        public float getInterpolation(float t) {
            // _b(t) = t * t * 8
            // bs(t) = _b(t) for t < 0.3535
            // bs(t) = _b(t - 0.54719) + 0.7 for t < 0.7408
            // bs(t) = _b(t - 0.8526) + 0.9 for t < 0.9644
            // bs(t) = _b(t - 1.0435) + 0.95 for t <= 1.0
            // b(t) = bs(t * 1.1226)
            t *= 1.1226f;
            if (t < 0.3535f) return bounce(t);
            else if (t < 0.7408f) return bounce(t - 0.54719f) + 0.7f;
            else if (t < 0.9644f) return bounce(t - 0.8526f) + 0.9f;
            else return bounce(t - 1.0435f) + 0.95f;
        }
    
        /** @hide */
        @Override
        public long createNativeInterpolator() {
            return NativeInterpolatorFactoryHelper.createBounceInterpolator();
        }
    }

--------------------

## AnticipateInterpolator 回荡秋千插值器 ##

![这里写图片描述][20150722002030894]  
![这里写图片描述][anticipate_settings.png]

public class AnticipateInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
        
        private final float mTension;
    
        public AnticipateInterpolator() {
            mTension = 2.0f;
        }
    
        /**
         * @param tension Amount of anticipation. When tension equals 0.0f, there is
         *                no anticipation and the interpolator becomes a simple
         *                acceleration interpolator.
         */
        public AnticipateInterpolator(float tension) {
            mTension = tension;
        }
    
        public AnticipateInterpolator(Context context, AttributeSet attrs) {
            this(context.getResources(), context.getTheme(), attrs);
        }
    
        /** @hide */
        public AnticipateInterpolator(Resources res, Theme theme, AttributeSet attrs) {
            TypedArray a;
            if (theme != null) {
                a = theme.obtainStyledAttributes(attrs, R.styleable.AnticipateInterpolator, 0, 0);
            } else {
                a = res.obtainAttributes(attrs, R.styleable.AnticipateInterpolator);
            }
    
            mTension = a.getFloat(R.styleable.AnticipateInterpolator_tension, 2.0f);
            setChangingConfiguration(a.getChangingConfigurations());
            a.recycle();
        }
    
        public float getInterpolation(float t) {
            // a(t) = t * t * ((tension + 1) * t - tension)
            return t * t * ((mTension + 1) * t - mTension);
        }
    
        /** @hide */
        @Override
        public long createNativeInterpolator() {
            return NativeInterpolatorFactoryHelper.createAnticipateInterpolator(mTension);
        }
    }

--------------------

## AnticipateOvershootInterpolator ##

![这里写图片描述][20150722004047492]  
![anticipate_overshoot_settings.png][]

/**
     * An interpolator where the change starts backward then flings forward and overshoots
     * the target value and finally goes back to the final value.
     */
    @HasNativeInterpolator
    public class AnticipateOvershootInterpolator extends BaseInterpolator
            implements NativeInterpolatorFactory {
        
        private final float mTension;
    
        public AnticipateOvershootInterpolator() {
            mTension = 2.0f * 1.5f;
        }
    
        /**
         * @param tension Amount of anticipation/overshoot. When tension equals 0.0f,
         *                there is no anticipation/overshoot and the interpolator becomes
         *                a simple acceleration/deceleration interpolator.
         */
        public AnticipateOvershootInterpolator(float tension) {
            mTension = tension * 1.5f;
        }
    
        /**
         * @param tension Amount of anticipation/overshoot. When tension equals 0.0f,
         *                there is no anticipation/overshoot and the interpolator becomes
         *                a simple acceleration/deceleration interpolator.
         * @param extraTension Amount by which to multiply the tension. For instance,
         *                     to get the same overshoot as an OvershootInterpolator with
         *                     a tension of 2.0f, you would use an extraTension of 1.5f.
         */
        public AnticipateOvershootInterpolator(float tension, float extraTension) {
            mTension = tension * extraTension;
        }
    
        public AnticipateOvershootInterpolator(Context context, AttributeSet attrs) {
            this(context.getResources(), context.getTheme(), attrs);
        }
    
        /** @hide */
        public AnticipateOvershootInterpolator(Resources res, Theme theme, AttributeSet attrs) {
            TypedArray a;
            if (theme != null) {
                a = theme.obtainStyledAttributes(attrs, AnticipateOvershootInterpolator, 0, 0);
            } else {
                a = res.obtainAttributes(attrs, AnticipateOvershootInterpolator);
            }
    
            mTension = a.getFloat(AnticipateOvershootInterpolator_tension, 2.0f) *
                    a.getFloat(AnticipateOvershootInterpolator_extraTension, 1.5f);
            setChangingConfiguration(a.getChangingConfigurations());
            a.recycle();
        }
    
        private static float a(float t, float s) {
            return t * t * ((s + 1) * t - s);
        }
    
        private static float o(float t, float s) {
            return t * t * ((s + 1) * t + s);
        }
    
        public float getInterpolation(float t) {
            // a(t, s) = t * t * ((s + 1) * t - s)
            // o(t, s) = t * t * ((s + 1) * t + s)
            // f(t) = 0.5 * a(t * 2, tension * extraTension), when t < 0.5
            // f(t) = 0.5 * (o(t * 2 - 2, tension * extraTension) + 2), when t <= 1.0
            if (t < 0.5f) return 0.5f * a(t * 2.0f, mTension);
            else return 0.5f * (o(t * 2.0f - 2.0f, mTension) + 2.0f);
        }
    
        /** @hide */
        @Override
        public long createNativeInterpolator() {
            return NativeInterpolatorFactoryHelper.createAnticipateOvershootInterpolator(mTension);
        }
    }

--------------------

## CycleInterpolator 正弦周期变化插值器 ##

![这里写图片描述][20150722004311238]  
![cycle_settings.png][]

@HasNativeInterpolator
    public class CycleInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
        
        public CycleInterpolator(float cycles) {
            mCycles = cycles;
        }
    
        public CycleInterpolator(Context context, AttributeSet attrs) {
            this(context.getResources(), context.getTheme(), attrs);
        }
    
        /** @hide */
        public CycleInterpolator(Resources resources, Theme theme, AttributeSet attrs) {
            TypedArray a;
            if (theme != null) {
                a = theme.obtainStyledAttributes(attrs, R.styleable.CycleInterpolator, 0, 0);
            } else {
                a = resources.obtainAttributes(attrs, R.styleable.CycleInterpolator);
            }
    
            mCycles = a.getFloat(R.styleable.CycleInterpolator_cycles, 1.0f);
            setChangingConfiguration(a.getChangingConfigurations());
            a.recycle();
        }
    
        public float getInterpolation(float input) {
            return (float)(Math.sin(2 * mCycles * Math.PI * input));
        }
    
        private float mCycles;
    
        /** @hide */
        @Override
        public long createNativeInterpolator() {
            return NativeInterpolatorFactoryHelper.createCycleInterpolator(mCycles);
        }
    }

--------------------

## OvershootInterpolator ##

![这里写图片描述][20150722002152522]  
![这里写图片描述][overshoot_settings.png]

/**
     * An interpolator where the change flings forward and overshoots the last value
     * then comes back.
     */
    @HasNativeInterpolator
    public class OvershootInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
        
        private final float mTension;
    
        public OvershootInterpolator() {
            mTension = 2.0f;
        }
    
        /**
         * @param tension Amount of overshoot. When tension equals 0.0f, there is
         *                no overshoot and the interpolator becomes a simple
         *                deceleration interpolator.
         */
        public OvershootInterpolator(float tension) {
            mTension = tension;
        }
    
        public OvershootInterpolator(Context context, AttributeSet attrs) {
            this(context.getResources(), context.getTheme(), attrs);
        }
    
        /** @hide */
        public OvershootInterpolator(Resources res, Theme theme, AttributeSet attrs) {
            TypedArray a;
            if (theme != null) {
                a = theme.obtainStyledAttributes(attrs, R.styleable.OvershootInterpolator, 0, 0);
            } else {
                a = res.obtainAttributes(attrs, R.styleable.OvershootInterpolator);
            }
    
            mTension = a.getFloat(R.styleable.OvershootInterpolator_tension, 2.0f);
            setChangingConfiguration(a.getChangingConfigurations());
            a.recycle();
        }
    
        public float getInterpolation(float t) {
            // _o(t) = t * t * ((tension + 1) * t + tension)
            // o(t) = _o(t - 1) + 1
            t -= 1.0f;
            return t * t * ((mTension + 1) * t + mTension) + 1.0f;
        }
    
        /** @hide */
        @Override
        public long createNativeInterpolator() {
            return NativeInterpolatorFactoryHelper.createOvershootInterpolator(mTension);
        }
    }

--------------------

# 自定义Interpolator #

Interpolator源码：

package android.view.animation;
    
    import android.animation.TimeInterpolator;
    
    /**
     * An interpolator defines the rate of change of an animation. This allows
     * the basic animation effects (alpha, scale, translate, rotate) to be 
     * accelerated, decelerated, repeated, etc.
     */
    public interface Interpolator extends TimeInterpolator {
        
        // A new interface, TimeInterpolator, was introduced for the new android.animation
        // package. This older Interpolator interface extends TimeInterpolator so that users of
        // the new Animator-based animations can use either the old Interpolator implementations or
        // new classes that implement TimeInterpolator directly.
    }

我们来写自己的类来实现该接口

import android.view.animation.Interpolator;
    public class MyInterpolator implements Interpolator {
        
        private float mFactor;
        private int i;
        public MyInterpolator(int i){
            this.i = i;
        }
        @Override
        public float getInterpolation(float input) { //定义我们的函数，input: 0 ~ 1
            switch(i){
                case 1:mFactor = input;
                    break;
                case 2:mFactor = input*input*input;
                    break;
            }
            return mFactor;
        }
    }

来个复杂的：

用desmos画一个：  
![这里写图片描述][20150722003201447]

![这里写图片描述][20150722003043764]

@Override
    public float getInterpolation(float t) { //定义我们的函数，t: 0 ~ 1
        if(t<0.2094) return (float)(-34*(t-0.18)*(t-0.18)+1.08);
        else if(t <0.404) return (float)(5.9*(t-0.34)*(t-0.34)+0.95);
        else if(t < 0.6045) return (float)(-3*(t-0.53)*(t-0.53)+1.02);
        else if(t < 0.8064) return (float)((t-0.72)*(t-0.72)+0.99);
        else return (float)(-0.3*(t-0.915)*(t-0.915)+1.001);
        return mFactor;
    }

[https_www.desmos.com]: https://www.desmos.com
[20150722001839478]: /images/20220731/920c1365d8f14d109151ee00f2627736.png
[linear_settings.png]: /images/20220731/91a48af5ee884b1ba97617caed5d643f.png
[20150722000557925]: /images/20220731/965805f091c540a5a6bc8ed9a3ce8d2a.png
[accelerate_settings.png]: /images/20220731/8f7f49628e504490add25e7dd8ce7b43.png
[20150722001105691]: /images/20220731/a39f96d41e8949db8aee98bf1cc71158.png
[decelerate_settings.png]: /images/20220731/b427e046f5c7447c87129ae6b77624db.png
[20150722001638975]: /images/20220731/dde9e8c82d9a4e5481e2b9b9677fbeab.png
[accelerate_decelerate_settings.png]: /images/20220731/ae23ccd1db4144afb5206c13efb3b30c.png
[20150722004214712]: /images/20220731/ea571f99bb0641f5980f015e72dfd4bc.png
[bounce_settings.png]: /images/20220731/6bf92182628a4b138bad9837567f5cfe.png
[20150722002030894]: /images/20220731/93517cbb21c649f39f694af217da8128.png
[anticipate_settings.png]: /images/20220731/6694977f489141a5baf194dc7e690695.png
[20150722004047492]: /images/20220731/d0d6a09dc42042559bc0577afba8936c.png
[anticipate_overshoot_settings.png]: /images/20220731/de0e50176dc847ac9bdfc9d7d9a6a190.png
[20150722004311238]: /images/20220731/cab1ba87c8fc4534862ca2eb7a853aa9.png
[cycle_settings.png]: /images/20220731/7e0a945a18e7417fab9933b24a5e959e.png
[20150722002152522]: /images/20220731/c31144f5e1e748e8b57d95fff5eebe6a.png
[overshoot_settings.png]: /images/20220731/fa4cca0fda224aaeb3caf3c9fa776b85.png
[20150722003201447]: /images/20220731/f5411e745360480db2e969fd970a78f9.png
[20150722003043764]: /images/20220731/72ff8317212642b184a61467195c1340.png