在一个View上绘制一条直线  然后做出相应的动画效果  可以这样封装三个方法:

/**

*  划线工具

*

*  @param lineArray   线段的点数组 NSValue 类型  默认第一个点为起点

*  @param time        划线时间

*  @param strokeColor 线段颜色

*/

- (void)axcBaseAniamtionWithLinePointArray:(NSArray <NSValue *> *)lineArray time:(CGFloat )time strokeColor:(UIColor *)strokeColor{

if (lineArray.count <= 1) {

if (_axcBasePrintLog) {

NSLog(@"%@:\n你的数组对象少于一个,无法划线!",self);

}

return;

}

if (_axcBasePrintLog) {

NSLog(@"%@:\n当前正在划线\t方法名:axcBaseAniamtionWithLinePointArray\t起点:%@\t划线时间:%.2f,颜色:%@\n",self,NSStringFromCGPoint([lineArray[0] CGPointValue]),time,strokeColor);

}

UIBezierPath *_path=[UIBezierPath bezierPath];

CGPoint point1 = [lineArray[0] CGPointValue];

[_path moveToPoint:point1];

for (int i = 1; i < lineArray.count; i ++) {

[_path addLineToPoint: [lineArray[i] CGPointValue]];

if (_axcBasePrintLog) {

NSLog(@"%@:遍历划线点(%d):%@\n",self,i + 1,NSStringFromCGPoint([lineArray[i] CGPointValue]));

}

}

CAShapeLayer *shapeLayer=[CAShapeLayer layer];

shapeLayer.path=_path.CGPath;

shapeLayer.fillColor=[UIColor clearColor].CGColor;//填充颜色

shapeLayer.strokeColor=strokeColor.CGColor;//边框颜色

[self.view.layer addSublayer:shapeLayer];

// 动画

CABasicAnimation *pathAniamtion = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

// 时间

pathAniamtion.duration = time;

pathAniamtion.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

pathAniamtion.fromValue = [NSNumber numberWithFloat:0.0f];

// 划线段的百分之多少

pathAniamtion.toValue = [NSNumber numberWithFloat:1];

pathAniamtion.autoreverses = NO;

[shapeLayer addAnimation:pathAniamtion forKey:nil];

}

/**

*  圆规工具

*

*  @param Center      中心点

*  @param radius      半径

*  @param startAngle  开始角度

*  @param endAngle    结束角度

*  @param clockwise   是否顺时针

*  @param time        作图时间

*  @param strokeColor 颜色

*/

- (void)axcBaseAniamtionArcWithCenter:(CGPoint )Center

radius:(CGFloat )radius

startAngle:(CGFloat )startAngle

endAngle:(CGFloat )endAngle

clockwise:(BOOL )clockwise

time:(CGFloat )time

strokeColor:(UIColor *)strokeColor{

UIBezierPath *_path=[UIBezierPath bezierPath];

[_path addArcWithCenter:Center radius:radius startAngle:startAngle endAngle:endAngle clockwise:clockwise];

CAShapeLayer *shapeLayer=[CAShapeLayer layer];

shapeLayer.path=_path.CGPath;

shapeLayer.fillColor=[UIColor clearColor].CGColor;//填充颜色

shapeLayer.strokeColor=strokeColor.CGColor;//边框颜色

[self.view.layer addSublayer:shapeLayer];

// 动画

CABasicAnimation *pathAniamtion = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

// 时间

pathAniamtion.duration = time;

pathAniamtion.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

pathAniamtion.fromValue = [NSNumber numberWithFloat:0.0f];

// 划线段的百分之多少

pathAniamtion.toValue = [NSNumber numberWithFloat:1];

pathAniamtion.autoreverses = NO;

[shapeLayer addAnimation:pathAniamtion forKey:nil];

}

/**

*  清除所有划线

*/

- (void)axcBaseClearAllShapeLayer{

if (_axcBasePrintLog) {

NSLog(@"%@:\n当前执行清除该界面上的所有划线!",self);

}

NSArray *shapeLayerArray = self.view.layer.sublayers;

for (int i = 0; i < shapeLayerArray.count; i ++) {

if ([shapeLayerArray[i] isKindOfClass:[CAShapeLayer class]]) {

[shapeLayerArray[i] removeFromSuperlayer];

}

}

}

【axc】简单的线性动画绘制的更多相关文章

  1. iOS 动画绘制线条颜色渐变的折线图

    效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...

  2. 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画

    原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...

  3. 基于Babylon.js编写简单的骨骼动画生成器

    使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...

  4. 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画

    1,开始的思路 公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上.所以技术老大让我研究下如何用react实现弹幕的功能.下面我就 ...

  5. 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画

    [源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimatio ...

  6. c语言描述简单的线性表,获取元素,删除元素,

    //定义线性表 #define MAXSIZE 20 typedef int ElemType; typedef struct { ElemType data[MAXSIZE]; //这是数组的长度, ...

  7. Android简单逐帧动画Frame的实现(二)

    Android简单逐帧动画Frame的实现   Android简单逐帧动画Frame的实现 1.逐帧动画 即是通过播放预先排序好的图片来实现动态的画面,感觉像是放电影. 2.实现步骤: 1. 在工程里 ...

  8. WPF编程,通过KeyFrame 类型制作控件线性动画的一种方法。

    原文:WPF编程,通过KeyFrame 类型制作控件线性动画的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/articl ...

  9. 用path动画绘制水波纹

    用path动画绘制水波纹 效果 源码 // // ViewController.m // PathAnimation // // Created by YouXianMing on 15/7/3. / ...

随机推荐

  1. UVa1161 Objective: Berlin(最大流)

    题目 Source https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  2. 【Oracle】在WIN NT 64位环境下安装win64_11gR2_database。并用PL/SQL连接

    因为现在大多数服务器环境均为64位环境,而且有一部分使用的windows server的环境,在此做了一番小研究,如何在64位环境下安装oracle11g_64bit服务端 (1)首先www.orac ...

  3. No configuration found for the specified action解决办法

    http://blog.csdn.net/carefree31441/article/details/4857546 使用Struts2,配置一切正常,使用常用tag也正常,但是在使用<s:fo ...

  4. ACM 懒省事的小明

    懒省事的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述       小明很想吃果子,正好果园果子熟了.在果园里,小明已经将所有的果子打了下来,而且按果子的不同种 ...

  5. android实现两个页面跳转

    1.实现两个界面之间转换 在安卓当中,最常见的就是按下按钮之后跳转到第二个界面. 关键代码很简单: 这是以bn2按钮为例,当前Activity为MainActivity,跳转到Registration ...

  6. BZOJ4515: [Sdoi2016]游戏

    Description Alice 和 Bob 在玩一个游戏. 游戏在一棵有 n 个点的树上进行.最初,每个点上都只有一个数字,那个数字是 123456789123456789. 有时,Alice 会 ...

  7. CSS_css sprite原理优缺点及使用

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

  8. SQL常用语句总结

    -------查询一个表有多少列select count(*) from sysobjects a join syscolumns bon a.id=b.idwhere a.name='XXX' -- ...

  9. javascrit2.0完全参考手册(第二版) 第2章第2节 语言特性

    脚本执行顺序     js代码是按照它们在html中出现的顺序一行一行被解释的.这表明把函数定义和变量声明放到<head>中会很好.这保证了函数的代码和事件相关的处理程序不会立即执行. 大 ...

  10. HTTP Methods: GET v.s POST

    HTTP works as a request-response protocol between a client and server. A web browser may be the clie ...