前言
圖表的繪製相信大家都用的很多, 也有現成的很好的框架, 但如果定製程度特別高, 特別是動畫, 還是得自己來實現, 先看看準備實現的效果, 個人覺得還是有一些炫酷的.
另外本文不會科普最基本的概念與Api, 直接從實戰出發, 希望大家看完後都能寫出各種炫酷的效果
曲線圖
曲線圖在平時用的應該是最多的, 曲線圖會了, 折線圖就更容易了.
圖上的效果大致分3步(下面的動畫也一樣):
1.處理資料: 將得到的資料轉換為點座標資料, 這一步就不細說了
2.繪製圖形: 可以用Quartz2D或者UIKit中封裝好的UIBezierPath
3.設定動畫: 主要利用到CoreAnimation中的"strokeEnd"動畫
下面就看具體程式碼吧:
繪製圖形
/*
pointArray是所有點的陣列
color是主題色
compete繪製完成的回撥
*/
- (void)drawLayerWithPointArray:(NSMutableArray *)pointArray color:(UIColor *)color compete:(completeBlock)compete{
//初始化下面漸變色路徑
UIBezierPath *fillPath = [UIBezierPath new];
//初始化曲線的路徑
UIBezierPath *borderPath = [UIBezierPath new];
//這裡是我個人設定點數過多 忽略部分點, 讓曲線更平滑, 按需刪除
NSInteger ignoreSpace = pointArray.count / 15;
//記錄上一個點
__block CGPoint lastPoint;
//記錄上一個點的索引
__block NSUInteger lastIdx;
//漸變色路徑移動到左下角
[fillPath moveToPoint:CGPointMake(0, _chart.height)];
//遍歷所有點, 移動Path繪製圖形
[pointArray enumerateObjectsUsingBlock:^(NSValue *obj, NSUInteger idx, BOOL * _Nonnull stop) {
CGPoint point = obj.CGPointValue;
if (idx == 0) { //第一個點
[fillPath addLineToPoint:point];
[borderPath moveToPoint:point];
lastPoint = point;
lastIdx = idx;
} else if ((idx == pointArray.count - 1) || (point.y == 0) || (lastIdx + ignoreSpace + 1 == idx)) { //最後一個點最高點要畫/當點數過多時 忽略部分點
[fillPath addCurveToPoint:point controlPoint1:CGPointMake((lastPoint.x + point.x) / 2, lastPoint.y) controlPoint2:CGPointMake((lastPoint.x + point.x) / 2, point.y)]; //三次曲線
[borderPath addCurveToPoint:point controlPoint1:CGPointMake((lastPoint.x + point.x) / 2, lastPoint.y) controlPoint2:CGPointMake((lastPoint.x + point.x) / 2, point.y)];
lastPoint = point;
lastIdx = idx;
}
}];
//將漸變色區域封閉
[fillPath addLineToPoint:CGPointMake(_chart.width, _chart.height)];
[fillPath addLineToPoint:CGPointMake(0, _chart.height)];
//初始化Path的載體分別顯示路徑及填充漸變色
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = fillPath.CGPath;
[_chart.layer addSublayer:shapeLayer];
CAShapeLayer *borderShapeLayer = [CAShapeLayer layer];
borderShapeLayer.path = borderPath.CGPath;
borderShapeLayer.lineWidth = 2.f;
borderShapeLayer.strokeColor = color.CGColor;
borderShapeLayer.fillColor = [UIColor clearColor].CGColor;
[_chart.layer addSublayer:borderShapeLayer];
//設定漸變色
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = _chart.bounds;
[gradientLayer setColors:[NSArray arrayWithObjects:(id)[[color colorWithAlphaComponent:0.5] CGColor], (id)[[UIColor clearColor] CGColor], nil]];
[gradientLayer setStartPoint:CGPointMake(0.5, 0)];
[gradientLayer setEndPoint:CGPointMake(0.5, 1)];
[gradientLayer setMask:shapeLayer];
[_chart.layer addSublayer:gradientLayer];
compete(borderShapeLayer, shapeLayer, gradientLayer);
}複製程式碼以上 一個曲線圖就畫完了, 下面看看怎麼樣讓它動起來
設定動畫
- (void)animation{
//動畫之前讓曲線不隱藏
_bulletBorderLayer.hidden = NO;
//路徑動畫的KeyPath為@"strokeEnd"
//根據需要的效果, 從0-1意味著畫完整個曲線
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation1.fromValue = @(0);
animation1.toValue = @(1);
animation1.duration = 0.8;
[_bulletBorderLayer addAnimation:animation1 forKey:nil];
//動畫需要0.8秒完成, 延遲0.8秒讓漸變色動畫, 當然也可以用代理
[self performSelector:@selector(bulletLayerAnimation) withObject:nil afterDelay:0.8];
}
- (void)bulletLayerAnimation{
//動畫之前讓漸變色不隱藏
_bulletLayer.hidden = NO;
//漸變色看起來像是從上往下長出來, 實際只是透明度的變化
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation2.fromValue = @(0);
animation2.toValue = @(1);
animation2.duration = 0.4;
[_bulletLayer addAnimation:animation2 forKey:nil];
}複製程式碼整個曲線圖效果就完成了.
柱狀圖
柱狀圖其實更容易, 只是繪製這種柱狀圖稍微麻煩一點點而已,
這裡我沒有用strokeEnd, 而是直接垂直方向高度變化, 需要注意的是圖表的Y方向跟螢幕座標系的Y方向是相仿的, 所以這裡是位置動畫加上垂直方向縮放動畫的組動畫, 也就是AnimationGroup
繪製圖形
/*
wordsArrayRandom是亂序過後的詞語陣列, 記錄了每個詞語的頻次
*/
CGFloat maxHeight = _chart.height; //確定最大高度
CGFloat width = 2; //確定豎線寬度
CGFloat margin = _chart.width / 9;
NSInteger maxCount = wordsModel.count.integerValue;
[wordsArrayRandom enumerateObjectsUsingBlock:^(BAWordsModel *wordsModel, NSUInteger idx, BOOL * _Nonnull stop) {
//繪製
CGPoint orginPoint = CGPointMake(margin * idx, maxHeight); //圓點, 在矩形下邊中間
CGFloat height = maxHeight * wordsModel.count.integerValue / maxCount; //高度
//其實就是一個矩形加上一個圓形
UIBezierPath *path = [UIBezierPath new];
[path moveToPoint:orginPoint];
[path addLineToPoint:CGPointMake(path.currentPoint.x - width / 2, path.currentPoint.y)];
[path addLineToPoint:CGPointMake(path.currentPoint.x, path.currentPoint.y - height)];
[path addLineToPoint:CGPointMake(path.currentPoint.x + width, path.currentPoint.y)];
[path addLineToPoint:CGPointMake(path.currentPoint.x, orginPoint.y)];
[path addLineToPoint:orginPoint];
[path addArcWithCenter:CGPointMake(orginPoint.x, maxHeight - height) radius:width * 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.hidden = YES;
shapeLayer.fillColor = [BAWhiteColor colorWithAlphaComponent:0.8].CGColor;
[_chart.layer addSublayer:shapeLayer];
[_barLayerArray addObject:shapeLayer];
}];複製程式碼繪製的程式碼我摘出了比較重要的部分, 全部的大家可以去下載Demo檢視
設定動畫
//每間隔0.1秒, 動畫一個柱狀圖
- (void)animation{
for (NSInteger i = 0; i < 10; i++) {
CAShapeLayer *layer = _barLayerArray[9 - i];
[self performSelector:@selector(animateLayer:) withObject:layer afterDelay:i * 0.1];
}
}
- (void)animateLayer:(CAShapeLayer *)layer{
layer.hidden = NO;
//垂直方向的縮放
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
animation1.fromValue = @(0.0);
animation1.toValue = @(1.0);
//同時垂直方向座標原點在變化
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
animation2.fromValue = @(_chart.height);
animation2.toValue = @(0.0);
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 0.3;
animationGroup.animations = @[animation1, animation2];
[layer addAnimation:animationGroup forKey:nil];
}複製程式碼柱狀圖也完成了, 上面的都還好, 最後看看餅狀圖的繪製吧
餅狀圖
我們看到餅狀圖不光是需要繪製/動畫/還需要一個互動.
我們都知道CAShapeLayer是也是Layer, 本身是並不響應使用者點選的, 所以這裡需要手動處理, 還是一步步來說.
繪製圖形
本身繪製餅狀圖不復雜, 但是要繪製連線線和小圖示就麻煩了一點, 另外因為要整體移動餅狀圖, 所以每一個餅狀圖加上附帶的圖示得放到一個容器Layer裡面
/*
思路: 外面的大圓跟裡面小圓 其實是兩條比較粗的曲線, 計算好尺寸之後拼接起來,
外面的小圖示(素材)與大圓之間需要計算角度與長度才能畫線連線起來
*/
- (void)drawPieChart{
//設定大圓半徑, 小圓半徑, 中心點
_pieRadius = self.height / 2 - 8 * BAPadding - 7;
_inPieRadius = _pieRadius - 3 * BAPadding + 3.5;
_pieCenter = CGPointMake(self.width / 2, self.height / 2 + 40);
//外面餅狀陣列
NSMutableArray *pieArray = [NSMutableArray array];
//裡面餅狀陣列
NSMutableArray *inPieArray = [NSMutableArray array];
//這個陣列用來存放動畫時間, 每一段的動畫時間應該跟它所佔比成比例
NSMutableArray *durationArray = [NSMutableArray array];
//容器陣列, 動畫時方便整體移動
NSMutableArray *arcArray = [NSMutableArray array];
//起始(終止)角度
__block CGFloat endAngle = - M_PI / 2;
//_giftValueArray幾面已經是處理好的資料, 包括了每一塊的價值
[_giftValueArray enumerateObjectsUsingBlock:^(BAGiftValueModel *giftValueModel, NSUInteger idx, BOOL * _Nonnull stop) {
//建立一個容器 放外部餅狀圖與內部餅狀圖, 為動畫做準備
CALayer *arcLayer = [CALayer layer];
arcLayer.frame = self.bounds;
[arcArray addObject:arcLayer];
[self.layer addSublayer:arcLayer];
//計算每個禮物的起始 終止角度
CGFloat startAngle = endAngle;
//caculateWithStartAngle是根據起始角度與最大價值算終止角度
//_maxValue為之前計算好的總價值
[giftValueModel caculateWithStartAngle:startAngle maxValue:_maxValue];
endAngle = giftValueModel.endAngle;
//1.2是總共的動畫時間, 計算這一塊動畫所需要的時間
CGFloat duration = 1.2 * giftValueModel.totalGiftValue / _maxValue;
[durationArray addObject:@(duration)];
//當前餅狀圖的顏色
UIColor *pieColor = [BAWhiteColor colorWithAlphaComponent:giftValueModel.alpha];
UIColor *inPieColor = [BAWhiteColor colorWithAlphaComponent:giftValueModel.alpha - 0.3];
//畫圖
//外部餅狀圖路徑
UIBezierPath *piePath = [UIBezierPath bezierPath]; //內部圓環路徑
UIBezierPath *inPiePath = [UIBezierPath bezierPath];
[piePath addArcWithCenter:_pieCenter radius:_pieRadius startAngle:startAngle endAngle:endAngle clockwise:YES];
[inPiePath addArcWithCenter:_pieCenter radius:_inPieRadius startAngle:startAngle endAngle:endAngle clockwise:YES];
CAShapeLayer *pieLayer = [CAShapeLayer layer];
pieLayer.path = piePath.CGPath;
pieLayer.lineWidth = 4 * BAPadding;
pieLayer.strokeColor = pieColor.CGColor;
pieLayer.fillColor = [UIColor clearColor].CGColor;
pieLayer.hidden = YES;
CAShapeLayer *inPieLayer = [CAShapeLayer layer];
inPieLayer.path = inPiePath.CGPath;
inPieLayer.lineWidth = 14;
inPieLayer.strokeColor = inPieColor.CGColor;
inPieLayer.fillColor = [UIColor clearColor].CGColor;
inPieLayer.hidden = YES;
[arcLayer addSublayer:pieLayer];
[arcLayer addSublayer:inPieLayer];
[pieArray addObject:pieLayer];
[inPieArray addObject:inPieLayer];
//顯示各種bedge 並繪製連線線
[self drawBedgeWithGiftValueModel:giftValueModel container:arcLayer];
}];
_pieArray = pieArray;
_inPieArray = inPieArray;
_durationArray = durationArray;
_arcArray = arcArray;
}
- (void)drawBedgeWithGiftValueModel:(BAGiftValueModel *)giftValueModel container:(CALayer *)container{
//根據不同的禮物型別顯示不同的圖片
CALayer *iconLayer;
switch (giftValueModel.giftType) {
case BAGiftTypeCostGift:
iconLayer = _costIcon;
break;
case BAGiftTypeDeserveLevel1:
iconLayer = _deserve1Icon;
break;
case BAGiftTypeDeserveLevel2:
iconLayer = _deserve2Icon;
break;
case BAGiftTypeDeserveLevel3:
iconLayer = _deserve3Icon;
break;
case BAGiftTypeCard:
iconLayer = _cardIcon;
break;
case BAGiftTypePlane:
iconLayer = _planeIcon;
break;
case BAGiftTypeRocket:
iconLayer = _rocketIcon;
break;
default:
break;
}
[_bedgeArray addObject:iconLayer];
CGFloat iconDistance = container.frame.size.height / 2 - 40; //圖示到中心點的距離
CGFloat iconCenterX;
CGFloat iconCenterY;
CGFloat borderDistance = _pieRadius + 2 * BAPadding;
CGFloat lineBeginX;
CGFloat lineBeginY;
CGFloat iconBorderDistance = iconDistance - 12.5;
CGFloat lineEndX;
CGFloat lineEndY;
CGFloat moveDistance = BAPadding; //動畫移動的距離
CGFloat moveX;
CGFloat moveY;
/*
這裡計算各種引數
directAngle為之前計算起始終止角度時儲存下來的餅狀圖朝向
這個朝向需要在四個象限, 轉換為銳角, 然後通過三角函式就可以算出連線線的起點終點, 圖示的位置
*/
CGFloat realDirectAngle; //銳角
if (giftValueModel.directAngle > - M_PI / 2 && giftValueModel.directAngle < 0) { //-90° - 0°
realDirectAngle = giftValueModel.directAngle - (- M_PI / 2);
iconCenterX = _pieCenter.x + iconDistance * sin(realDirectAngle);
iconCenterY = _pieCenter.y - iconDistance * cos(realDirectAngle);
lineBeginX = _pieCenter.x + borderDistance * sin(realDirectAngle);
lineBeginY = _pieCenter.y - borderDistance * cos(realDirectAngle);
lineEndX = _pieCenter.x + iconBorderDistance * sin(realDirectAngle);
lineEndY = _pieCenter.y - iconBorderDistance * cos(realDirectAngle);
moveX = moveDistance * sin(realDirectAngle);
moveY = - moveDistance * cos(realDirectAngle);
} else if (giftValueModel.directAngle > 0 && giftValueModel.directAngle < M_PI / 2) { // 0° - 90°
realDirectAngle = giftValueModel.directAngle;
iconCenterX = _pieCenter.x + iconDistance * cos(realDirectAngle);
iconCenterY = _pieCenter.y + iconDistance * sin(realDirectAngle);
lineBeginX = _pieCenter.x + borderDistance * cos(realDirectAngle);
lineBeginY = _pieCenter.y + borderDistance * sin(realDirectAngle);
lineEndX = _pieCenter.x + iconBorderDistance * cos(realDirectAngle);
lineEndY = _pieCenter.y + iconBorderDistance * sin(realDirectAngle);
moveX = moveDistance * cos(realDirectAngle);
moveY = moveDistance * sin(realDirectAngle);
} else if (giftValueModel.directAngle > M_PI / 2 && giftValueModel.directAngle < M_PI) { // 90° - 180°
realDirectAngle = giftValueModel.directAngle - M_PI / 2;
iconCenterX = _pieCenter.x - iconDistance * sin(realDirectAngle);
iconCenterY = _pieCenter.y + iconDistance * cos(realDirectAngle);
lineBeginX = _pieCenter.x - borderDistance * sin(realDirectAngle);
lineBeginY = _pieCenter.y + borderDistance * cos(realDirectAngle);
lineEndX = _pieCenter.x - iconBorderDistance * sin(realDirectAngle);
lineEndY = _pieCenter.y + iconBorderDistance * cos(realDirectAngle);
moveX = - moveDistance * sin(realDirectAngle);
moveY = moveDistance * cos(realDirectAngle);
} else { //180° - -90°
realDirectAngle = giftValueModel.directAngle - M_PI;
iconCenterX = _pieCenter.x - iconDistance * cos(realDirectAngle);
iconCenterY = _pieCenter.y - iconDistance * sin(realDirectAngle);
lineBeginX = _pieCenter.x - borderDistance * cos(realDirectAngle);
lineBeginY = _pieCenter.y - borderDistance * sin(realDirectAngle);
lineEndX = _pieCenter.x - iconBorderDistance * cos(realDirectAngle);
lineEndY = _pieCenter.y - iconBorderDistance * sin(realDirectAngle);
moveX = - moveDistance * cos(realDirectAngle);
moveY = - moveDistance * sin(realDirectAngle);
}
//畫線
UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(lineBeginX, lineBeginY)];
[linePath addLineToPoint:CGPointMake(lineEndX, lineEndY)];
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.path = linePath.CGPath;
lineLayer.lineWidth = 1;
lineLayer.strokeColor = [BAWhiteColor colorWithAlphaComponent:0.6].CGColor;
lineLayer.fillColor = [UIColor clearColor].CGColor;
lineLayer.hidden = YES;
[_lineArray addObject:lineLayer];
[container addSublayer:lineLayer];
//儲存移動的動畫
giftValueModel.translation = CATransform3DMakeTranslation(moveX, moveY, 0);
iconLayer.frame = CGRectMake(iconCenterX - 13.75, iconCenterY - 13.75, 27.5, 27.5);
[container addSublayer:iconLayer];
}
/**
* 計算角度 與Y軸夾角 -90 - 270
*/
- (CGFloat)angleForStartPoint:(CGPoint)startPoint EndPoint:(CGPoint)endPoint{
CGPoint Xpoint = CGPointMake(startPoint.x + 100, startPoint.y);
CGFloat a = endPoint.x - startPoint.x;
CGFloat b = endPoint.y - startPoint.y;
CGFloat c = Xpoint.x - startPoint.x;
CGFloat d = Xpoint.y - startPoint.y;
CGFloat rads = acos(((a*c) + (b*d)) / ((sqrt(a*a + b*b)) * (sqrt(c*c + d*d))));
if (startPoint.y > endPoint.y) {
rads = -rads;
}
if (rads < - M_PI / 2 && rads > - M_PI) {
rads += M_PI * 2;
}
return rads;
}
//兩點之間距離
- (CGFloat)distanceForPointA:(CGPoint)pointA pointB:(CGPoint)pointB{
CGFloat deltaX = pointB.x - pointA.x;
CGFloat deltaY = pointB.y - pointA.y;
return sqrt(deltaX * deltaX + deltaY * deltaY );
}複製程式碼上面畫整體的過程有點小複雜, 因為涉及了各種角度轉換 計算, 以及為之後動畫 互動做準備, 做好了前面的準備, 再進行動畫跟互動處理就容易不少.
設定動畫
動畫的過程其實是餅狀圖按順序一個個執行前面畫曲線所用的strokeEnd動畫, 然後我們小圖示以及我們畫的連線線透明度動畫展現.
- (void)animation{
NSInteger i = 0;
CGFloat delay = 0;
//遍歷所有的餅狀圖, 按順序執行動畫
for (CAShapeLayer *pieLayer in _pieArray) {
CAShapeLayer *inPieLayer = _inPieArray[i];
CGFloat duration = [_durationArray[i] floatValue];
[self performSelector:@selector(animationWithAttribute:) withObject:@{@"layer" : pieLayer, @"duration" : @(duration)} afterDelay:delay inModes:@[NSRunLoopCommonModes]];
[self performSelector:@selector(animationWithAttribute:) withObject:@{@"layer" : inPieLayer, @"duration" : @(duration)} afterDelay:delay inModes:@[NSRunLoopCommonModes]];
delay += duration;
i++;
}
[self performSelector:@selector(animationWithBedge) withObject:nil afterDelay:delay];
}
//根據傳入的時間以及餅狀圖路徑動畫
- (void)animationWithAttribute:(NSDictionary *)attribute{
CAShapeLayer *layer = attribute[@"layer"];
CGFloat duration = [attribute[@"duration"] floatValue];
layer.hidden = NO;
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation1.fromValue = @(0);
animation1.toValue = @(1);
animation1.duration = duration;
[layer addAnimation:animation1 forKey:nil];
}
//透明度漸變展示各種小圖示
- (void)animationWithBedge{
NSInteger i = 0;
for (CAShapeLayer *lineLayer in _lineArray) {
CALayer *bedgeLayer = _bedgeArray[i];
lineLayer.hidden = NO;
bedgeLayer.hidden = NO;
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation1.fromValue = @(0);
animation1.toValue = @(1);
animation1.duration = 0.4;
[lineLayer addAnimation:animation1 forKey:nil];
[bedgeLayer addAnimation:animation1 forKey:nil];
i++;
}
}複製程式碼處理互動
互動的思路其實很清晰, 判斷一個餅狀圖被點選了有2個條件:
1.點選的點與圓心之間的連線與-90°(之前設定的基準)之間的夾角是否在之前計算的餅狀圖起始終止角度之間.
2.點選的點與圓心的距離是否大於內圓的半徑(最內), 小於外圓的半徑(最外).
我們發現其實這些之前已經計算好了, 所以直接計算這個點的引數
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CGPoint touchPoint = [[touches anyObject] locationInView:self];
[self dealWithTouch:touchPoint];
}
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CGPoint touchPoint = [[touches anyObject] locationInView:self];
[self dealWithTouch:touchPoint];
}
- (void)dealWithTouch:(CGPoint)touchPoint{
CGFloat touchAngle = [self angleForStartPoint:_pieCenter EndPoint:touchPoint];
CGFloat touchDistance = [self distanceForPointA:touchPoint pointB:_pieCenter];
//判斷是否點選了魚丸
if (touchDistance < _inPieRadius - BAPadding) {
if (self.isFishBallClicked) {
_giftPieClicked(BAGiftTypeNone);
} else {
_giftPieClicked(BAGiftTypeFishBall);
}
[self animationFishBall];
return;
}
//求點選位置與-90°的夾角 與 之前的圓弧對比
if (touchDistance > _inPieRadius - BAPadding && touchDistance < _pieRadius + 2 * BAPadding) {
[_giftValueArray enumerateObjectsUsingBlock:^(BAGiftValueModel *giftValueModel, NSUInteger idx, BOOL * _Nonnull stop) {
if (giftValueModel.startAngle < touchAngle && giftValueModel.endAngle > touchAngle) {
//isMovingOut用來標記是否已經移動出去了
if (giftValueModel.isMovingOut) {
_giftPieClicked(BAGiftTypeNone);
} else {
_giftPieClicked(giftValueModel.giftType);
}
[self animationMove:_arcArray[idx] giftValueModel:giftValueModel];
*stop = YES;
}
}];
}
}
//將傳入的餅狀圖移動, 並且遍歷所有餅狀圖, 聯動收回之前的餅狀圖
- (void)animationMove:(CALayer *)arcLayer giftValueModel:(BAGiftValueModel *)giftValueModel{
if (giftValueModel.isMovingOut) {
arcLayer.transform = CATransform3DIdentity;
giftValueModel.movingOut = NO;
} else {
arcLayer.transform = giftValueModel.translation;
giftValueModel.movingOut = YES;
[_arcArray enumerateObjectsUsingBlock:^(CALayer *arc, NSUInteger idx, BOOL * _Nonnull stop) {
BAGiftValueModel *giftValue = _giftValueArray[idx];
if (![arcLayer isEqual:arc] && giftValue.isMovingOut) {
[self animationMove:arc giftValueModel:giftValue];
}
}];
if (self.isFishBallClicked) {
[self animationFishBall];
}
}
}複製程式碼結語
至此, 所有炫酷的動態可互動圖表就已經完成了, 其實這個App裡面細節動畫處理還挺多的, 例如滑動時背景漸變色的角度改變, 漸變色的動畫, 包括一個有點酷的引導頁, 啟動頁.
專案已上線: 叫直播伴侶, 可以下載下來玩玩,
另外程式碼也是開源的:
github.com/syik/Bullet… 覺得有意思的可以打賞一個Star~
專案中有一個有意思的功能, 中文語義近似的分析可以看看我的上一篇文章.
發現大家對動畫更感興趣, 下一篇講講動態的啟動頁與炫酷的引導頁動畫.
