Android 使用cos和sin绘制复合曲线动画

 更新时间:2021年03月17日 11:02:21   作者:九心  
这篇文章主要介绍了Android 使用cos和sin绘制复合曲线动画的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

前言

前两周在开发新需求的时候,设计给了一份类似这样的动画:

看着不难,即使一遍看不懂,嘿嘿,不还有设计稿。

作为一个平时很少写动画的 Android 开发仔,看到一段段的缓入缓出曲线的设计稿时,我的心情是这样的:

虽然,Android 动画默认的插值器 AccelerateDecelerateInterpolator 有这样缓入缓出的效果:

我总不能一整个动画给它拆成4段动画来写,还别说,我第一次写的代码还真的是这么干的。

第一次分析

本着能少写一行绝不多写一字的原则,询问了大佬同事的意见,大佬大手一挥:PathInterpolator(后证实有问题)。

简单看了一下使用方式,需要使用 Path,再看了一眼,好家伙,有可能会用到贝塞尔曲线,放弃~

为了能够快速的解决问题,就使用了上面谈到的方案:

private fun animateTagView(tagView: TextView) {
 // [0,200]区间的动画 
 val valueAnimatorOne = ValueAnimator.ofInt(0, 200)
 valueAnimatorOne.addUpdateListener {
  val per = it.animatedValue as Int / 200f
  tagView.rotation = 4 * per
  tagView.scaleX = (1 - 0.1 * per).toFloat()
  tagView.scaleY = (1 - 0.1 * per).toFloat()
 }
 valueAnimatorOne.duration = 200
 // [200,560]区间的动画
 val valueAnimatorTwo = ValueAnimator.ofInt(200, 560)
 valueAnimatorTwo.addUpdateListener {
  val per = (it.animatedValue as Int - 200) / 360f
  tagView.rotation = 3 - 11 * per
  tagView.scaleX = (0.9 + 0.1 * per).toFloat()
  tagView.scaleY = (0.9 + 0.1 * per).toFloat()
 }
 valueAnimatorTwo.duration = 360
 // [560,840]区间的动画
 val valueAnimatorThree = ValueAnimator.ofInt(560, 840)
 valueAnimatorThree.addUpdateListener {
  val per = (it.animatedValue as Int - 560) / 280f
  tagView.rotation = -8 + 12 * per
  tagView.scaleX = (1 - 0.2 * per).toFloat()
  tagView.scaleY = (1 - 0.2 * per).toFloat()
 }
 valueAnimatorThree.duration = 280
 // [840,1000]的动画
 val valueAnimatorFour = ValueAnimator.ofInt(840, 1000)
 valueAnimatorFour.addUpdateListener {
  val per = (it.animatedValue as Int - 840) / 160f
  tagView.rotation = 4 - 4 * per
  tagView.scaleX = (0.8 + 0.2 * per).toFloat()
  tagView.scaleY = (0.8 + 0.2 * per).toFloat()
 }
 valueAnimatorFour.duration = 160
 // 使用AnimatorSet串行执行动画
 val animationSet = AnimatorSet()
 animationSet.playSequentially(valueAnimatorOne, valueAnimatorTwo, valueAnimatorThree, valueAnimatorFour)
 tagView.post {
  tagView.pivotX = 0f
  tagView.pivotY = ad_tag_two.measuredHeight.toFloat()
  animationSet.start()
 }
}

整个动画被我拆成了[0,200]、[200,560]、[560,840]和[840,1000]四段属性动画,因为产品说只需要播放一次,所以使用 AnimatorSet 将动画组装起来,就可以解决问题。

第二次分析

第一次得到的方案虽然能够解决问题,如果遇到循环播放,AnimatorSet 就不行了,有没有其他方案呢?

趁着周末的时间,学了一下 PathInterpolator,发现这个玩意也解决不了问题,或者说不好解决问题,虽然可以用三阶贝塞尔曲线分段画出上述曲线,但 PathInterpolator 要求起点和终点分别在 (0,0) 和 (1,1)。

既然插值器不行,可以试试估值器,但一个估值器也解决不了旋转和缩放两种动画,看来得靠 AnimatorUpdateListener 去解决问题。

回头想一下,插值器是将均匀的时间片段转化成加速或者减速的行为,我们也可以将均匀的时间片段转化成对应的曲线,只要做好两点:

使用线性的插值器 LinearInterpolator。
将上面的曲线拆分,通过不同的 sin 或者 cos 方法表达。
以旋转动画为例,拆成的 sin 函数:

另外一段动画的函数可以参考代码:

