一、顯示效果

二、原理簡(jiǎn)介

1、思路

要實(shí)現(xiàn)這個(gè)效果需要先知道這兩個(gè)硬幣是怎樣運(yùn)動(dòng)的，然后通過放大、縮小的效果實(shí)現(xiàn)的這種有距離感的效果。思路如下：

一、這兩個(gè)硬幣是在一定范圍內(nèi)做相對(duì)運(yùn)動(dòng)的，可以先使一個(gè)硬幣在一個(gè)固定范圍內(nèi)做左右的往復(fù)運(yùn)動(dòng)，另一個(gè)硬幣和它做“相對(duì)運(yùn)動(dòng)”即可。

二、讓硬幣從左至右移動(dòng)時(shí)先變小再回復(fù)正常；從右至左移動(dòng)時(shí)先變大再回復(fù)正常；這樣就實(shí)現(xiàn)了這用有距離感的“相對(duì)運(yùn)動(dòng)”。

2、代碼

第一步 要實(shí)現(xiàn)一個(gè)硬幣在一定范圍內(nèi)實(shí)現(xiàn)左右往復(fù)運(yùn)動(dòng)，需要先固定一個(gè)范圍，當(dāng)運(yùn)動(dòng)到左邊緣時(shí)讓其向右運(yùn)動(dòng)，當(dāng)運(yùn)動(dòng)到有邊緣時(shí)讓其向左運(yùn)動(dòng)。

這里用到了MVC的思想，先創(chuàng)建一個(gè)模型XLDot，給這個(gè)模型添加一個(gè)Direction屬性，然后通過改變模型direction屬性從而改變運(yùn)動(dòng)方向。

typedef NS_ENUM(NSInteger,DotDitection){    DotDitectionLeft = -1,    DotDitectionRight = 1,};@interface XLDot : UIView//移動(dòng)方向 就兩種 左、右@PRoperty (nonatomic,assign) DotDitection direction;//字體顏色@property (nonatomic,strong) UIColor *textColor;@end
先初始化一個(gè)豆，放在容器的左邊，方向設(shè)為向右
    //初始化存放豆豆的的容器    _dotContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 200)];    _dotContainer.center = self.center;    [self addSubview:_dotContainer];        XLDot *dot = [[XLDot alloc] initWithFrame:CGRectMake(0, 0, [self dotWidth],[self dotWidth])];    dot.backgroundColor = [UIColor redColor];    dot.direction = DotDitectionRight;    [_dotContainer addSubview:dot];通過CADisplayLink實(shí)現(xiàn)刷新工作，代碼如下
    _link = [CADisplayLink displayLinkWithTarget:self selector:@selector(reloadView)];    [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];刷新代碼如下，通過移動(dòng)到左右邊緣，改變direction屬性
//刷新UI-(void)reloadView{    XLDot *dot1 = _dots.firstObject;    //改變移動(dòng)方向、約束移動(dòng)范圍    //移動(dòng)到右邊距時(shí)    if (dot1.center.x >= _dotContainer.bounds.size.width - [self dotWidth]/2.0f) {        CGPoint center = dot1.center;        center.x = _dotContainer.bounds.size.width - [self dotWidth]/2.0f;        dot1.center = center;        dot1.direction = DotDitectionLeft;        [_dotContainer bringSubviewToFront:dot1];    }    //移動(dòng)到左邊距時(shí)    if (dot1.center.x <= [self dotWidth]/2.0f) {        dot1.center = CGPointMake([self dotWidth]/2.0f, dot1.center.y);        dot1.direction = DotDitectionRight;        [_dotContainer sendSubviewToBack:dot1];    }    //更新第一個(gè)豆的位置    CGPoint center1 = dot1.center;    center1.x += dot1.direction * [self speed];    dot1.center = center1;}顯示效果：
第二步 實(shí)現(xiàn)向左移動(dòng)先放大再回復(fù)正常、向右運(yùn)動(dòng)先變小再回復(fù)正常。
代碼如下：
//顯示放大、縮小動(dòng)畫-(void)showAnimationsOfDot:(XLDot*)dot{    CGFloat apart = dot.center.x - _dotContainer.bounds.size.width/2.0f;    //最大距離    CGFloat maxAppart = (_dotContainer.bounds.size.width - [self dotWidth])/2.0f;    //移動(dòng)距離和最大距離的比例    CGFloat appartScale = apart/maxAppart;    //獲取比例對(duì)應(yīng)余弦曲線的Y值    CGFloat transfomscale = cos(appartScale * M_PI/2.0);    //向右移動(dòng)則 中間變大 兩邊變小    if (dot.direction == DotDitectionLeft) {        dot.transform = CGAffineTransformMakeScale(1 + transfomscale/4.0f, 1 + transfomscale/4.0f);        //向左移動(dòng)則 中間變小 兩邊變大    }else if (dot.direction == DotDitectionRight){        dot.transform = CGAffineTransformMakeScale(1 - transfomscale/4.0f,1 - transfomscale/4.0f);    }}原理是利用余弦函數(shù)曲線-π/2到π/2先變大再變小的特性
效果如下：
第三步 放置另一個(gè)豆豆，和第一個(gè)豆豆做“相對(duì)運(yùn)動(dòng)”，包括放大變小、運(yùn)動(dòng)方向；
保證相對(duì)距離的代碼：
    CGFloat apart = dot1.center.x - _dotContainer.bounds.size.width/2.0f;    CGPoint center2 = dot2.center;    center2.x = _dotContainer.bounds.size.width/2.0f - apart;    dot2.center = center2;效果如下：
稍加潤(rùn)色后：
三、代碼
GitHub地址