iOS中如何實(shí)現(xiàn)下拉刷新動(dòng)畫

這篇文章主要介紹了iOS中如何實(shí)現(xiàn)下拉刷新動(dòng)畫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

十余年的廣昌網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整廣昌建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“廣昌網(wǎng)站設(shè)計(jì)”,“廣昌網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

先上完整的效果圖：

接下去動(dòng)畫分步實(shí)現(xiàn)，首先先實(shí)現(xiàn)如下效果：

思路是這樣的，在偏移值小于等于100的時(shí)候繪制一個(gè)矩形，當(dāng)偏移值大于100的時(shí)候，底部直線變成曲線，主要是利用CAShapeLayer和UIBezierPath來實(shí)現(xiàn)，代碼如下

#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
  CGFloat height = -scrollView.contentOffset.y;
  UIBezierPath *path = [UIBezierPath bezierPath];
  [path moveToPoint:CGPointMake(0, 0)];
  [path addLineToPoint:CGPointMake(self.view.width, 0)];
  if (height <= 100) {
    //偏移值小于等于100的時(shí)候，底部繪制直線
    [path addLineToPoint:CGPointMake(self.view.width, height)];
    [path addLineToPoint:CGPointMake(0, height)];
  }else{
    //偏移值大于100的時(shí)候，底部繪制曲線
    [path addLineToPoint:CGPointMake(self.view.width, 100)];
    [path addQuadCurveToPoint:CGPointMake(0, 100) controlPoint:CGPointMake(self.view.center.x, height)];
  }
  [path closePath];
  self.shapeLayer.path = path.CGPath;
}

其次，實(shí)現(xiàn)繪制太陽，效果如下:

主要用到的是CAShapeLayer的path和strokeEnd屬性，首先繪制一個(gè)太陽，代碼如下:

#pragma mark - private method
-(void)p_initCircle {
  self.circleLayer.frame = CGRectMake(0, 0, self.view.width, 100);
  self.circleLayer.fillColor = nil;
  self.circleLayer.strokeColor = [UIColor whiteColor].CGColor;
  self.circleLayer.lineWidth = 2.0;

  CGPoint center = CGPointMake(self.view.center.x, 50);
  UIBezierPath *path = [UIBezierPath bezierPath];
  [path moveToPoint:CGPointMake(self.view.center.x, 35)];
  [path addArcWithCenter:center radius:15 startAngle:-M_PI_2 endAngle:M_PI * 1.5 clockwise:YES];
  CGFloat r1 = 17.0;
  CGFloat r2 = 22.0;
  for (int i = 0; i < 8 ; i++) {
    CGPoint pointStart = CGPointMake(center.x + sin((M_PI * 2.0 / 8 * i)) * r1, center.y - cos((M_PI * 2.0 / 8 * i)) * r1);
    CGPoint pointEnd = CGPointMake(center.x + sin((M_PI * 2.0 / 8 * i)) * r2, center.y - cos((M_PI * 2.0 / 8 * i)) * r2);
    [path moveToPoint:pointStart];
    [path addLineToPoint:pointEnd];
  }
  self.circleLayer.path = path.CGPath;
}

其次在拖拽的過程中，利用strokeEnd屬性逐步顯示太陽，代碼如下:

#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
  CGFloat height = -scrollView.contentOffset.y;
  if (height <= 100) {
    //偏移值小于等于100的時(shí)候，繪制對(duì)應(yīng)的路徑
    self.circleLayer.strokeEnd = height / 100.0;
  }else{
    //偏移值大于100的時(shí)候，繪制全路徑
    self.circleLayer.strokeEnd = 1.0;
  }
}

其次，讓繪制完的太陽隨著拽動(dòng)而旋轉(zhuǎn)，效果圖如下：

主要思想是在繪制完畢之后，通過affineTransform屬性，讓太陽圖層旋轉(zhuǎn)，代碼如下：

#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
  CGFloat height = -scrollView.contentOffset.y;
  [CATransaction begin];
  [CATransaction setDisableActions:YES];
  if (height <= 100) {
    //偏移值小于等于100的時(shí)候，不旋轉(zhuǎn)
    self.circleLayer.affineTransform = CGAffineTransformIdentity;
  }else{
    //偏移值小于等于100的時(shí)候，旋轉(zhuǎn)
    self.circleLayer.affineTransform = CGAffineTransformMakeRotation(-(M_PI / 720 * height - 100));
  }
  [CATransaction commit];
}

其中要注意的地方是需要禁止隱式動(dòng)畫，不然每次修改affineTransform都會(huì)自動(dòng)帶上隱式動(dòng)畫效果。

最后就是釋放后，讓tableView滾動(dòng)到固定位置，然后讓太陽持續(xù)旋轉(zhuǎn)，屏蔽tableView的拖拽事件，主要用到的是CABaseAnimation，代碼如下

-(void)p_rise {
  self.tableView.scrollEnabled = NO;
  CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
  anim.duration = 0.15;
  anim.toValue = @(M_PI / 4.0);
  anim.repeatCount = MAXFLOAT;
  [self.circleLayer addAnimation:anim forKey:nil];

}

最后在經(jīng)過一定時(shí)間后，移除圖層動(dòng)畫，取消屏蔽tableView的拖拽事件，并且讓tableView滾動(dòng)到頂部，代碼如下：

-(void)p_stop {
  self.tableView.scrollEnabled = YES;
  [self.tableView setContentOffset:CGPointMake(0, 0) animated:YES];
  [self.circleLayer removeAllAnimations];
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“iOS中如何實(shí)現(xiàn)下拉刷新動(dòng)畫”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)頁名稱：iOS中如何實(shí)現(xiàn)下拉刷新動(dòng)畫
URL地址：http://bm7419.com/article0/jjeiio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計(jì)

廣告

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