IOS之动画

IOS之动画

15.1 动画介绍

15.2 Core Animation基础

15.3 隐式动画

15.4 显式动画

15.5 关键帧显式动画

15.6 UIView级别动画

15.1 动画介绍

在iOS中动画实现技术主要是：Core Animation。 Core Animation负责所有的滚动、旋转、缩小和放大以及所有的iOS动画效果。其中UIKit类通常都有animated：参数部分，它可以允许是否使用动画。

Core Animation还与Quartz紧密结合在一起，每个UIView都关联到一个CALayer对象，CALayer是Core Animation中的图层。

15.2 Core Animation基础

Core Animation创建动画时候会修改CALayer属性，然后让这些属性流畅地变化。Core Animation相关知识点：

图层，图层是动画发生的地方，CALayer总是与UIView关联，通过layer属性访问。

隐式动画，这是一种最简单的动画，不用设置定时器，不用考虑线程或者重画。

显式动画，是一种使用CABasicAnimation创建的动画，通过CABasicAnimation，可以更明确地定义属性如何改变动 画。

关键帧动画，这是一种更复杂的显式动画类型，这里可以定义动画的起点和终点，还可以定义某些帧之间的动画。

15.3 隐式动画

实例ianimate：

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface ianimateViewController : UIViewController {

    IBOutlet UIImageView *plane;
}

-(IBAction)movePlane:(id)sender;

@end

//--m
-(IBAction)movePlane:(id)sender {

    [UIView beginAnimations:nil context:NULL];
    CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(180, 200);
    plane.layer.affineTransform=moveTransform;
    plane.layer.opacity = 1;
    [UIView commitAnimations];

}

飞机图片的不透明度（opacity）初始为0.25，然后在动画过程中不透明度设置为1.0。这个过程是设置飞机图片对象的层属性的，plane.layer.opacity = 1;

[plane.layer setAffineTransform:moveTransform];设置飞机图片层对象的仿射移动变换。

15.4 显式动画

eanimate关键代码：

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface eanimateViewController : UIViewController {
    IBOutlet UIImageView *plane;
}
-(IBAction)movePlane:(id)sender;
@end

//--m

-(IBAction)movePlane:(id)sender {

    CABasicAnimation *opAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opAnim.duration = 3.0;
    opAnim.fromValue = [NSNumber numberWithFloat:.25];
    opAnim.toValue= [NSNumber numberWithFloat:1.0];
    opAnim.cumulative = YES;
    opAnim.repeatCount = 2;
    [plane.layer addAnimation:opAnim forKey:@"animateOpacity"];

    CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(180, 200);
    CABasicAnimation *moveAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    moveAnim.duration = 6.0;
    moveAnim.toValue= [NSValue valueWithCATransform3D:
        CATransform3DMakeAffineTransform(moveTransform)];
    [plane.layer addAnimation:moveAnim forKey:@"animateTransform"];

}

显式动画时候，不必定义CALayer的变化，也不必执行它们，而是通过CABasicAnimation逐个定义动画。其中每个动画都含有各自的duration、repeatCount等属性。然后，使用addAnimation:forKey:方法分别将每个动画应用到层中。

[CABasicAnimation animationWithKeyPath:@“opacity”]获得透明度动画对象，@“transform”是指定转换动画。

opAnim.cumulative 属性是指定累计

opAnim.repeatCount 重复执行次数

CATransform3DMakeAffineTransform函数是将仿射变换矩阵变成Core Animation使用的Transform3D类型的矩阵。

15.5 关键帧显式动画

eanimate_keyFrame关键代码：

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
@interface eanimateViewController : UIViewController {
    IBOutlet UIImageView *plane;
}
-(IBAction)movePlane:(id)sender;

@end

//-m
-(IBAction)movePlane:(id)sender {

    CAKeyframeAnimation *opAnim = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    opAnim.duration = 6.0;
    opAnim.values =[NSArray arrayWithObjects:
                    [NSNumber numberWithFloat:0.25],
                    [NSNumber numberWithFloat:0.75],
                    [NSNumber numberWithFloat:1.0],
                    nil];
    opAnim.keyTimes = [NSArray arrayWithObjects:
                       [NSNumber numberWithFloat:0.0],
                       [NSNumber numberWithFloat:0.5],
                       [NSNumber numberWithFloat:1.0], nil];

    [plane.layer addAnimation:opAnim forKey:@"animateOpacity"];

    CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(180, 200);
    CABasicAnimation *moveAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    moveAnim.duration = 6.0;
    moveAnim.toValue= [NSValue valueWithCATransform3D:
                       CATransform3DMakeAffineTransform(moveTransform)];
    [plane.layer addAnimation:moveAnim forKey:@"animateTransform"];

}

animation.values是一个值的数组。

