Android 使用cos和sin繪制復(fù)合曲線動畫

更新時(shí)間：2021年03月17日 11:02:21 作者：九心

這篇文章主要介紹了Android 使用cos和sin繪制復(fù)合曲線動畫的方法，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下

前言

前兩周在開發(fā)新需求的時(shí)候，設(shè)計(jì)給了一份類似這樣的動畫：

看著不難，即使一遍看不懂，嘿嘿，不還有設(shè)計(jì)稿。

作為一個(gè)平時(shí)很少寫動畫的 Android 開發(fā)仔，看到一段段的緩入緩出曲線的設(shè)計(jì)稿時(shí)，我的心情是這樣的：

雖然，Android 動畫默認(rèn)的插值器 AccelerateDecelerateInterpolator 有這樣緩入緩出的效果：

我總不能一整個(gè)動畫給它拆成4段動畫來寫，還別說，我第一次寫的代碼還真的是這么干的。

第一次分析

本著能少寫一行絕不多寫一字的原則，詢問了大佬同事的意見，大佬大手一揮：PathInterpolator（后證實(shí)有問題）。

簡單看了一下使用方式，需要使用 Path，再看了一眼，好家伙，有可能會用到貝塞爾曲線，放棄~

為了能夠快速的解決問題，就使用了上面談到的方案：

private fun animateTagView(tagView: TextView) {
 // [0,200]區(qū)間的動畫 
 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]區(qū)間的動畫
 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]區(qū)間的動畫
 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串行執(zhí)行動畫
 val animationSet = AnimatorSet()
 animationSet.playSequentially(valueAnimatorOne, valueAnimatorTwo, valueAnimatorThree, valueAnimatorFour)
 tagView.post {
  tagView.pivotX = 0f
  tagView.pivotY = ad_tag_two.measuredHeight.toFloat()
  animationSet.start()
 }
}

整個(gè)動畫被我拆成了[0,200]、[200,560]、[560,840]和[840,1000]四段屬性動畫，因?yàn)楫a(chǎn)品說只需要播放一次，所以使用 AnimatorSet 將動畫組裝起來，就可以解決問題。

第二次分析

第一次得到的方案雖然能夠解決問題，如果遇到循環(huán)播放，AnimatorSet 就不行了，有沒有其他方案呢？

趁著周末的時(shí)間，學(xué)了一下 PathInterpolator，發(fā)現(xiàn)這個(gè)玩意也解決不了問題，或者說不好解決問題，雖然可以用三階貝塞爾曲線分段畫出上述曲線，但 PathInterpolator 要求起點(diǎn)和終點(diǎn)分別在 (0,0) 和 (1,1)。

既然插值器不行，可以試試估值器，但一個(gè)估值器也解決不了旋轉(zhuǎn)和縮放兩種動畫，看來得靠 AnimatorUpdateListener 去解決問題。

回頭想一下，插值器是將均勻的時(shí)間片段轉(zhuǎn)化成加速或者減速的行為，我們也可以將均勻的時(shí)間片段轉(zhuǎn)化成對應(yīng)的曲線，只要做好兩點(diǎn)：

使用線性的插值器 LinearInterpolator。
將上面的曲線拆分，通過不同的 sin 或者 cos 方法表達(dá)。
以旋轉(zhuǎn)動畫為例，拆成的 sin 函數(shù)：

另外一段動畫的函數(shù)可以參考代碼：

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 {
  // 通過對應(yīng)的sin和cos設(shè)置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
  }
  // 設(shè)置停止時(shí)間
  if(per > 1f && per <= 1.5f){
   rotation = 0f
   scale = 1.0f
  }
  tvContent.rotation = rotation
  tvContent.scaleX = scale
  tvContent.scaleY = scale
 }
 // 設(shè)置線性插值器
 valueAnimatorOne.interpolator = LinearInterpolator()
 // 動畫時(shí)間
 valueAnimatorOne.duration = 1500
 // 無線循環(huán)
 valueAnimatorOne.repeatCount = -1
 tvContent.post {
  // 設(shè)置中心點(diǎn)
  tvContent.pivotX = 0f
  tvContent.pivotY = tvContent.measuredHeight.toFloat()
  valueAnimatorOne.start()
 }
}

整個(gè)代碼還是比較簡單的，旋轉(zhuǎn)動畫曲線由 sin 得出，縮放由 cos 得出，最后改一下中心點(diǎn)。