用CAShapeLayer和UIBezierPath和CABaseAnimation制作动画折线图

 // 创建layer并设置属性
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth =  2.0f;
    layer.lineCap = kCALineCapRound;
    layer.lineJoin = kCALineJoinRound;
    layer.strokeColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];

    // 创建贝塞尔路径~
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 100)];
    [path addLineToPoint:CGPointMake(100, 200)];
    [path addLineToPoint:CGPointMake(200, 50)];
    [path addLineToPoint:CGPointMake(240, 150)];
    [path addLineToPoint:CGPointMake(300, 120)];

    // 关联layer和贝塞尔路径~
    layer.path = path.CGPath;

    // 创建Animation
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @(0.0);
    animation.toValue = @(1.0);
    layer.autoreverses = NO;
    animation.duration = 2.0;

    // 设置layer的animation
    [layer addAnimation:animation forKey:nil];

    // 第一种设置动画完成,不移除结果的方法
    //    animation.fillMode = kCAFillModeForwards;
    //    animation.removedOnCompletion = NO;

    // 第二种
    layer.strokeEnd = 1;
时间: 2024-10-08 09:04:45

用CAShapeLayer和UIBezierPath和CABaseAnimation制作动画折线图的相关文章

使用Echarts几分钟制作出折线图、饼图、柱状图等

ECharts,缩写来自Enterprise Charts. ECharts,不仅是国内关注度最高的开源项目,还是中国第一个也是目前唯一一个入选了Github Explorer Data Visualization板块的开源项目.这里咱们结合上篇提到的Bootstrap简单栅格框架,来做一个小小的布局.学以致用嘛.从来不喜欢赘述,直接上代码,一切的解释,请看代码注释: <script type="text/javascript" src="js/jquery.min.j

iOS学习:CAShapeLayer与UIBezierPath动画

CAShapeLayer与UIBezierPath动画: CAShapeLayer与UIBezierPath的动画,就离不开 CABasicAnimation:也将会使用到 strokeEnd.strokeStart.lineWidth 三个属性: 先做一条贝塞尔曲线: UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(40, 80)]; [path addCurveToPoint:CGPo

iOS开发——图形编程Swift篇&amp;CAShapeLayer实现圆形图片加载动画

CAShapeLayer实现圆形图片加载动画 几个星期之前,Michael Villar在Motion试验中创建一个非常有趣的加载动画. 下面的GIF图片展示这个加载动画,它将一个圆形进度指示器和圆形渐现动画结合.这个组合的效果有趣,独一无二和有点迷人. 这个教程将会教你如何使用Swift和Core Animatoin来重新创建这个效果.让我们开始吧! 基础 首先下载这个教程的启动项目,然后编译和运行.过一会之后,你应该看到一个简单的image显示: 这 个启动项目已经预先在恰当的位置将view

iOS关于CAShapeLayer与UIBezierPath的知识内容

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装.使用此类可以定义常见的圆形.多边形等形状 .我们使用直线.弧(arc)来创建复杂的曲线形状.每一个直线段或者曲线段的结束的地方是下一个的开始的地方.每一个连接的直线或者曲线段的集

IOS CAShapeLayer CAGradientLayer UIBezierPath 使用实例

CGRect rect = CGRectMake(100, 100, 100, 100); UIView * bgView = [[UIView alloc]initWithFrame:rect]; bgView.backgroundColor = [UIColor grayColor]; [self.view addSubview:bgView]; CAShapeLayer * trackLayer = [CAShapeLayer layer]; trackLayer.frame = bgVi

前端制作动画的几种方式(css3,js)

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css的transition. 语法: transition: property duration timing-function delay; property:填写需要变化的css属性如:width,line-height,font-size,color等; duration:完成过渡效果需要的时间(

Solidworks如何制作动画

1点击窗口下方的"运动算例1"可以弹出动画的面板,右击该"运动算例1"还可以对这个动画窗口重命名等操作. 2 我们从最简单的动画开始,假设图示装配体,想要把它从完全收缩到完全张开,再收回做成一个动画 3 我们知道只有在物资动力的情况下移动零部件才能实现带动 4 单纯的标准拖动并不会考虑限制(这在制作动画的时候一般是不允许的,因为我们要的是模拟真实的运动,而真实的运动不可能拖出来) 5 然而在运动算例中物资动力并不可选(也就是说我们不可能在物资动力的情况下拖动一下,然

CSS3制作动画的三个属性

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲继续第三个动画属性Animation的学习,单从Animation字面上的意思,我们就知道是“动画”的意思.但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl

html5 requestAnimationFrame制作动画:旋转风车

详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方便的实现动画,这些技术手段在对于简单的或者对流畅性要求不高的动画不会有什么问题,然而随着用户体验的提高,我们制作的动画效果有了更高的要求,那么对于比较复杂的而且具有较高流畅性的动画效果,用以上的两种方法就有点捉襟见肘了.对于质量较高的动画效果的实现,我们又不想用falsh,那怎么办呢