再谈属性动画——介绍以及自定义Interpolator插值器

属性动画中有一个重要的概念就是插值器——Interpolator,根据流失的时间因子计算得到属性因子。Android中默认的插值器是AccelerateDecelerateInterpolator,内置了很多插值器,本文将以一个例子介绍各种插值器的效果,以及如何自定义Interpolator。 话不多说,先看demo,如下视频

官方Interpolator介绍

除了最后一个是自定义Interpolator外,其他都是系统自带的。下面主要介绍下效果就好了:

  • AccelerateDecelerateInterpolator:先加速、再减速,默认的插值器
  • LinearInterpolator:线性插值器
  • AccelerateInterpolator:加速
  • DecelerateInterpolator:减速
  • AnticipateInterpolator:开始时先反向
  • BounceInterpolator:达到最终位置会先反弹,类似弹弹球着地的效果
  • OvershootInterpolator:达到最终位置会超出一些
  • AnticipateOvershootInterpolator:AnticipateInterpolator与OvershootInterpolator的结合
  • CycleInterpolator:正弦效果,可以指定回荡的次数
  • PathInterpolator:根据指定的path进行运动,可以实现贝塞尔曲线

Interpolator既可以在代码中指定给动画,同样也可以在xml文件中使用,这块可以到参考文章中查看。

自定义Interpolator

先介绍一个网站,里面有各种Interpolator的效果以及数学公式定义,网址是 http://inloop.github.io/interpolator/ 。

先看官方Interpolator找找灵感

Interpolator的核心是下面这个方法:

float getInterpolation(float input);

其中input就是流失的时间因子,范围是[0,1],输出是属性因子。 LinearInterpolator的函数是个一次函数,样式如下:

相对应的,LinearInterpolator的方法实现如下:

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

而AccelerateInterpolator的函数是个二次函数,样式如下:

相对应地,实现如下:

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

看完了官方的两个例子,再来看看如何自定义Interpolator。

自定义Interpolator——SpringInterpolator

可以看到,我们自定义的Interpolator在达到终点后,有多次震荡的效果,是不是很像弹簧?这个可以通过自定义Interpolator实现,也可以通过DynamicAnimation实现,具有可以参考让View具有弹性效果的动画——SpringAnimation。 SpringInterpolator的函数很复杂,样式如下:

然后就是根据函数实现方法了,具体如下:

class SpringInterpolator(val factor: Float) : Interpolator{

    override fun getInterpolation(input: Float): Float {
        return (Math.pow(2.0, -10.0 * input) * Math.sin((input - factor / 4) * (2 * Math.PI) / factor) + 1).toFloat()
    }
}

这么复杂的函数,如果你问我是怎么会的,那我只能告诉你,去上面那个网址看吧,你会发现自定义Interpolator原来这么容易。

其实自定义Interpolator的核心就是这个上面的函数样式,以及将其再转换成代码就ok了。

总结

关于代码,参考Github:https://github.com/wangli135/ClimbDemo/tree/master/jetpackdemo/src/main/java/com/xingfeng/jetpackdemo/animation/propertyanimator

参考

  • https://developer.android.com/guide/topics/graphics/prop-animation?hl=zh-cn#interpolators
  • http://wiki.jikexueyuan.com/project/android-animation/2.html
  • https://medium.com/mindorks/understanding-interpolators-in-android-ce4e8d1d71cd
  • https://robots.thoughtbot.com/android-interpolators-a-visual-guide

原文发布于微信公众号 - 每天学点Android知识(android_every_day)

原文发表时间:2019-02-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券