欢迎关注
最酷最in的云资讯

贝塞尔曲线的动画运用


背景:因为公司需要做等级切换查看对应的权益,需要做一个曲线运动的一个动画形式,现决定用贝塞尔曲线的动画和CAKeyframeAnimation 动画的形式实现

上图

贝塞尔曲线的动画运用
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;
}
  • 创建等级对应的数据模型,我这里使用的json本地数据进行建模了

   // 获取文件路径
    NSString *path = [[NSBundle mainBundle] pathForResource:@"grade" ofType:@"json"];
    // 将文件数据化
    NSData *data = [[NSData alloc] initWithContentsOfFile:path];
    // 对数据进行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;
  • 动画执行后真实的所在位置并不会发生改变,我们需要对动画完成后对当前的图片做位置修改

   //位置纠正
        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

作者:只因为趁年轻
链接:https://www.swifty.cc/p/412dd8e33d13

赞(0) 打赏
未经允许不得转载:云微资讯 » 贝塞尔曲线的动画运用
分享到: 更多 (0)

云微资讯 科技新媒体资讯平台

关于我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