最近學(xué)習(xí)了一下用緩動(dòng)函數(shù)模擬物理動(dòng)畫(huà)的效果，可以實(shí)現(xiàn)一些比較高級(jí)的動(dòng)畫(huà)效果睬澡，比如彈簧效果等固额。

1.緩動(dòng)函數(shù)的動(dòng)畫(huà)效果是建立在CALayer層級(jí)的關(guān)鍵幀動(dòng)畫(huà)基礎(chǔ)之上。
2.緩動(dòng)函數(shù)是一系列模擬物理效果(如拋物線(xiàn))方程式的統(tǒng)稱(chēng)煞聪，用以計(jì)算給定兩點(diǎn)之間的插值斗躏。
3.兩點(diǎn)之間插得值越多，效果越好昔脯，但是會(huì)耗費(fèi)更多的性能啄糙。

說(shuō)了這么多，什么是滑動(dòng)函數(shù)呢云稚？如下圖隧饼，是緩動(dòng)函數(shù)的各種曲線(xiàn)效果圖：

easing.png

大家可以先去github上下載緩動(dòng)函數(shù)第三方 EasingAnimation，鏈接地址：https://github.com/YouXianMing/EasingAnimation

Paste_Image.png

大家可以在瀏覽器里面看一下緩動(dòng)函數(shù)的效果静陈，如下圖:

Paste_Image.png

Paste_Image.png

將鼠標(biāo)移到曲線(xiàn)圖上燕雁，即可看見(jiàn)紅色光標(biāo)相對(duì)應(yīng)的移動(dòng)軌跡。

好了鲸拥，緩動(dòng)函數(shù)介紹完了拐格，現(xiàn)在開(kāi)始進(jìn)入正題，如何用緩動(dòng)函數(shù)模擬物理動(dòng)畫(huà)效果刑赶，上代碼捏浊。

先創(chuàng)建一個(gè)項(xiàng)目 ，將我們下載的第三方中如下四個(gè)文件拖入工程中撞叨，編譯無(wú)問(wèn)題金踪。

Paste_Image.png

//創(chuàng)造一個(gè)紅色的球狀視圖

    UIView *showView = [[UIView alloc    ] initWithFrame:CGRectMake(0, 0, 100, 100)];
    showView.layer.cornerRadius = 50;
    showView.layer.masksToBounds = YES;
    showView.contentMode = UIViewContentModeScaleAspectFill;
    showView.backgroundColor = [UIColor redColor];
    [self.view addSubview:showView];
}

然后創(chuàng)建關(guān)鍵幀動(dòng)畫(huà)（對(duì)關(guān)鍵幀動(dòng)畫(huà)不熟悉的童鞋可以去看我這篇文章 浊洞，關(guān)鍵幀動(dòng)畫(huà)很重要，可以讓動(dòng)畫(huà)按照我們指定的軌跡運(yùn)行热康。）http://www.reibang.com/p/2bdceb8844ed

CAKeyframeAnimation *keyFrameA = [CAKeyframeAnimation animation];
        keyFrameA.keyPath = @"position"; 
        keyFrameA.duration = 2.f;
    keyFrameA.values = [YXEasing calculateFrameFromPoint:showView.center toPoint:CGPointMake(50, self.view.frame.size.height - 50) func:BounceEaseOut frameCount:30 * 2];//values后面原本跟的是數(shù)組沛申，在這里我們調(diào)用緩動(dòng)函數(shù)中的calculateFrameFromPoint方法劣领，表示一個(gè)起始點(diǎn)到終止點(diǎn)姐军，func代表的參數(shù)是緩動(dòng)函數(shù)的效果，framecount則是幀數(shù)尖淘，一般我們?nèi)搜圩R(shí)別的最大幀數(shù)是30幀奕锌，上面設(shè)了2秒，則乘以2
    showView.center = CGPointMake(50, self.view.frame.size.height - 50); //設(shè)置一下終點(diǎn)位置村生，讓效果到終點(diǎn)位置停下來(lái)
    [showView.layer addAnimation:keyFrameA forKey:nil];

