如何在Android的视图上应用缓动动画功能

Question

我想使用自定义interpolator 在Android view（按钮）上应用翻译animation，其中缓动函数为：

public static float easeOut(float t,float b , float c, float d) {
    if ((t/=d) < (1/2.75f)) {
       return c*(7.5625f*t*t) + b;
    } else if (t < (2/2.75f)) {
       return c*(7.5625f*(t-=(1.5f/2.75f))*t + .75f) + b;
    } else if (t < (2.5/2.75)) {
       return c*(7.5625f*(t-=(2.25f/2.75f))*t + .9375f) + b;
    } else {
       return c*(7.5625f*(t-=(2.625f/2.75f))*t + .984375f) + b;
    }
}

我有一个使用自定义插值器的示例，如下所示：

插值器是：

public class HesitateInterpolator implements Interpolator {
    public HesitateInterpolator() {
    }

    public float getInterpolation(float t) {
        float x = 2.0f * t - 1.0f;
        return 0.5f * (x * x * x + 1.0f);
    }
}

并且是这样使用的：

ScaleAnimation anim = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
anim.setInterpolator(new HesitateInterpolator());

我的问题是： b、c、d 这些值是什么？

Answer 1

仅供参考：对于只想要轻松插值器的人，您可以使用 myAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

Answer 2

我做了一个可以解决这个问题的库。 AndroidEasingFunctions

Answer 3

根据Robert Penner's Easing Functions，如here所述：

t：当前时间，b：begInnIng值，c：变化In值，d：持续时间

如果你想实现你的自定义插值器，你必须做这样的事情：

（这将是 easeInOutQuint 的实现）

public class MVAccelerateDecelerateInterpolator implements Interpolator {

    // easeInOutQuint
    public float getInterpolation(float t) {
        float x;
        if (t<0.5f)
        { 
            x = t*2.0f;
            return 0.5f*x*x*x*x*x;
        }
        x = (t-0.5f)*2-1;
        return 0.5f*x*x*x*x*x+1;
    }
}

编辑： 要实现缓动函数，您需要一些数学知识，考虑到getInterpolation 方法只获取 t 参数，从 0.0 到 1.0。

所以基本上你需要开发一个y(t)函数，t从0到1，y值从0到1，如下图：

你改变的是从 0 到 1 的曲线（例如，图中的绿线是线性的）。您需要“规范化”缓动函数以保持在 (0, 1) x (0, 1) 方格中，正如您在我的 easeInOutQuint 实现中看到的那样。

Answer 4

1,2,3 去

1. 使用此awesome site 创建自定义三次贝塞尔曲线。并获得曲线的控制点。在 0,0 和 1,1 之间
2. Interpolator customInterpolator = PathInterpolatorCompat.create(cpX1,cpX2,cpY1,cpY2)
3. 将此 customInterpolator 添加到您的任何动画中。

添加了gist。 一些more here。

Answer 5

这是另一个解决方案，最近添加到了 android 的支持库： https://gist.github.com/ebabel/8ff41cad01e9ce1dd9ce

还有一个正在使用的例子：

public static void expand(final View v) {
    v.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    final int targetHeight = v.getMeasuredHeight();

    if ( v.getHeight() != targetHeight ) {
        // Older versions of android (pre API 21) cancel animations for views with a height of 0 so use 1 instead.
        v.getLayoutParams().height = 1;
        v.setVisibility(View.VISIBLE);


        Animation a = new Animation() {
            @Override
            protected void applyTransformation(float interpolatedTime, Transformation t) {
                v.getLayoutParams().height = interpolatedTime == 1
                        ? ViewGroup.LayoutParams.WRAP_CONTENT
                        : (int) (targetHeight * interpolatedTime);
                v.requestLayout();
            }

            @Override
            public boolean willChangeBounds() {
                return true;
            }
        };

        a.setInterpolator(EasingsConstants.easeInOutQuart);
        a.setDuration(computeDurationFromHeight(v));
        v.startAnimation(a);
    } else {
        Log.d("AnimationUtil", "expand Already expanded ");
    }
}

/**
 * 1dp/ms * multiplier
 */
private static int computeDurationFromHeight(View v) {
    return (int) (v.getMeasuredHeight() / v.getContext().getResources().getDisplayMetrics().density) * DURATION_MULTIPLIER;
}