iOS 之动画
一. UIImageView实现动画效果
UIImageView可以添加一组不同帧的图片,来进行播放动画效果.具体源码如下方法所示:
// imageView使用懒加载方式进行初始化,在ViewDidLoad方法中将其添加在View上即可
- (UIImageView *)imageView {
if (!_imageView) {
// 初始化imageView设定其frame
_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
// 保存图片的可变数据
NSMutableArray *imageArr = [[NSMutableArray alloc] init];
// 获取图片
for (int i = 1; i < 17; i++) {
// 获取照片名称
NSString *imageStr = [NSString stringWithFormat:@"gua%d.tiff",i];
// 获取照片
UIImage *image = [UIImage imageNamed:imageStr];
// 添加到可变数组中
[imageArr addObject:image];
}
// 设置imageView的动画组图片
_imageView.animationImages = imageArr;
// 设置ImageView的动画时长
_imageView.animationDuration = 0.5;
// 设置ImageView的动画播放次数
_imageView.animationRepeatCount = 100;
// 开启动画
[_imageView startAnimating];
}
return _imageView;
}
二. UIView基础动画实现方式1
UIKit直接将动画集成到UIView类中,当内部的一些属性发生变化的改变的时候,UIView将为这些改变提供动画支持
执行动画的工作由UIView类自动完成,但仍希望在执行动画时通知视图,为此需要将属性的代码放在
[UIView beginAnimations:nil context:nil]与[UIView commitAnimations]之间.
例如:
// 开始设置UIView基础动画
[UIView beginAnimations:@"大小" context:nil];
// 设置动画时长
[UIView setAnimationDuration:0.5];
// 设置动画次数
[UIView setAnimationRepeatCount:5];
// 动画反转
[UIView setAnimationRepeatAutoreverses:YES];
// 改变redview的frame
self.redView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHight);
// 确认动画并开始
[UIView commitAnimations];
注意: UIView的基础动画设置代理之后,要实现两个代理方法1.动画即将开始;2.动画结束.(此两个代理方法需要手动填写)
// 设置动画的代理
[UIView setAnimationDelegate:self];
// 代理方法中动画开始时的回调方法
[UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];
// 代理方法中动画结束时的回调方法
[UIView setAnimationDidStopSelector:@selector(animationDidStop:context:)];
总结:
[UIView beginAnimations:nil context:nil];
// 设置UIView的动画的属性
[UIView commitAnimations];
三. UIView基础动画实现方式2
UIView的Block实现动画是从iOS 4.0以后才支持的.
- Block简单动画
// Duration:为动画的总时长
[UIView animateWithDuration:3 animations:^{
// 需要修改的属性
} completion:^(BOOL finished) {
// 通过finished的值来进行判断动画是否停止
}];
- Block复杂动画
// Duration:动画总时长 delay:动画的延迟播放时间 options:动画的效果(例如:淡入,淡出,等)
[UIView animateWithDuration:(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewAnimationOptions) animations:^{
// UIView需要修改的属性
} completion:^(BOOL finished) {
// 通过finished的值来判断动画是否停止
}];
- Block关键帧动画
// Duration:为动画的总时长
// delay:为延迟播放的时间
// options:为可选项
// animations:需要执行的动画
[UIView animateKeyframesWithDuration:4.0 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
// StarTime:帧动画开始的时间
// relativeDuration的时间为Duration的百分比,取值在0~1之间
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{
}];
} completion:^(BOOL finished) {
// 判断动画是否结束
if (finished) {
}
}];
注意:UIView的addKeyframeWithRelativeStartTime:的方法必须实现在UIView的animateKeyframesWithDuration的animations的参数中.
- Spring动画
Spring Animation是一种特殊的动画曲线,自从iOS7开始被广泛运用在系统动画中.
[UIView animateWithDuration:4.0 // 动画时长
delay:2.0 // 动画延迟播放时间
usingSpringWithDamping:0.5 // 阻尼系数 0.0~1.0
initialSpringVelocity:40.0// 初始速度
options:UIViewAnimationOptionRepeat // 可选项,动画播放方式
animations:^{
// 需要修改的属性
} completion:^(BOOL finished) {
// 判断动画是否结束
if (finished) {
}
}];
- 总结
Block简单动画,Block复杂动画,Block关键帧动画与Spring动画都是通过Block的闭包完成动画的回调设置;Spring Animation是一种特殊的动画曲线,自从iOS 7开始被广泛运用.
四. CoreAnimation实现方式
- CoreAnimation简介
CoreAnimation动画位于iOS中的Media层
CoreAnimation动画实现需要添加QuartzCore.Framework
CoreAnimation动画实现基本都是Layer Animation
iOS系统层级划分
Cocoa Touch--------UIKit
Media--------------Core Graphics,Open GL ES, Core Animation
Core Services--------Core Data, Foundation
Core OS
CALayer负责绘制,提供UIView需要展示的内容,不能交互.
UIView负责交互,显示CALayer绘制内容.
CALayer(层)是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,UIView上的所有视觉效果都是在这个Layer上进行的.
CALayer的外形特征包括.
- 尺寸的大小
- 背景色
- 内容 (可以填充图片或者使用Core Graphics绘制的内容)
- 矩形是否有圆角
- 矩形是否有阴影
CALayer的常用属性
1.cornerRadius 设置圆角
2.shadowColor 阴影颜色
3.shadowOffset 阴影偏移量
4.shadowRadius阴影模糊程度
5.shadowOpacity 阴影的透明度
6.anchorPoint 锚点 (锚点的中心点始终与position的中心点重合)
7.position 位置信息
8.borderWidth 描边粗细
9.borderColor 描边颜色
10.transform 使CALayer产生3D空间内的平移,缩放,旋转等变化.
- CABasicAnimation
示例代码:
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"opacity"];
// 是原来的2PI倍
basic.byValue = @(2 * M_PI);
// 动画时长
basic.duration = 4.0;
// 动画重复次数
basic.repeatCount = 50;
// 添加动画
// forkey为添加标记,删除动画的时候可以通过标记删除.
[self.greenView.layer addAnimation:basic forKey:@"basic"];
- CAFrameAnimation
示例代码:
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];
// layer最初的position值
float position_x = self.greenView.layer.position.x;
float position_y = self.greenView.layer.position.y;
// layer向左晃动的偏移量
NSValue *leftValue = [NSValue valueWithCGPoint:CGPointMake(position_x - 20, position_y)];
// layer的原始位置
NSValue *originValue = [NSValue valueWithCGPoint:CGPointMake(position_x, position_y)];
// layer向右晃动的偏移量
NSValue *rightValue = [NSValue valueWithCGPoint:CGPointMake(position_x + 20, position_y)];
// 添加每一帧的value值(因为参数为对象类型,所以要将CGPoint类的对象转化成为NSValue类型)
[keyFrame setValues:@[rightValue,originValue,leftValue]];
// 动画播放次数
keyFrame.repeatCount = 40;
// 动画的时长
keyFrame.repeatDuration = 100.0;
// 为layer层添加动画
[self.greenView.layer addAnimation:keyFrame forKey:@"keyframe"];
-
CAAnimationGroup 组合动画
创建一个组合动画对象,可以将CABasicAnimation于CAFrameAnimation结合.通过设置CAAnimationGroup的重复次数,动画时长来反映出组合动画的效果. -
CASpringAnimation
简单属性:
1.mass 质量,值越大,弹簧拉伸与压缩的幅度越大
2.stiffness 刚度系数
3.damping 阻尼系数
4.initialVelocity 初始速度
5.settlingDuration 动画时长
