iOS 动画整理

序列帧动画

曾经项目里的一段源码:

1234567891011121314
UIImageView * activityImageView = [[UIImageView alloc] init];NSMutableArray *imagesList = [NSMutableArray array];for (NSInteger i = 1; i < 3; i++) {

NSString *fileName = [NSString stringWithFormat:@"eggplant%i.png",i];UIImage *image = [UIImage imageNamed:fileName];[imagesList addObject:image];}[activityImageView setAnimationImages:imagesList];[activityImageView setAnimationDuration:0.5];//0为无限循环[activityImageView setAnimationRepeatCount:0];[activityImageView startAnimating];//    [activityImageView stopAnimating];

UIView 动画

UIViewAnimation

1234567891011121314151617
//创建一个CGAffineTransform  transform对象CGAffineTransform  transform;//设置旋转度数transform = CGAffineTransformRotate(testView.transform,M_PI/6.0);//动画开始[UIView beginAnimations:@"rotate" context:nil ];//动画时常[UIView setAnimationDuration:2];//自动反转//    [UIView setAnimationRepeatAutoreverses:YES];[UIView setAnimationRepeatCount:3];//添加代理[UIView setAnimationDelegate:self];//获取transform的值[testView setTransform:transform];//关闭动画[UIView commitAnimations];

UIViewAnimationWithBlocks

123456789101112131415161718
/* Duration 动画持续时间delay 动画延迟时间options 动画的节奏控制 */

[UIView animateWithDuration:5 delay:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{testView.frame = CGRectMake(100, 300, 100, 100);} completion:^(BOOL finished) {

}];

/* Damping 动画的弹力指数Velocity 弹力的初速度 */

[UIView animateWithDuration:0.5 delay:1 usingSpringWithDamping:0.8 initialSpringVelocity:10 options:0 animations:^{testView.frame = CGRectMake(100, 300, 100, 100);} completion:^(BOOL finished) {

}];

CoreAnimation

CATransition

继承关系:CATransition -> CAAnimation

12345678
CATransition *transition = [CATransition animation];transition.duration = 0.5;transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];//动画类型transition.type = kCATransitionPush;//动画方向transition.subtype = kCATransitionFromTop;[testView.layer addAnimation:transition forKey:nil];

CAPropertyAnimation

继承关系:CABasicAnimation,CAKeyframeAnimation -> CAPropertyAnimation -> CAAnimation

CABasicAnimation

1234567891011121314151617
CABasicAnimation * animation = [CABasicAnimation animation];animation.keyPath = @"position.y";

//运动的绝对距离animation.fromValue = @77;animation.toValue = @455;

//运动的相对距离//    animation.byValue = @222;

animation.duration = 1;//留在最终状态animation.fillMode = @"forwards";//防止它被自动移除animation.removedOnCompletion = NO;animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.5 :0 :0.9 :0.7];[testView.layer addAnimation:animation forKey:@"basic"];

CAKeyframeAnimation 例一

123456789
CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];animation.keyPath = @"position.x";animation.values = @[@0,@10,@-10,@10,@0];//指定关键帧动画发生的时间animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];animation.duration = 0.4;//提前无需设置位置animation.additive = YES;[testView.layer addAnimation:animation forKey:@"shake"];

CAKeyframeAnimation 例二

1234567891011121314
CGRect boundingRect = CGRectMake(-150, -150,300, 300);

CAKeyframeAnimation *orbit = [CAKeyframeAnimation animation];orbit.keyPath = @"position";//创建一个圆形的 CGPath 作为我们的关键帧动画的 path。orbit.path = CFAutorelease(CGPathCreateWithEllipseInRect(boundingRect, NULL));orbit.duration = 2;orbit.additive = YES;orbit.repeatCount = HUGE_VALF;//恒定速度orbit.calculationMode = kCAAnimationPaced;//确保沿着路径旋转orbit.rotationMode = kCAAnimationRotateAuto;[testView.layer addAnimation:orbit forKey:@"orbit"];

CAAnimationGroup 组动画

123456789101112131415
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];animation.duration = 3.;animation.fromValue = @(0.1);animation.toValue = @(1.);

CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];animation2.duration = 3.;animation2.fromValue = @(1);animation2.toValue = @(2.);animation2.beginTime = 3.;

CAAnimationGroup *group = [CAAnimationGroup animation];group.duration = 6.;group.animations = @[animation,animation2];[testView.layer addAnimation:group forKey:nil];

Facebook pop 动画

POPBasicAnimation 基本动画

1234
POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];anim.toValue = [NSValue valueWithCGPoint:CGPointMake(2.0, 2.0)];anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];[testView.layer pop_addAnimation:anim forKey:@"Animation"];

POPSpringAnimation 弹性动画