效果如下惊暴，碰撞效果：

boll.gif

再示例一個(gè)彈簧效果，比如鐘表上秒針的來(lái)回抖動(dòng)

    //創(chuàng)建一個(gè)表盤(pán)
    UIView *biaoView = [[UIView alloc ] initWithFrame:CGRectMake(0, 0, 300, 300)];
    biaoView.center  = self.view.center;
    biaoView.layer.borderWidth = 1.f;
    biaoView.layer.cornerRadius = 150;
    biaoView.layer.borderColor = [UIColor  redColor].CGColor;
    [self.view addSubview:biaoView];

//創(chuàng)建出layer,也就是秒針
    self.secLayer = [CALayer layer]; //secLayer是創(chuàng)建的全局變量
    self.secLayer.anchorPoint = CGPointMake(0, 0);//anchorPoint屬性是layer的轉(zhuǎn)動(dòng)點(diǎn)趁桃，就好比一個(gè)圖釘扣在紙上辽话，紙隨著圖釘而轉(zhuǎn)動(dòng)，在這里設(shè)為最上面的起點(diǎn) 卫病。不理解的話(huà)請(qǐng)?jiān)L問(wèn)網(wǎng)址：http://www.tuicool.com/articles/MvI7fu3
    self.secLayer.frame = CGRectMake(150, 150, 1, 150);
    self.secLayer.backgroundColor = [UIColor  blueColor].CGColor;
    [biaoView.layer addSublayer:self.secLayer];

 //創(chuàng)建定時(shí)器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(timerEvent) userInfo:nil repeats:YES];

//定義兩個(gè)宏

//弧度轉(zhuǎn)角度
#define RADIANS_TO_DEGREES(radians) ((radians) * (100.0 / M_PI))

//角度轉(zhuǎn)弧度
#define DEGREES_TO_RADIANS(angle) ((angle) / 100.0 * M_PI)

- (void)timerEvent {
    static int i = 1;
  //在這里油啤，我們要得到每秒轉(zhuǎn)動(dòng)的弧度
    CGFloat oldValue = DEGREES_TO_RADIANS((360 / 60) * i++);
    CGFloat newValue = DEGREES_TO_RADIANS((360 / 60) * i);
    
    CAKeyframeAnimation *keyFrameA = [CAKeyframeAnimation animation];
    keyFrameA.keyPath = @"transform.rotation.z";
    keyFrameA.duration = 0.5f; //由于表是每秒進(jìn)行的，所以動(dòng)畫(huà)不可能用1秒蟀苛，在這里我們?cè)O(shè)置動(dòng)畫(huà)效果為0.5秒
    keyFrameA.values = [YXEasing calculateFrameFromValue:oldValue toValue:newValue func:ElasticEaseOut frameCount:0.5 * 30];//調(diào)用calculateFrameFromValue益咬，表示從老弧度到新弧度，這里的func用的是彈簧效果ElasticEaseOut帜平，幀數(shù)設(shè)置為30 * 0.5
    self.secLayer.transform = CATransform3DMakeRotation(newValue, 0, 0, 1);//繞著z軸轉(zhuǎn)動(dòng)的newValue幽告，讓其每次動(dòng)畫(huà)后保持當(dāng)前位置繼續(xù)動(dòng)畫(huà)
    [self.secLayer addAnimation:keyFrameA forKey:nil];
}

效果如下

time.gif

緩動(dòng)函數(shù)還有很多用法，主要還是看緩動(dòng)函數(shù)的那張圖裆甩，每種類(lèi)型有三張方法冗锁，比如上面的彈簧效果，如下圖：

Paste_Image.png

根據(jù)自己需要的效果嗤栓，然后再easing.h中找到對(duì)應(yīng)的func蒿讥。

博主也就是起個(gè)拋磚引玉的作用，主要還是靠自己去認(rèn)知抛腕，畢竟動(dòng)畫(huà)不是死的芋绸。