【axc】简单的线性动画绘制
在一个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】简单的线性动画绘制的更多相关文章
- iOS 动画绘制线条颜色渐变的折线图
效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...
- 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画
原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...
- 基于Babylon.js编写简单的骨骼动画生成器
使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...
- 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画
1,开始的思路 公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上.所以技术老大让我研究下如何用react实现弹幕的功能.下面我就 ...
- 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画
[源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimatio ...
- c语言描述简单的线性表,获取元素,删除元素,
//定义线性表 #define MAXSIZE 20 typedef int ElemType; typedef struct { ElemType data[MAXSIZE]; //这是数组的长度, ...
- Android简单逐帧动画Frame的实现(二)
Android简单逐帧动画Frame的实现 Android简单逐帧动画Frame的实现 1.逐帧动画 即是通过播放预先排序好的图片来实现动态的画面,感觉像是放电影. 2.实现步骤: 1. 在工程里 ...
- WPF编程,通过KeyFrame 类型制作控件线性动画的一种方法。
原文:WPF编程,通过KeyFrame 类型制作控件线性动画的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/articl ...
- 用path动画绘制水波纹
用path动画绘制水波纹 效果 源码 // // ViewController.m // PathAnimation // // Created by YouXianMing on 15/7/3. / ...
随机推荐
- details和summary
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HDU5855 Less Time, More profit(最大权闭合子图)
题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5855 Description The city planners plan to build ...
- js库写法
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...
- Repeater 双向排序
做项目的时候,DataGrid ,DataList,Repeater 三个控件都是很优秀的数据显示控件,DataGrid的方便,简单易用,功能强大,但对性能会有所影响,在loading页面的时候大 ...
- node.js 实现一个简单的登录拦截器
拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页. 下面我们简单实现一种,判断用户是否登录成功,登录不成功的用户自动重定向到登录页面. ...
- 让mysql有直接写redis能力
1.文件包下载 http://pan.baidu.com/s/1qW9DHYc 2.安装 gcc -fPIC -Wall -I/usr/local/mysql/include/mysql -I. -s ...
- Leetcode Sum Root to Leaf Numbers
Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...
- 【BZOJ】1532: [POI2005]Kos-Dicing
题意 \(n\)个人\(m\)场比赛\((1 \le n \le 10000, 0 \le m \le 10000)\),给出每场比赛的两个选手,求赢得最多的人最少赢的场数. 分析 二分最多人赢的场数 ...
- BZOJ4518: [Sdoi2016]征途
Description Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到达T地.除第m天外,每一天晚上Pine都必须在休息站过夜 ...
- PHP面向对象学习四 类的关键字
1.关键字:final 用来定义类和方法的一个重要关键字,当定义类的时候该类将不能被继承, 当用来定义方法的时候该方法将不能被重载 2.关键字:static 用来定义类的静态属性或方法,可以在类未被实 ...