美文网首页
iOS利用 正弦函数 绘制波形图 以及 波形动画

iOS利用 正弦函数 绘制波形图 以及 波形动画

作者: 帅气的阿斌 | 来源:发表于2017-09-27 19:06 被阅读603次

    基础:

    y = a*sin(bx + c) + d;

    a:表示 a*sin(bx + c) 的最大值和最小值a -a

    b: sin(x) 正弦图像 一个波浪宽度为π,也就是说

    一个波浪宽度= π/b

    c:正数,向左平移c个单位;负数,向右平移c个单位

    d:正弦图像向上平移

    关键点1:注意iOS开发的x、y轴,和普通坐标系是不一样的。

    关键点2:波形动画用到的属性 c,c表示弦水平方向左右平移。

    关键点3:贝塞尔曲线的闭合,贝塞尔曲线的闭合默认首末两点连接,所以在绘制波形图时,要注意手动设置首点和末点,否则可能导致闭合不准确,颜色填充不是向下填充!

    //一个简单的波形图样例  贝塞尔曲线的创建和CAShapeLayer的创建只需要一次 再次进入循环是重置贝塞尔曲线和重新设置layer的path即可

    - (void)viewDidLoad {

          [superview DidLoad];

          path= [UIBezierPath bezierPath];

          refreshLink= [CADisplayLink displayLinkWithTarget:selfselector:@selector(runloop)];

          [refreshLink addToRunLoop: [NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

    }

    - (void)runloop{

          static CGFloat p =0;

          [path removeAllPoints];//重置path

          if(layer==nil) {//第一次创建CAShapeLayer

                layer= [CAShapeLayer layer];

                layer.strokeColor= [UIColor greenColor].CGColor;

                layer.fillColor= [UIColor greenColor].CGColor;

                [self.view.layer addSublayer:layer];

    }

    for(inti=0; i<=200; i++) {//绘制正弦图像,runloop运行一次,则绘制一次完整的正弦图

          CGFloaty =10*sin(i*M_PI/100+p)+100;//每循环一次p值都会改变来达到x轴平移的目的

          if(i==0) {

                [path moveToPoint:CGPointMake(0,150)];//手动设置首点

                [pathaddLineToPoint:CGPointMake(i, y)];

    }elseif(i==200){

                [path addLineToPoint:CGPointMake(200,150)];//手动设置末点

    }else{

                [path addLineToPoint:CGPointMake(i, y)];

    }

    }

          [path closePath];

          layer.path=path.CGPath;

          p+=0.2;

    }

    相关文章

      网友评论

          本文标题:iOS利用 正弦函数 绘制波形图 以及 波形动画

          本文链接:https://www.haomeiwen.com/subject/hxxpextx.html