iOS如何仿微博客戶端實現(xiàn)紅包加載界面XLDotLoading效果-創(chuàng)新互聯(lián)

小編給大家分享一下iOS如何仿微博客戶端實現(xiàn)紅包加載界面 XLDotLoading效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為于都企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)，于都網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

一、顯示效果

二、原理簡介

1、思路

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

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

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

2、代碼

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

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

typedef NS_ENUM(NSInteger,DotDitection) 
{ 
  DotDitectionLeft = -1, 
  DotDitectionRight = 1, 
}; 
@interface XLDot : UIView 
//移動方向 就兩種 左、右 
@property (nonatomic,assign) DotDitection direction; 
//字體顏色 
@property (nonatomic,strong) UIColor *textColor; 
@end

先初始化一個豆，放在容器的左邊，方向設(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實現(xiàn)刷新工作，代碼如下

_link = [CADisplayLink displayLinkWithTarget:self selector:@selector(reloadView)]; 
[_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

刷新代碼如下，通過移動到左右邊緣，改變direction屬性

//刷新UI 
-(void)reloadView 
{ 
  XLDot *dot1 = _dots.firstObject; 
  //改變移動方向、約束移動范圍 
  //移動到右邊距時 
  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]; 
  } 
  //移動到左邊距時 
  if (dot1.center.x <= [self dotWidth]/2.0f) { 
    dot1.center = CGPointMake([self dotWidth]/2.0f, dot1.center.y); 
    dot1.direction = DotDitectionRight; 
    [_dotContainer sendSubviewToBack:dot1]; 
  } 
  //更新第一個豆的位置 
  CGPoint center1 = dot1.center; 
  center1.x += dot1.direction * [self speed]; 
  dot1.center = center1; 
}

顯示效果：

第二步 實現(xiàn)向左移動先放大再回復(fù)正常、向右運動先變小再回復(fù)正常。

代碼如下：

//顯示放大、縮小動畫 
-(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; 
  //移動距離和大距離的比例 
  CGFloat appartScale = apart/maxAppart; 
  //獲取比例對應(yīng)余弦曲線的Y值 
  CGFloat transfomscale = cos(appartScale * M_PI/2.0); 
  //向右移動則 中間變大 兩邊變小 
  if (dot.direction == DotDitectionLeft) { 
    dot.transform = CGAffineTransformMakeScale(1 + transfomscale/4.0f, 1 + transfomscale/4.0f); 
    //向左移動則 中間變小 兩邊變大 
  }else if (dot.direction == DotDitectionRight){ 
    dot.transform = CGAffineTransformMakeScale(1 - transfomscale/4.0f,1 - transfomscale/4.0f); 
  } 
}

原理是利用余弦函數(shù)曲線-π/2到π/2先變大再變小的特性

效果如下：

第三步 放置另一個豆豆，和第一個豆豆做“相對運動”，包括放大變小、運動方向；

保證相對距離的代碼：

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;

效果如下：

稍加潤色后：

以上是“iOS如何仿微博客戶端實現(xiàn)紅包加載界面 XLDotLoading效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：iOS如何仿微博客戶端實現(xiàn)紅包加載界面XLDotLoading效果-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article22/cedsjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、軟件開發(fā)、標(biāo)簽優(yōu)化、微信公眾號、網(wǎng)站策劃、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)