IOS开发-属性动画和关键帧动画的使用
CAMediaTiming是一个协议(protocol),CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类。
继承关系:

CoreAnmiation 核心动画 简写CA CoreAnimation 中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍。也就是说,使用少量的代码就可以实现非常强大的功能
我们之前使用过的UIView动画,其实本质上也是CoreAnimation实现的,只是对他里面的动画进行了封装
视图(UIView)支持动画的属性有 frame bounds center alpha transform 以及动画延迟 动画曲线( 淡入淡出 动画过渡) 重复次数
方法:
**********************************************************************
+ (void)setAnimationDelegate:(id)delegate;代理
+ (void)setAnimationWillStartSelector:(SEL)selector 当动画即将开始时,执行delegate对象的selector,并且把beginAnimations:context:中传入的参数传进selector
+ (void)setAnimationDidStopSelector:(SEL)selector 当动画结束时,执行delegate对象的selector,并且把beginAnimations:context:中传入的参数传进selector
+ (void)setAnimationDuration:(NSTimeInterval)duration 动画的持续时间,秒为单位
+ (void)setAnimationDelay:(NSTimeInterval)delay 动画延迟delay秒后再开始
+ (void)setAnimationStartDate:(NSDate *)startDate 动画的开始时间,默认为now
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve 动画的节奏控制
+ (void)setAnimationRepeatCount:(float)repeatCount 动画的重复次数
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses 如果设置为YES,代表动画每次重复执行的效果会跟上一次相反
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache 设置视图view的过渡效果, transition指定过渡类型, cache设置YES代表使用视图缓存,性能较好 */
**********************************************************************
但CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类。CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup(CAPropertyAnimation也不能直接使用,需要使用它的两个子类)
说明以上所有的方法和它的属性,子类都可以使用。
使用案例:
-(void)viewanimation1{
/**
* 动画方向
*
UIViewAnimationTransitionNone,
UIViewAnimationTransitionFlipFromLeft,从左翻转
UIViewAnimationTransitionFlipFromRight,从右面翻转
UIViewAnimationTransitionCurlUp,向上翻页
UIViewAnimationTransitionCurlDown,向下翻页
*/
/**
* 过渡状态
*
UIViewAnimationCurveEaseInOut,慢进慢出 // slow at beginning and end
UIViewAnimationCurveEaseIn,慢进 // slow at beginning
UIViewAnimationCurveEaseOut, 慢出 // slow at end
UIViewAnimationCurveLinear 匀速
*/
//*********************************************************************
// 注意: 执行一个动画 必须有一个开始动画 和提交动画 才能运行一个动画
// UIView的过渡动画·······
// 开始动画
[UIView beginAnimations:@"jk" context:nil];
// 设置动画的方向
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:imageView cache:YES];
// 设置动画持续时间
[UIView setAnimationDuration:];
// 设置动画效果过渡的状态
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
// 提交动画
[UIView commitAnimations];
// 检测 动画结束
[UIView setAnimationDelegate:self];
// 动画快要结束时,调用另一个方法
[UIView setAnimationDidStopSelector:@selector(finishanimation)];
}
CAPropertyAnimation属性动画 、
- 在UIView中有一个layer属性作为图层,根图层没有隐式动画 根图层上可以放其他子图层,在UIView中所有能够看到的内容都包含在layer中
- Core Animation是直接作用在CALayer上的,并非UIView。
- CAlayer负责视图中显示的内容和动画
- UIView负责监听和响应事件
- 由于CALayer在设计之初就考虑它的动画操作功能,CALayer很多属性在修改时都能形成动画效果,这种属性称为“隐式动画属性”。
CALayer在修改他的属性时都能形成动画效果 这种动画效果 叫做隐式动画。
/**
* 属性 说明 是否支持隐式动画
anchorPoint 锚点、定位点 锚点的描述是相对于 *自己* x、y位置比例而言的 默认在图像中心点(0.5,0.5)的位置 决定图层的哪一个点 显示在中心点的位置 是
backgroundColor 图层背景颜色 是
borderColor 边框颜色 是
borderWidth 边框宽度 是
bounds 图层大小 是
contents 图层显示内容,例如可以将图片作为图层内容显示 是
contentsRect 图层显示内容的大小和位置 是
cornerRadius 圆角半径 是
doubleSided 图层背面是否显示,默认为YES 否
frame 图层大小和位置,不支持隐式动画,所以CALayer中很少使用frame,通常使用bounds和position代替 否
hidden 是否隐藏 是
mask 图层蒙版 是
maskToBounds 子图层是否剪切图层边界,默认为NO 是
opacity 透明度 ,类似于UIView的alpha 是
position 决定图层在父视图的位置 图层位于 *父视图* 中心点位置,类似于UIView的center 是
shadowColor 阴影颜色 是
shadowOffset 阴影偏移量 是
shadowOpacity 阴影透明度,注意默认为0,如果设置阴影必须设置此属性 是
shadowPath 阴影的形状 是
shadowRadius 阴影模糊半径 是
sublayers 子图层 是
sublayerTransform 子图层形变 是
transform 图层形变 是
* @ 以上支持隐式动画的属性 本质是这些属性的变动默认隐含了CABasicAnimation动画实现
1.CABasicAnimation的使用:
#pragma mark-------------------改变position--------------------
-(void)animation1{ // ***************初始化*****************
// 注意:CABasicAnimation 使用属性动画 需告诉它 我们要改变的属性 是哪个(把属性当做字符串传递)这里很重要,字符串不 能有错
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"]; // ***************初始化*****************
// NSValue 有可以把结构体转为id类型
// 设置动画要到那一个位置
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(, showlayer.position.y)];
animation.duration = ; // 以动画效果出发 以动画效果出发回到初始位置
animation.autoreverses = YES;
//
// 如果要使用 fillMode 必须要把removedOnCompletion禁用
animation.removedOnCompletion = NO; // 以动画效果出发 不会以动画效果出发回到初始位置
animation.fillMode = kCAFillModeRemoved;
//****************************
// kCAFillModeForwards 不会回来了
// kCAFillModeBackwards 会返回来
// kCAFillModeBoth 不会回来了
// kCAFillModeRemoved 会返回来
//**************************** // 设置 慢进慢出
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
// 添加一个动画到图层
[showlayer addAnimation:animation forKey:@"move ke bu xie"]; } #pragma mark-------------------改变transform的z的旋转--------------------
-(void)animation3{ // 基础动画师继承于属性动画的 通过属性名当作一个key来确定围绕那个属性 进行动画
CABasicAnimation *antimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
antimation.fromValue = @(-0.1);//从这位置出发
antimation.toValue = @(0.1);//到这位置结束
antimation.duration = 0.05;//持续时间
antimation.repeatCount = ;//重复次数
// 是否以动画的效果方式返回
antimation.autoreverses = YES;
// 给图层添加动画
[showlayer addAnimation:antimation forKey:@"shake"];
}
2.CAKeyframeAnimation(关键帧动画)的使用:
- 关键帧动画 可以让我们精准的控制动画效果 它的原理是把动画序列里面比较关键的帧提取出来,设置它的动画效果
- 关键帧: 1. path属性 执行动画轨迹的路径 2.value属性 执行动画轨迹的路径
#import "ViewController.h" @interface ViewController ()
{
CALayer *petalayer;
}
@end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// 背景图
UIImageView *iamgeView = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds];
iamgeView.image = [UIImage imageNamed:@""];
[self.view addSubview:iamgeView];
[self addflower];
} -(void)addflower
{
UIImage *petal = [UIImage imageNamed:@""];
petalayer = [[CALayer alloc]init];
petalayer.bounds = CGRectMake(, ,petal.size.width , petal.size.height);
petalayer.position = CGPointMake(, );
petalayer.contents = (id)petal.CGImage;
[self.view.layer addSublayer:petalayer]; } -(void)dropAanimation{
//初始化
CAKeyframeAnimation *drop = [CAKeyframeAnimation animationWithKeyPath:@"position"];
drop.duration = ; // 1.******************************************************************
// 放入改变position的几个点
drop.values = @[[NSValue valueWithCGPoint:CGPointMake(, )],[self getPointWithX: andY:],[self getPointWithX:- andY:],[self getPointWithX: andY:]];
//********************************************************************* //2.*****************也可以采用路径的方式也可以达到效果**********************
// 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 给路径添加一个起始点
CGPathMoveToPoint(path, NULL, petalayer.position.x, petalayer.position.y);
// 有起始点 可以通过起始点 到另外一个点 画一条线
CGPathAddLineToPoint(path, NULL, petalayer.position.x + , petalayer.position.y + );
CGPathAddLineToPoint(path, NULL, petalayer.position.x - , petalayer.position.y - );
// 关闭路径
CGPathCloseSubpath(path);
drop.path = path; // 释放路径
path = nil;
// ******************************************************************** drop.removedOnCompletion = NO;
drop.fillMode = kCAFillModeBoth;//不返回
[petalayer addAnimation:drop forKey:@"djg"]; } - (NSValue *)getPointWithX:(CGFloat)x andY:(CGFloat)y{ return [NSValue valueWithCGPoint:CGPointMake(x+petalayer.position.x , y+petalayer.position.y)];
} -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
[self dropAanimation];
} @end
IOS开发-属性动画和关键帧动画的使用的更多相关文章
- ios基础动画、关键帧动画、动画组、转场动画等
概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...
- 核心动画基础动画(CABasicAnimation)关键帧动画
1.在iOS中核心动画分为几类: 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation) 动画组(CAAnimationGroup) 转场动画(CATran ...
- html5--6-55 动画效果-关键帧动画
html5--6-55 动画效果-关键帧动画 实例 @charset="UTF-8"; div{ width: 150px; height: 150px; font-size: 2 ...
- iOS开发笔记10:圆点缩放动画、强制更新、远程推送加语音提醒及UIView截屏
1.使用CAReplicatorLayer制作等待动画 CALayer+CABasicAnimation可以制作很多简单的动画效果,之前的博客中介绍的“两个动画”,一个是利用一张渐变色图片+CABas ...
- iOS:核心动画之关键帧动画CAKeyframeAnimation
CAKeyframeAnimation——关键帧动画 关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是: –CABasicAnimation只能 ...
- 【Swift】IOS开发中自定义转场动画
在IOS开发中,我们model另外一个控制器的时候,一般都使用默认的转场动画. 其实我们可以自定义一些转场动画.达到不同的转场效果. 步骤如下:(photoBrowser是目标控制器) 1.在源控制器 ...
- WPF动画之关键帧动画(2)
XAML代码: <Window x:Class="关键帧动画.MainWindow" xmlns="http://schemas.microsoft.com/win ...
- 11.css3动画--自定义关键帧动画--@keyframes/animation
@keyframes设定动画规则,可以理解为动画的剧本. Name.自定义一个动画名称. 0-100%/from...to.... 需要变化的css样式属性. animation所有动画属性的简写.( ...
- IOS开发学习笔记022-imageView实现动画
这里要播放的动画是很多张连续的动画,连续播放就会显示出动画效果. 大概过程是: 新建一个single view application ,然后添加一个image View控件到视图.给image vi ...
随机推荐
- 【转】 HTTP 协议简介
一.TCP/IP 协议介绍 在介绍 HTTP 协议之前,先简单说一下TCP/IP协议的相关内容.TCP/IP协议是分层的,从底层至应用层分别为:物理层.链路层.网络层.传输层和应用层,如下图所示: 从 ...
- eclipse注释模板及格式化模板导入步骤
1.点击Window->Preference->Java -> Code Style -> Formatter 2.点击右侧Import选择*.xml模板文件导入即可 3.如果 ...
- linux笔记:权限管理-sudo
sudo可以将只有root可以使用的命令授权给普通用户: 授权的过程实际是修改配置文件: 授权示例: 普通用户使用sudo权限的示例:
- node.js基础 1之基本概念常识
node.js 好牛逼的样子哦 很火,很腻害~~~~ 有关node.js的版本常识: 一般用最新的稳定版本,非稳定版本用于测试,其中包括api的不稳定等. 起一个web服务器: ndoejs可以自定义 ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- table数据表格添加checkbox进行数据进行两个表格左右移动。
<table class="table table-hover table-striped table-condensed newDateList"> <thea ...
- [html5]placeholder默认颜色
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...
- Wince 6.0 窗口最大化显示
在InitDialog用如下代码实现: CRect m_FullScreenRect; //全屏区域 CRect WindowRect; GetWindowRect(&Window ...
- Ubuntu下Apache的安装
Ubuntu下可快速安装LAMP server(Apache+MySQL+PHP5),参见<Ubuntu下快速安装LAMP server>一文. 也可以手动安装Apache.本文介绍如何手 ...
- 转换primitive主数据类型
/*转换primitive主数据类型 * 短变长直接转换 * 长变短要强制转换 * 例如:long y = 42; int x = (int)y * String类型转换成primitive类型时可以 ...