美文网首页
三谈属性动画——Keyframe以及ViewPropertyAn

三谈属性动画——Keyframe以及ViewPropertyAn

作者: 星风雪雨 | 来源:发表于2019-03-11 11:50 被阅读0次

经过初识属性动画——使用Animator创建动画再谈属性动画——介绍以及自定义Interpolator插值器,对属性动画已经介绍的差不多了,还剩下最后两个概念,Keyframe和ViewPropertyAnimator。

Keyframe

动画归根结底是一些帧的组合,一旦设定了一个动画后,中间的每帧,Android系统会帮我们计算好,而Keyframe允许我们定义动画中的一些关键帧,该对象主要有fraction和value组成,其中fraction代表着动画的进度、value代表着动画的值,可以设置单独的Interpolator,这个Interpolator作用于前一帧与当前帧。
举个例子:

val kf1 = Keyframe.ofFloat(0.2f, 100f).apply {
            interpolator = AnticipateInterpolator()
        }
        val kf2 = Keyframe.ofFloat(0.4f, 200f).apply {
            interpolator = LinearInterpolator()
        }
        val kf3 = Keyframe.ofFloat(0.6f, 300f)
        val kf4 = Keyframe.ofFloat(0.8f, 400f).apply {
            interpolator = BounceInterpolator()
        }
        val kf5 = Keyframe.ofFloat(1.0f, 500f).apply {
            interpolator = SpringInterpolator(0.2f)
        }

        btnMove.setOnClickListener {
            ObjectAnimator.ofPropertyValuesHolder(tvShow,
                    PropertyValuesHolder.ofKeyframe(View.TRANSLATION_Y, kf1, kf2, kf3, kf4, kf5)).apply {
                duration = 3000
                start()
            }
        }

上面代码定义了5个Keyframe,分别设置了不同的Interpolator,然后再用PropertyValuesHolder包装一下,最终效果如下:

Keyframe效果

ViewPropertyAnimator

如果想在一个View上使用属性动画,可以这么操作:

val animX = ObjectAnimator.ofFloat(myView, "x", 50f)
val animY = ObjectAnimator.ofFloat(myView, "y", 100f)
AnimatorSet().apply {
    playTogether(animX, animY)
    start()
}

当然,也可以这么操作:

val pvhX = PropertyValuesHolder.ofFloat("x", 50f)
val pvhY = PropertyValuesHolder.ofFloat("y", 100f)
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start()

可以发现,都是挺麻烦的。View作为最常被动画的对象,Android提供了一种封装,这就是ViewPropertyAnimator,使用方式也是很简单,比如上面的代码等效于:

myView.animate().x(50f).y(100f)

View.animate()方法会返回一个ViewPropertyAnimator,该对象具备View的常用属性的变换,比如:

  • transitionX、transitionY、transitionZ
  • rotation、rotationX和rotationY
  • scaleX、scaleY
  • x、y、z
  • alpha

总结

至此,学习完了属性动画的知识点,属性动画在Android Transition框架中很重要,是构成各种转场动画的关键,会实现各种酷炫的动画是很厉害的,但其实都离不开这些基础,剩下的更多是数学。

关于代码,参考Github

参考

关注我的技术公众号,不定期会有技术文章推送,不敢说优质,但至少是我自己的学习心得。微信扫一扫下方二维码即可关注:

二维码

相关文章

  • 三谈属性动画——Keyframe以及ViewPropertyAn

    经过初识属性动画——使用Animator创建动画和再谈属性动画——介绍以及自定义Interpolator插值器,对...

  • CSS3动画

    CSS属性animation添加动画特性 @keyframe关键帧:动画的原理就是一定时间内播放多张图片,关键帧即...

  • CAKeyframeAnimation—关键帧动画

    属性说明 values : 一个NSArray对象。里面的元素称为”关键帧”(keyframe),动画对象会在指定...

  • Android动画

    简介 View的动画大体上划分为三种,补间动画(View动画)、帧动画以及属性动画,其中属性动画是5.0(api ...

  • iOS动画

    iOS动画-从UIView动画说起iOS动画-Transform和KeyFrame动画iOS动画-layout动画...

  • iOS keyframe 动画的基本套路

    实际就是一套动画的复合执行: 下面是 add keyframe 的代码: 其中的 keyframe 的 start...

  • iOS 动画-uikit geekband

    动画化原理 动画支持 案例 新建文档view输入 run起来 说说动画类型 UIview的keyframe 动画化...

  • Android 你应该知道的动画

    Android中,动画可以分为三种,分别是补间动画、帧动画以及属性动画,接下来将对这三种动画的使用做一个详细的介绍...

  • Android小知识-了解Android中的三种动画

    本篇文章已授权微信公众号 顾林海 独家发布 Android中的动画分为三种:视图动画、帧动画以及属性动画,视图动画...

  • Transform总结

    CSS3动画的属性主要分为三类:transform、transition以及animation。 Transfor...

网友评论

      本文标题:三谈属性动画——Keyframe以及ViewPropertyAn

      本文链接:https://www.haomeiwen.com/subject/otvvpqtx.html