iOS 实现的基本动画
头尾式动画
// 开始动画[UIView beginAnimations: nil context :nil];// 设置动画的时长[UIView setAnimationDuration :2];// 要执行的代码段self.imageView.center = centerPoint;// 提交动画[UIView commitAnimations];
2.block动画的方法
一、<Block创建动画方式一>
[UIView animateWithDuration:1.0 animations:^{
// 执行动画的代码
self.imageView.center = centerPoint;
}];
二、<Block创建动画方式二>
[UIView animateWithDuration:2 animations:^{ // 要执行动画的代码
} completion:^(BOOL finished) { // 动画执行完成后的回调
}];
三、<Block创建动画方式三>
[UIView animateWithDuration:2 delay:2 options:UIViewAnimationOptionAllowAnimatedContent animations:^{ // 要执行的动画的代码
} completion:^(BOOL finished) { // 执行动画完毕之后的回调
}];
iOS显示关键帧动画
// 1. 创建关键帧动画CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; [keyAnimation setValue:[NSValue valueWithCGPoint:CGPointMake(50, 614) ]forKey:@"LayerPosition"]; // 2. 设置贝塞尔曲线路径CGMutablePathRef path = CGPathCreateMutable();// 设置易懂的起始点CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);// 绘制二次贝塞尔曲线// 可以添加路径,CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 50, 400);CGPathAddCurveToPoint(path, NULL, 160, 500, -30, 600, 50, 614);// 给动画添加路径 设置路径属性keyAnimation.path = path; // 记得释放路径CGPathRelease(path); keyAnimation.calculationMode = kCAAnimationCubic; // 设置动画其他属性keyAnimation.duration = 5.0; keyAnimation.removedOnCompletion = NO; keyAnimation.repeatCount = 1; keyAnimation.delegate = self; // 给图层添加动画[_layer addAnimation:keyAnimation forKey:@"KCKeyAnimation_Positon"];
关键帧动画
#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong) CALayer *layer;@end@implementation ViewController- (void)viewDidLoad {
[super viewDidLoad];
// 设置背景()
UIImage *backImage = [UIImage imageNamed:@"haha1"]; self.view.backgroundColor = [UIColor colorWithPatternImage:backImage];
// 自定义一个图层
_layer = [[CALayer alloc] init];
_layer.bounds = CGRectMake(50, 50, 10, 20);
_layer.position = CGPointMake(50, 150);
_layer.contents = (id)[UIImage imageNamed:@"hudie"].CGImage;
[self.view.layer addSublayer:_layer];
// 创建动画
[self translationKeyAnimation];
}/**
* 关键帧动画, 关键帧动画就是在动画控制过程中开发者指定主要的动画状态, 至于各种状态间动画如何进行则由系统自动运算补充(每个两个关键帧之间系统形成的动画成为补间动画), 这种动画的好处就是开发者不用逐个每个动画帧, 而只关心几个关键帧的状态即可
关键帧动画开发分为两种形式, 一种是通过设置不同的属性进行关键帧控制
另一种是通过绘制路径进行关键帧控制, 后者优先级高于前者, 如果设置了路径则属性就不再起作用
*//**
* 关于关键帧动画路径
* 如果路径不是曲线的话,
矩形路径是从矩形的左上角开始运行, 顺时针运行一周回到最上角.
椭圆路径的话就是从椭圆的右侧开始(0度)顺时针一周回到右侧.
*//**
* keyTimes
*
各个关键帧的时间控制。前面使用values设置了四个关键帧，默认情况下每两帧之间的间隔为:8/(4-1)秒。如果想要控制动画从第一帧到第二针占用时间4秒，从第二帧到第三帧时间为2秒，而从第三帧到第四帧时间2秒的话，就可以通过keyTimes进行设置。keyTimes中存储的是时间占用比例点，此时可以设置keyTimes的值为0.0，0.5，0.75，1.0（当然必须转换为NSNumber），也就是说1到2帧运行到总时间的50%，2到3帧运行到总时间的75%，3到4帧运行到8秒结束。
*//**
* caculationMode
*
* 动画计算模式。还拿上面keyValues动画举例，之所以1到2帧能形成连贯性动画而不是直接从第1帧经过8/3秒到第2帧是因为动画模式是连续的
kCAAnimationLinear 这是计算模式的默认值
kCAAnimationDiscrete离散的那么你会看到动画从第1帧经过8/3秒直接到第2帧，中间没有任何过渡
kCAAnimationPaced（均匀执行，会忽略keyTimes）、
kCAAnimationCubic（平滑执行，对于位置变动关键帧动画运行轨迹更平滑
kCAAnimationCubicPaced（平滑均匀执行）
*/#pragma mark --- 关键帧动画----> 设置关键帧的点坐标执行动画路径- (void)translationAnimation
{ // 1. 创建关键帧动画对象 初始化keyPath
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; // 2.设置关键帧, 有4个关键帧
// 对于关键帧动画的初始值不能省略, 就是最少要有一个帧
NSValue *key1 = [NSValue valueWithCGPoint:_layer.position]; NSValue *key2 = [NSValue valueWithCGPoint:CGPointMake(80, 220)]; NSValue *key3 = [NSValue valueWithCGPoint:CGPointMake(45, 300)]; NSValue *key4 = [NSValue valueWithCGPoint:CGPointMake(55, 400)];
// 通哟keyTimes数组来设置关键帧的运行时间
keyAnimation.keyTimes = @[@(0.1), @(0.2), @(0.3), @(1.0)];
NSArray *keys = @[key1, key2, key3, key4]; // 设置关键帧
keyAnimation.values = keys; // 3. 设置其他属性
keyAnimation.duration = 5.0;
keyAnimation.repeatCount = HUGE_VALF;
keyAnimation.removedOnCompletion = NO;
// 设置动画的开始时间 延时两秒执行
keyAnimation.beginTime = CACurrentMediaTime() + 2;
// 4.给图层添加动画
[_layer addAnimation:keyAnimation forKey:@"KCKeyframeAnimation_Position"];
}#pragma mark ---- 关键帧动画 ----> 设置贝塞尔曲线作为动画执行的路径- (void)translationKeyAnimation
{ // 1. 创建关键帧动画
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[keyAnimation setValue:[NSValue valueWithCGPoint:CGPointMake(50, 614) ]forKey:@"LayerPosition"];
// 2. 设置贝塞尔曲线路径
CGMutablePathRef path = CGPathCreateMutable(); // 设置易懂的起始点
CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);
// 绘制二次贝塞尔曲线
// 可以添加路径,
CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 50, 400); CGPathAddCurveToPoint(path, NULL, 160, 500, -30, 600, 50, 614); // 给动画添加路径 设置路径属性
keyAnimation.path = path;
CGPathRelease(path);
keyAnimation.calculationMode = kCAAnimationCubic;
// 设置动画其他属性
keyAnimation.duration = 5.0;
keyAnimation.removedOnCompletion = NO;
keyAnimation.repeatCount = 1;
keyAnimation.delegate = self;
// 给图层添加动画
[_layer addAnimation:keyAnimation forKey:@"KCKeyAnimation_Positon"];
}#pragma mark --- 动画的代理方法- (void)animationDidStart:(CAAnimation *)anim
{
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{ // 开启事务
[CATransaction begin];
// 关闭隐式动画属性
[CATransaction setDisableActions:YES];
_layer.position = [[anim valueForKey:@"LayerPosition"] CGPointValue];
[CATransaction commit];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.}@end
动画的创建和使用
第一种：UIView 代码块调用
_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
[UIView animateWithDuration:1.0f animations:^{
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
} completion:^(BOOL finished) {
_demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
}];第二种：UIView [begin commit]模式
_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50); [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:1.0f]; _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50); [UIView commitAnimations];
第三种：使用Core Animation中的类
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"]; anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)]; anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)]; anima.duration = 1.0f; [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];
参考
作者：奋拓达
链接：https://www.jianshu.com/p/9f12c259aac2
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。