animation.keyTimes是一个每个帧片段持续的时间比例，取值范围0.0-1.0之间。

关键帧之路径实例BallSteps

#import <UIKit/UIKit.h>
#import <QuartzCore/CoreAnimation.h>

@interface BallStepsViewController : UIViewController {
    UIButton *drawButton;
    UIImageView *imageView;
}

@property (nonatomic, retain) IBOutlet UIButton *drawButton;
@property (nonatomic, retain) IBOutlet UIImageView *imageView;

- (IBAction)drawStar:(id)sender;

@end

//--m

#import "BallStepsViewController.h"

@implementation BallStepsViewController

@synthesize drawButton;
@synthesize imageView;

- (IBAction)drawStar:(id)sender {
    [drawButton setEnabled:NO];
    CGMutablePathRef starPath = CGPathCreateMutable();
    CGPathMoveToPoint(starPath,NULL,160.0f, 100.0f);
    CGPathAddLineToPoint(starPath, NULL, 100.0f, 280.0f);
    CGPathAddLineToPoint(starPath, NULL, 260.0, 170.0);
    CGPathAddLineToPoint(starPath, NULL, 60.0, 170.0);
    CGPathAddLineToPoint(starPath, NULL, 220.0, 280.0);
    CGPathCloseSubpath(starPath);

    CAKeyframeAnimation *animation = nil;
    animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    [animation setDuration:10.0f];
    [animation setDelegate:self];
    [animation setPath:starPath];
    CFRelease(starPath);
    starPath = nil;
    [[imageView layer] addAnimation:animation forKey:@"position"];
}

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    [drawButton setEnabled:YES];
}

- (void)dealloc {
    [drawButton release];
    [imageView release];
    [super dealloc];
}

@end

[CAKeyframeAnimation animationWithKeyPath:@“position”];创建一个position类型的关键帧动画。

关键帧动画中可以定义路径，把这些路径放入到CGMutablePathRef 中与CG中的很相似。

CGPathCloseSubpath(starPath);结束路径。

[animation setPath:starPath];设置路径。

[animation setDelegate:self];设置委托对象为本身，即回调方法 animationDidStop:finished:。

最后CFRelease(starPath);释放路径。

15.6 UIView级别动画

除了直接使用Core Animation 层实现动画，我们还有UIView直接实现隐式动画。

实例ViewAnimation：

@interface MainViewController : UIViewController
{
  UIImageView *animImageView;
  UIButton *button;
}

@property (assign) IBOutlet UIImageView *animImageView;
@property (assign) IBOutlet UIButton *button;

- (IBAction)action:(id)sender;

@end

//--m
#import "MainViewController.h"

@implementation MainViewController

@synthesize animImageView;
@synthesize button;

- (IBAction)action:(id)sender {
  [UIView beginAnimations:@"Hide Button" context:nil];
  [[self button] setAlpha:0.0];
  [UIView commitAnimations];

  [UIView beginAnimations:@"Slide Around" context:nil];

  [UIView setAnimationDuration:1.0];
  [UIView setAnimationDelegate:self];
  [UIView setAnimationDidStopSelector:@selector(viewAnimationDone:)];
  [UIView setAnimationRepeatCount:3];
  [UIView setAnimationRepeatAutoreverses:YES];

  CGPoint center = [[self animImageView] center];
  center.y += 100;

  [[self animImageView] setCenter:center];

  [UIView commitAnimations];
}

- (void)viewAnimationDone:(NSString*)name {
  [UIView beginAnimations:@"Show Button" context:nil];
  [[self button] setAlpha:1.0];
  [UIView commitAnimations];
}

@end

UIView中的动画是在动画块中定义的，动画块是UIView beginAnimations:context:开始， 在UIView commitAnimations结束。

首先开始将按钮设置透明度为0的，结果是开始动画时候隐藏了。

然后，又开始新的动画中设置委托事件：

[UIView setAnimationDelegate:self]

[UIView setAnimationDidStopSelector:@selector(viewAnimationDone:)];

当动画结束的时候调用viewAnimationDone:方法。

内置UIView动画

UIView具有一个UIViewAnimationTransition属性可以设定动画，这些动画是iOS提供几个常用动画有：

UIViewAnimationTransitionNone

UIViewAnimationTransitionFlipFromLeft

UIViewAnimationTransitionFlipFromRight

UIViewAnimationTransitionCurlUp

UIViewAnimationTransitionCurlDown

实例UIViewAnimation 

#import <UIKit/UIKit.h>

@interface UIViewAnimationViewController : UIViewController {

}

- (IBAction)doUIViewAnimation:(id)sender;

@end

//-m
#import "UIViewAnimationViewController.h"

@implementation UIViewAnimationViewController

