最近有朋友讓我幫他看一個demo的實現,這個demo需求描述很簡單:

 實現小船隨波浪起伏的動畫    

先上效果圖,有興趣的童鞋,可以先自己想想實現方式再看我的思路:

gif.gif

1 分析問題:此需求頁面有兩個元素:一個小船,一個曲面

  1.1 小船很簡單,UIImageView+一張小船圖片就可以
  1.2 曲面是一個正弦曲線或者余弦曲線,向上偏移一定量,
      此曲線與一條線之間的空間填充上顏色,也能實現;

2 重難點問題分析:

  2.1 正弦或余弦曲線怎么畫: 網上有很多實現方式,這里不再贅述,
      本文是參考一個類叫NBWaveView,實現正弦曲線的
  2.2 小船怎么與曲線同步起伏: 由觀察得知小船在起伏的時候,
      大小沒有變化,
      變化的是位置(center)和transform,
      接下來就是找出小船對應每一點的center和transform;

3 重點解決小船對應沒一點的center和transform

為了方便敘述,先畫兩張張圖:

示意圖.jpg

抽象圖.jpg

有興趣的同學可以研究一下這兩張圖,
沒興趣請當做沒有看到,直接看結論:

transform角度為
CGFloat angle = self.config.waveA * self.config.wavePeriod *
cos(self.config.wavePeriod(self.width/2)+self.config.waveOffset)(鳴謝Colleny_Z君)

//在當前點的斜率是
 CGFloat k = self.config.waveA * self.config.wavePeriod *
               cos(self.config.wavePeriod*(self.width/2)+self.config.waveOffset);
//transform角度為
 CGFloat angle = atan(k);

//中心點坐標為
self.imgView.centerY = self.imgView.size.height/2*cos(angle)+y-self.imgView.size.height;
self.imgView.centerX = self.imgView.size.height/2*sin(angle)+self.width/2;

詳細實現請下載demo

如有任何問題歡迎留言,請各位看官不吝賜教!