iOS动画实现总结

在iOS中,动画实现方向有两种,一种是操作UIView的animation方法,另外一种就是核心动画,但到iOS7中,UIView又跟核心动画牵扯在一起。

方式一(利用核心动画添加动画)

  • 核心动画的层次关系
  • 转场动画(CATransition)
    • 用于做场景的转换动画,能偶为层提供移出屏幕和一如屏幕的动画效果。
    • UINavigationController就是通过CATransition实现了讲控制器的师徒推入屏幕的动画效果。
    • 常用属性
      • type动画过度类型
      • subtype:动画过度方向
      • startProgress:动画起点(在整体的百分比)(可用的值从0到1,在动画中起点或终点的逗留时间,开始的时间一定要比结束的时间小,下同)
      • endProgress:动画终点(在整体动画的百分比)
   CATransition *animation = [CATransition animation];
    animation.type = @"reveal";
    animation.duration = 1;
    animation.subtype = kCATransitionReveal;
    [self.myView.layer addAnimation:animation forKey:nil];
    CGPoint point = self.myView.center;
    point.y += 150;
    [self.myView setCenter:point];
  • 基本动画(CABasicAnimation),是CAPropertyAnimation的子类,一个动画可控制一个属性的变化,变化值只能是两个值中变化,可以在fromValue和toValue两个值中设置

    CABasicAnimation *baseAnimation = [CABasicAnimation animationWithKeyPath:@"bounds"];
      baseAnimation.fromValue = [NSValue valueWithCGRect:CGRectMake(20, 20, 100, 100)];
      baseAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(100, 100, 200, 200)];
    
      baseAnimation.duration = 2.0;
      baseAnimation.removedOnCompletion = NO;
      baseAnimation.fillMode = kCAFillModeForwards;
      baseAnimation.repeatCount = MAXFLOAT;
    
      [self.myView.layer addAnimation:baseAnimation forKey:nil];
  • 帧动画(CAKeyframeAnimation),帧动画也是CAPropertyAnimation的子类,所以也是控制一个view的属性做动画,与CABaseAnimation不同的是,CAKeyFrameAnimation可以添加多个关键帧,而CABaseAnimation可以看做是两个关键帧的帧动画,我们可以好好利用帧动画的关键帧来做比较有趣的动画,如泡泡效果。
   CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
//    位移
    CAKeyframeAnimation *positionAnima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    positionAnima.calculationMode = kCAAnimationCubicPaced;
    positionAnima.duration = 5;
    positionAnima.fillMode = kCAFillModeForwards;
    positionAnima.removedOnCompletion = NO;
    positionAnima.repeatCount = MAXFLOAT;
    positionAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

//    添加移动路径
    CGMutablePathRef curvedPath = CGPathCreateMutable();
    CGRect circleContainer = CGRectInset(myView.frame, myView.frame.size.width / 2 - 3, myView.frame.size.height / 2 - 3);
    CGPathAddEllipseInRect(curvedPath, NULL, circleContainer);
    positionAnima.path = curvedPath;
    CGPathRelease(curvedPath);
    [myView.layer addAnimation:positionAnima forKey:nil];

//    缩放X
    CAKeyframeAnimation *scaleX = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"];
    scaleX.duration = 1.0;
    scaleX.values = @[@1.0,@1.1,@1.0];
    scaleX.keyTimes = @[@0.0,@0.5,@1.0];
    scaleX.repeatCount = MAXFLOAT;
    scaleX.autoreverses = YES;

    scaleX.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [myView.layer addAnimation:scaleX forKey:nil];

//    缩放Y
    CAKeyframeAnimation *scaleY = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
    scaleY.duration = 1.5;
    scaleY.values = @[@1.0,@1.1,@1.0];
    scaleY.keyTimes = @[@0.0,@0.5,@1.0];
    scaleY.repeatCount = MAXFLOAT;
    scaleY.autoreverses = YES;

    group.animations = @[positionAnima,scaleX,scaleY];
    scaleY.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [myView.layer addAnimation:scaleY forKey:nil];

运行效果

由于本人的电脑是黑苹果,所以将就一下啦,哈哈,白苹果应该不会这样的。

  • 动画组(CAAnimationGroup)CAAnimation的子类,可以保存一组动画对象,讲CAAnimationGroup对象加入层后,组中所有动画可以同时运行,所以,当我们需要做多个动画并且执行的时间不一样的时候,动画组就不适用。例如上面的泡泡效果。
group.animations = [里面放动画对象];

方式二(利用UIView添加动画)

  • UIView动画(手码)

    • 添加单个动画

      [UIView beginAnimations:nil context:nil];
      [UIView setAnimationDuration:4];
      CGPoint point = self.myView.center;
      point.y += 150;
      [self.myView setCenter:point];
      [UIView commitAnimations];
    • 添加多个动画
  [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:4];
    CGPoint point = self.myView.center;
    point.y += 150;
    [self.myView setCenter:point];
    [UIView commitAnimations];

    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:4];
    [self.myView setAlpha:0.1];
    [UIView commitAnimations];
  • UIView动画(Block)
[UIView animateWithDuration:4 animations:^{
        CGPoint point = self.myView.center;
        point.y += 150;
        [self.myView setCenter:point];
    }];
  • UIView动画(Block帧动画),从iOS7开启,苹果提供了比较便捷的方法来调用帧动画,不用新建帧动画实例,直接对layer的属性进行控制。
[UIView animateKeyframesWithDuration:0.5 delay:1 options:UIViewKeyframeAnimationOptionAutoreverse animations:^{
        self.view.bounds = CGRectMake(30, 30, 30, 30);
    } completion:^(BOOL finished) {

    }];
 
  • UIView转场动画。
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

这个方法应该不好理解,简单来说,这个方法调用完毕后,相当于执行了两句代码,

// 添加toView到父视图
[fromView.superview addSubview:toView];
// 把fromView从父视图中移除
[fromView.superview removeFromSuperview];
- duration:动画的持续时间
- duration:动画的持续时间
- options:转场动画的类型
- animations:将改变视图属性的代码放在这个block中
- completion:动画结束后,会自动调用这个block
 
时间: 2024-11-12 09:12:07

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; // 运行

iOS动画详解(学习动画看这一篇就够了)

iOS动画详解(学习动画看这一篇就够了) 一.基础知识 CAAnimation.png 二.CABasicAnimation 1. 动画的属性和解释 2.属性值的解释 repeatCount : 如果在swift中需要一直不断重复:Float.infinity,OC:HUGE_VALF timingFunction: timingFunction.png kCAMediaTimingFunctionLinear--在整个动画时间内动画都是以一个相同的速度来改变.也就是匀速运动.一个线性的计时函数

iOS动画1 — UIView动画

iOS动画1 — UIView动画 iOS动画基础是Core Animation核心动画.Core Animation是iOS平台上负责图形渲染与动画的基础设施.由于核心动画的实现比较复杂,苹果提供了实现简单动画的接口—UIView动画.UIView动画封装在UIView的Category中,主要实现一些简单和常用的动画.UIView动画是对核心动画进行了一层封装,所以最终动画还是通过Core Animation的接口实现. 主要的动画效果都可以通过UIView动画和Core Animation