- (IBAction)doUIViewAnimation:(id)sender{
    [UIView beginAnimations:@"animationID" context:nil];
    [UIView setAnimationDuration:1.5f];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationRepeatAutoreverses:NO];
    UIButton *theButton = (UIButton *)sender;
    switch (theButton.tag) {
        case 1:
            [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES];//oglFlip, fromLeft
            break;
        case 2:
            [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];//oglFlip, fromRight
            break;
        case 3:
            [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
            break;
        case 4:
            [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];
            break;
        default:
            break;
    }
    //[self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
    [UIView commitAnimations];
}

- (void)viewDidUnload {
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (void)dealloc {
    [super dealloc];
}

@end

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]设置动画曲线，动画曲线指定的是动画进入和退出的方式，它也有几个常量：

UIViewAnimationCurveEaseInOut

UIViewAnimationCurveEaseIn

UIViewAnimationCurveEaseOut

UIViewAnimationCurveLinear

setAnimationTransition: forView: cache:方法第一个参数定义动画类型，第二个参数是当前视图对象，第三个参数上使用缓冲区。

时间： 2024-11-09 06:16:14

IOS之动画的相关文章

[iOS]过渡动画之高级模仿 airbnb

注意:我为过渡动画写了两篇文章:第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 Mac 上的文件预览动画.第二篇:[iOS]过渡动画之高级模仿 airbnb,主要基于第一篇的理论来实现复杂的界面过渡,包括进入和退出动画的串联.最后将这个动画的实现部分与当前界面解耦,并封装为一个普适(其他类似界面也适用)的工具类. 这两篇文章将会带你学到如何实现下图 airbnb 首页类似的过渡动画

iOS block-base 动画简单用法＋关键帧动画设置线性变化速度的问题

本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37  segmentfault-博客原文  http://segmentfault.com/blog/alan/1190000002411296 iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一.不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太轻松了! 这里就介绍一下iOS的block-based an

iOS核心动画

iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单: CALayer CALayer简介 CAL

iOS核心动画中的常用类型

CATransaction 当我们在自定义的图层上修改某些支持动画的属性时,系统会为该属性的修改自动产生动画.这种其实属于隐式动画.隐式动画要得益于CATransaction. 一个CATransaction从调用CATransaction.begin()开始,以CATransaction.commit()结束.在这其间对图层属性的修改,会受该Transaction的控制,可以通过setAnimationDuration修改Transaction的duration. 系统的隐式动画是因为在Run

iOS核心动画学习整理

最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一些知识做了相应的整理,整理为demo(https://github.com/PurpleSweetPotatoes/Layer_learn).此demo中都是基于教程书籍中的编程示例,并加上了注解以方便各位iOS爱好者学习使用. 在这里利用此教程中的基础知识做了2个小demo,活动指示器效果和火焰效

iOS开发——动画OC篇&amp;所有常用动画总结

所有常用动画总结 先来装下B,看不懂没关系,其实我也看不懂-?? iOS provides several different frameworks for adding graphics and animations to your apps. UIKit is an Objective-C API that provides basic 2D drawing, image handling, and ways to animate user interface objects. Core G

iOS核心动画高级技巧之核心动画(三)

iOS核心动画高级技巧之CALayer(一) iOS核心动画高级技巧之图层变换和专用图层(二)iOS核心动画高级技巧之核心动画(三)iOS核心动画高级技巧之性能(四)iOS核心动画高级技巧之动画总结(五) 隐式动画 隐式动画主要作用于CALayer的可动画属性上面,UIView对应的layer是不可以的,只要你改变属性的值,它不是突兀的直接改变过去,而是一个有一个动画的过程,这个时间等属性你可以通过事务(CATransaction)来控制,如果你不自己提供一个事务,它的默认时间是0.25秒,当然

IOS 动画专题 --iOS核心动画

iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单: CALayer CALayer简介 CALayer常用属性 CALayer绘图 Core Animation 基础动画 关键帧动画 动画组 转场动画 逐帧动画 UIView动画封装目 录 基础动画 关

iOS中动画的简单使用

//***简单动画 [UIView animateWithDuration:3 animations:^{ //      _animationView.center = CGPointMake(arc4random()%320, arc4random()%480);//改变中心点 //      _animationView.frame = CGRectMake(arc4random()%320, arc4random()%480,arc4random()%320, arc4random()%

iOS核心动画工作笔记

1.图层和UIVIew的区别:图层不能和用户进行交互,图层性能高 2.imageVIew的图片显示是在图层上面的子层.用maskBounds剪切时剪的是图层,用户看不到是因为子层挡住了 3.CAlayer的代理方法没有协议,任何对象都能成为他的代理,即NSObject的方法 4.UIVIew内部的根图层的代理就是View本身,所以在UIVIew中的drawRect方法绘图.一个view不能设置代理.因为已经是它图层的代理 5.Core Animation直接作用于CALayer,缺点是动画后图片