貝塞爾曲線的動畫運用

背景：因為公司需要做等級切換查看對應的權益雏婶，需要做一個曲線運動的一個動畫形式搂抒，現(xiàn)決定用貝塞爾曲線的動畫和CAKeyframeAnimation 動畫的形式實現(xiàn)

上圖

grade.gif

制作曲線路徑

不想用 - (void)drawRect:(CGRect)rect 的形式畫圓糠聪，我這里就直接用CAShapeLayer寫了巍糯。
首先繪制一個半圓形當背景呻右，使用CAShapeLayer 和 UIBezierPath繪制曲線路徑阵难，聲明圓的半徑 radius 圓心所在的點centerPoint饶套。

//懶加載
- (CAShapeLayer *)shapeLayer
{
    if (!_shapeLayer) {
        _shapeLayer = [CAShapeLayer layer];
        _shapeLayer.path = self.bezierPath.CGPath;
        _shapeLayer.lineWidth = 3;
        _shapeLayer.fillColor = [UIColor clearColor].CGColor;
        _shapeLayer.strokeColor = [UIColor colorWithWhite:1 alpha:0.6].CGColor;
    }
    return _shapeLayer;
}

-(UIBezierPath *)bezierPath
{
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:self.centerPoint
                                   radius:self.radius
                               startAngle:0
                                 endAngle:M_PI
                                clockwise:YES];
    return bezierPath;
}

創(chuàng)建等級對應的數(shù)據(jù)模型漩蟆，我這里使用的json本地數(shù)據(jù)進行建模了

    // 獲取文件路徑
    NSString *path = [[NSBundle mainBundle] pathForResource:@"grade" ofType:@"json"];
    // 將文件數(shù)據(jù)化
    NSData *data = [[NSData alloc] initWithContentsOfFile:path];
    // 對數(shù)據(jù)進行JSON格式化并返回字典形式
    NSDictionary *result = [NSJSONSerialization JSONObjectWithData:data options:kNilOptions error:nil];

這里的動畫形式主要是通過貝塞爾的角度計算的

        double angle = gradeInfo.angle.doubleValue;
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
        animation.keyPath = @"position";
        animation.duration = 0.6;
        animation.removedOnCompletion = NO;
        animation.fillMode = kCAFillModeForwards;
        // 設置貝塞爾曲線路徑
        UIBezierPath *circylePath = [[UIBezierPath alloc] init];
        [circylePath addArcWithCenter:self.centerPoint radius:self.radius startAngle:angle *M_PI endAngle:(angle +angleTrend)*M_PI clockwise:clockwise];
        animation.path = circylePath.CGPath;

動畫執(zhí)行后真實的所在位置并不會發(fā)生改變，我們需要對動畫完成后對當前的圖片做位置修改

        //位置糾正
        CGFloat a = (gradeInfo.angle.floatValue + angleTrend) * M_PI;
        CGPoint point = CGPointMake(self.centerPoint.x + cos(a) *(self.radius), self.centerPoint.y + sin(a) *(self.radius));
        gradeInfo.iconImage.center = point;

好了妓蛮，結束怠李！
GitHub地址: https://github.com/zyaxuan/NTGrade

最后編輯于：2019.03.11 16:11:54

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者