override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_main)

 val tvContent = findViewById<TextView>(R.id.tv_content)
 val valueAnimatorOne = ValueAnimator.ofFloat(0.0f, 1.5f)
 valueAnimatorOne.addUpdateListener {
  // 通过对应的sin和cos设置rotation和scale
  val per = it.animatedValue as Float
  var rotation: Float = 0f
  var scale: Float = 0f
  if(per >= 0 && per < 0.2f){
   rotation = sin((per / 0.2f) * Math.PI.toFloat() - Math.PI.toFloat() / 2) * 1.5f + 1.5f
   scale = cos(per / 0.2f * Math.PI.toFloat()) * 0.05f + 0.95f
  }
  if(per >= 0.2f && per < 0.56f){
   rotation = sin(Math.PI.toFloat() / 2 + Math.PI.toFloat() * ( per - 0.2f) / 0.36f) * 5.5f - 2.5f
   scale = cos((per - 0.2f) / 0.36f * Math.PI.toFloat() + Math.PI.toFloat()) * 0.05f + 0.95f
  }
  if(per >= 0.56f && per < 0.84f){
   rotation = sin(Math.PI.toFloat() * (per - 0.56f) / 0.28f - Math.PI.toFloat() / 2) * 6f - 2f
   scale = cos((per - 0.56f) / 0.28f * Math.PI.toFloat()) * 0.1f + 0.9f
  }
  if(per in 0.84f..1f){
   rotation = sin(Math.PI.toFloat() / 2 + Math.PI.toFloat() * (per - 0.84f) / 0.16f ) * 2f + 2f
   scale = cos((per - 0.84f) / 0.16f * Math.PI.toFloat() + Math.PI.toFloat()) * 0.1f + 0.9f
  }
  // 设置停止时间
  if(per > 1f && per <= 1.5f){
   rotation = 0f
   scale = 1.0f
  }
  tvContent.rotation = rotation
  tvContent.scaleX = scale
  tvContent.scaleY = scale
 }
 // 设置线性插值器
 valueAnimatorOne.interpolator = LinearInterpolator()
 // 动画时间
 valueAnimatorOne.duration = 1500
 // 无线循环
 valueAnimatorOne.repeatCount = -1
 tvContent.post {
  // 设置中心点
  tvContent.pivotX = 0f
  tvContent.pivotY = tvContent.measuredHeight.toFloat()
  valueAnimatorOne.start()
 }
}

整个代码还是比较简单的,旋转动画曲线由 sin 得出,缩放由 cos 得出,最后改一下中心点。

总结

本次的动画案例不难,在面对复合缓入缓出曲线的情形,我们可以拆成一段段,用 sin 或者 cos 去描述,这样的好处是可以只使用一个属性动画,且可以循环播放。

如果你有更好的方案,欢迎评论区交流。

以上就是Android 使用cos和sin绘制复合曲线动画的详细内容,更多关于Android 绘制复合曲线动画的资料请关注脚本之家其它相关文章!

相关文章

  • Android应用中图片浏览时实现自动切换功能的方法详解

    Android应用中图片浏览时实现自动切换功能的方法详解

    这篇文章主要介绍了Android应用中图片浏览时实现自动切换功能的方法,文中还讲解了一个触摸大图进行图片切换的深入功能,需要的朋友可以参考下
    2016-04-04
  • Android存储字符串数据到txt文件

    Android存储字符串数据到txt文件

    这篇文章主要为大家详细介绍了Android存储字符串数据到txt文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Android之ScrollView嵌套ListView和GridView冲突的解决方法

    Android之ScrollView嵌套ListView和GridView冲突的解决方法

    由于ListView,GridView本身都继承于ScrollView,一旦在ScrollView中嵌套ScrollView,在ScrollView中嵌套使用ListView或者GridView,ListView只会显示一行多一点。两者进行嵌套,即会发生冲突
    2013-09-09
  • Android App调用MediaRecorder实现录音功能的实例

    Android App调用MediaRecorder实现录音功能的实例

    这篇文章主要介绍了Android App调用MediaRecorder实现录音功能的实例,MediaRecorder非常强大,不仅能够用来录制音频还可以录制视频,需要的朋友可以参考下
    2016-04-04
  • Android仿考拉全局滑动返回及联动效果的实现方法

    Android仿考拉全局滑动返回及联动效果的实现方法

    这篇文章主要给大家介绍了关于Android仿考拉全局滑动返回及联动效果的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08
  • Android实现退出界面弹出提示对话框

    Android实现退出界面弹出提示对话框

    这篇文章主要为大家详细介绍了Android实现退出界面弹出提示对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android实现文字动态高亮读取进度效果

    Android实现文字动态高亮读取进度效果

    这篇文章主要为大家详细介绍了Android实现文字动态高亮读取进度效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Android开发之自动朗读TTS用法分析

    Android开发之自动朗读TTS用法分析

    这篇文章主要介绍了Android开发之自动朗读TTS用法,较为详细的分析了TTS的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-06-06
  • Kotlin List与Set和Map实例讲解

    Kotlin List与Set和Map实例讲解

    集合是可变数量(可能为0)的一组条目,kotlin标准库提供一个整套用于集合管理的工具,各种集合对于解决问题都具有重要意义,并且经常用到。kotlin中的集合与Java基本类似
    2022-10-10
  • Android之自定义实现BaseAdapter(通用适配器一)

    Android之自定义实现BaseAdapter(通用适配器一)

    这篇文章主要为大家详细介绍了Android之自定义实现BaseAdapter通用适配器第一篇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论