123456789101112
POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(60, 350)];anim.toValue = [NSValue valueWithCGPoint:CGPointMake(60, 150)];anim.springBounciness = 10;anim.springSpeed = 10;//摩擦力anim.dynamicsFriction = 0.5;//张力anim.dynamicsTension = 250;//质量anim.dynamicsMass = 0.7;[testView.layer pop_addAnimation:anim forKey:@"Animation"];

POPDecayAnimation 减速动画

1234567891011
POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];//初始速度anim.velocity = @(200);//只有fromValue 没有toValueanim.fromValue =  @(100.0);//负加速度anim.deceleration = .998;[anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) {NSLog(@"执行完毕");}];[testView.layer pop_addAnimation:anim forKey:@"Animation"];

UIViewController动画

有时间详细整理下:

http://onevcat.com/2013/10/vc-transition-in-ios7/

http://objccn.io/issue-12-3/

参考文章:

http://objccn.io/issue-12-1/

时间: 2024-10-04 07:29:53

iOS 动画整理的相关文章

解析 iOS 动画原理与实现

这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画 动画,顾名思义,就是能“动”的画.人的眼睛对图像有短暂的记忆效应,所以当眼睛看到多张图片连续快速的切换时,就会被认为是一段连续播放的动画了. 比如,中国古代的“走马灯”,就是用的这个原理.有些人还会在一个本子每页上手绘一些漫画,当快速翻页的时候,也会看到动画的效果,比如: 图片来自网络 计算机动画的实现方式 动画是由一张张图片组成的,在计算机中,我们称每一张图片为 一帧画面 .

如何解决IOS 动画中 Autolayout 与View Transforms的冲突

IOS 的动画放大与缩小,并非按照找它的中心点放大和缩小,而是左上角 .我分析了下原来是Autolayout 与View Transforms的冲突造成的. - (void) addSubviewWithZoomInAnimation:(UIView*)view duration:(float)secs option:(UIViewAnimationOptions)option { // first reduce the view to 1/100th of its original dimen

iOS动画开发之一——UIViewAnimation动画的使用

iOS动画开发之一--UIViewAnimation动画的使用 一.简介 一款APP的成功与否,除了完善的功能外,用户体验也占有极大的比重,动画的合理运用,可以很好的增强用户体验.iOS开发中,常用的动画处理有UIView动画编程和核心动画编程,其中UIView动画使用简便,开发中应用十分广泛.这篇博客,主要讨论UIView的动画使用. 二.UIView动画的几个方法 + (void)animateWithDuration:(NSTimeInterval)duration animations:

iOS动画的要素

1)iOS动画的模型:三层树模型: https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW12 Layer Trees Reflect Different Aspects of the Animati

iOS动画浅汇

转自:http://www.cocoachina.com/ios/20160311/15660.html 在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的.我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通过步骤分解后本质上不过是一个个简单的动画实现.本文就个人搜集的一些动画相关的理论和实践知识做个小结,不足之处请勿见怪. 理论 UIview VS UIlayer UI

iOS 动画Animation-4-5: CALayer子类:CATransformLayer

首先说明:这是一系列文章,参考本专题下其他的文章有助于你对本文的理解. 今天周六,希望大家都有一个愉快的周末. 今天来讲解一下CATransformLayer:CATransformLayer是一个专门用来创建三维视图的一个layer,也可以说是多个layer的集合.他没有多余的API,可以这么说,他只是承载了子layer. 下面就看一个例子,通过例子来讲解. 国际惯例先上图: 图就是这样的纯手工打造. 先创建一个CATransformLayer对象: var transformLayer =

iOS动画浅汇(转)

转自:http://www.cocoachina.com/ios/20160311/15660.html 在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的.我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通过步骤分解后本质上不过是一个个简单的动画实现.本文就个人搜集的一些动画相关的理论和实践知识做个小结,不足之处请勿见怪. 理论 UIview VS UIlayer UI

iOS 动画初步

iOS 动画初步 1. CALayer的使用 (图层) 属于QuartzCore.framework 框架 跨平台 我们在开发中使用的UIKit.framework里面的控件之所以可以看见,主要是由于他拥有了CALayer. 1 //------------------------------------------------------------------------- 2 // 图层 部分属性 3 4 // shadow 是否透明 5 self.myView.layer.shadowO

IOS动画总结

IOS动画总结 http://blog.sina.com.cn/s/blog_611b9d9d01015dkm.html (2012-06-01 14:50:32) 转载▼ 标签: 杂谈 分类: IOS 一.基本方式:使用UIView类的UIViewAnimation扩展 + (void)beginAnimations:(NSString *)animationID context:(void *)context; // 开始准备动画+ (void)commitAnimations; // 运行