字數1451
閱讀237
喜歡17
之前在ios開發乾貨 第1期中提到過乙個挺有意思的數字轉變動畫numbermorphview , 如下圖：
numbermorphview
我將通過幾篇文章對這個開源庫做一些分析，當然，這篇文章不會對它做全面的解析，而是利用這個庫的一些技術概念來做一些簡單的示例，也算是乙個引子，後面會抽時間再寫一篇對這個庫的**分析，敬請期待。
我們將會使用cadisplaylink + cashapelayer + uibezierpath結合製作乙個毫秒級的畫圓動畫，不同的是，這個動畫具有彈性效果，下面先來看看製作的效果：
效果預覽
開啟main.storyboard，將唯一的乙個viewcontroller的view custom class修改為rrcircleanimationview。
至此，準備工作已經完成。
先來個簡單任務，我們來實現畫圓動畫。
第一步，為rrcircleanimationview新增屬性：
@implementation
rrcircleanimationview
// 注意這裡我們是直接從xib載入當前view。
- (void)awakefromnib
updateframe方法，我們在此方法內不斷地畫圓。
- (void)updateframe我們先把觸控的起始和結束點給找到：
- (void)touchesbegan:(nsset
*)touches withevent:(uievent *)event
- (void)touchesmoved:(nsset
*)touches withevent:(uievent *)event
兩點座標距離公式
可以得到我們起始和結束兩點的距離，也就是圓的半徑是：
- (cgfloat)getradius
上面只是的畫圓動畫看起來是沒什麼問題了，不過總感覺缺少動感，接下來我們來幫他加入些活力！
新增一下成員變數到rrcircleanimationview類中。
bool _istouchend; // 觸控結束標誌
int _currentframe; // 當前的幀數
- (void)touchesbegan:(nsset*)touches withevent:(uievent *)event方法內新增以下**：
_istouchend = no; //重置觸控狀態
_currentframe = 1; //重置當前的幀數
- (void)touchesended:(nsset
*)touches withevent:(uievent *)event
- (cgfloat)getradius修改如下：
- (cgfloat)getradius
else
}return result;
}
- (cgfloat)getspringinterpolation:(cgfloat)x
可以用mac os x自帶的軟體叫grapher畫出此函式的的影象，如下圖：
grapher
這個函式的作用其實就是通過x值，也就是當前幀數除以允許的最大幀數。
(cgfloat)
(_currentframe) / (cgfloat)
(maxframes)
我們所要的動畫效果是把圓拉大到超過或者小於設定的目標半徑max_radius時，需要乙個彈性動畫逐漸回到設定好的目標半徑。
回頭再看一下實時計算動畫半徑的公式：
max_radius + (result - max_radius) * factor再看看剛才的函式影象，在x = 0到1之前振動，隨著x的增加振幅逐漸減少，當x = 1的時候，y值為0。
這篇文章講述了如何自己實現具有彈性的幀動畫，如果能理解好這種動畫製作原理，對動畫效果開發是很有幫助的，後面有時間會繼續寫其他的一些動畫製作的方法，實現更多的動畫效果。
差點忘了說了，目前這個動畫已經放到github上面，傳送門：rronganimation
rronganimation
the end
iOS高階4 動畫總結
1.基礎 逐幀 與 關鍵幀 逐幀動畫 類似於手繪翻頁方式，我們可以將這個水杯在每幀畫面中的位置一一找出來，這樣實現動畫的方式就叫作 逐幀動畫，我們需要處理動畫中的每一幀。我們一般在計算機上用 fps frames per second 即 每秒的幀數 來表示動畫的重新整理速度，基於螢幕的重新整理率等...
iOS 動畫實戰之Lottie動畫
1.作為收藏按鈕,是不是很活潑?2.返回與選單之間的切換,生動有趣 3.還有各種形變動畫.更棒的是,lottie有各種不同的版本,安卓,ios,前端都可以使用,理論上動畫做一套就可以共用,大大的減少了工作量.使用方法 整合環境 移動端同學整合lottie框架,ui ue同學整合ae的bodymovi...
iOS 學習總結之動畫
objc view plain copy uiview的，翻轉 旋轉，偏移，翻頁，縮放，取反的動畫效果 翻轉的動畫 開始動畫 uiviewbeginanimations doflip context nil 設定時常 uiviewsetanimationduration 1 設定動畫淡入淡出 uiv...