Animation学习笔记,高级动画

   通过是CALayer来使用更扑朔迷离的一些动画片。

5 使用CoreAnimation制作动画

                 CGFloat m31, m32, m33, m34;

2.1 问题

NSTimer是贰个计时器类,用于定时向钦命对象发送消息,本案例使用NSTimer制作三个图片淡入的效能,即每隔一定的岁月变更图片的阿尔法值,如图-2所示:

新葡萄娱乐 1

图-2

图层的
position 属性是四个 CGPoint 的值,它钦赐图层相当于它父图层的职责,
该值基于父图层的坐标系。

3.3 步骤

贯彻此案例需求依据如下步骤进行。

手续一:搭建界面

率先在开立好的Xcode项指标Storyboard中拖放两个ImageView控件和1个Label控件,在左侧栏的检查器中分别设置ImageView和Label的呈现图片和文字,ImageView展现飞机图片,Label突显文字“Welcome
To iGame“。

扶助将ImageView和Label关联成T昂科雷ViewController的属性aircraft和welcomeLabel,代码如下所示:

  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UILabel *welcomeLabel;
  3. @property (weak, nonatomic) IBOutlet UIImageView *aircraft;
  4. @end

然后在Storyboard中拖放3个Button对象,设置标题为Start,并提到成T帕杰罗ViewController的措施start:。

末段Storyboard中完结的界面如图-4所示:

新葡萄娱乐 2

图-4

手续二:使用UIView达成动画

首先在viewDidLoad方法中应用UIView的卡通方法完成welcomeLabel的入场动画,welcomeLabel从荧屏的左边进入显示屏,使用UIView的卡通片方法animateWithDuration:
delay: usingSpringWithDamping: initialSpringVelocity:
options:扩充弹簧效果,代码如下所示:

 

    • (void)viewDidAppear:(BOOL)animated
  1. {
  2. [super
    viewDidAppear:animated];
  3. //截止地点
  4.     CGRect
    endFrame = self.welcomeLabel.frame;
  5. //开端位置
  6. CGRect startFrame
    = endFrame;
  7. startFrame.origin.x
    = – startFrame.size.width;
  8. //welcome的入场动画
  9. self.welcomeLabel.frame = startFrame;
  10. self.welcomeLabel.alpha = 0.1;
  11. [UIView animateWithDuration:5.0 delay:0.3 usingSpringWithDamping:0.1
    initialSpringVelocity:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
  12. self.welcomeLabel.frame = endFrame;
  13. self.welcomeLabel.alpha = 1.0;
  14. } completion:^(BOOL finished) {
  15. NSLog(@”动画截至”);
  16. }];
  17. }

然后完毕飞机的入场动画,飞机从显示器的花花世界飞入显示屏,代码如下所示:

 

    • (void)viewDidAppear:(BOOL)animated
  1. {
  2. [super
    viewDidAppear:animated];
  3. //停止地方
  4.     CGRect
    endFrame = self.welcomeLabel.frame;
  5. //起第③人置
  6. CGRect startFrame
    = endFrame;
  7. startFrame.origin.x
    = – startFrame.size.width;
  8. //welcome的入场动画
  9. self.welcomeLabel.frame = startFrame;
  10. self.welcomeLabel.alpha = 0.1;
  11. [UIView animateWithDuration:5.0 delay:0.3 usingSpringWithDamping:0.1
    initialSpringVelocity:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
  12. self.welcomeLabel.frame = endFrame;
  13. self.welcomeLabel.alpha = 1.0;
  14. } completion:^(BOOL finished) {
  15. NSLog(@”动画截止”);
  16. }];
  17. //飞机的入场动画
  18. endFrame = self.aircraft.frame;
  19. startFrame = endFrame;
  20. startFrame.origin.y
    = self.view.bounds.size.height;
  21. self.aircraft.frame
    = startFrame;
  22. [UIView animateWithDuration:2.0 animations:^{
  23. self.aircraft.frame
    = endFrame;
  24. }];
  25. }

最终达成方式start:完结都飞机机的宇航动画,飞机从荧屏下方飞到显示屏上方,并且在动画甘休今后往往在显示器中飞行,代码如下所示:

 

    • (IBAction)start:(UIButton *)sender
  1. {
  2. CGPoint point
    = self.aircraft.center;
  3. point.y = 80;
  4. [UIView animateWithDuration:3.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
  5. self.aircraft.center
    = point;
  6. } completion:^(BOOL finished) {
  7. NSLog(@”动画截至”);
  8. }];
  9. }

6.抓好运用质量。应用程序只当发生变更的时候才重绘内容。再小的应用程序也亟需变更和提供布局服务层。核心动画还免去了在动画的帧速率

6.2 方案

首先在开立好的Xcode项指标Storyboard中拖放三个ImageView控件和五个Button控件,在左侧栏的检查器中安装ImageView和Button的习性,并将ImageView关联成T途观RotationViewController的特性imageView。

再将八个Button关联成T宝马7系RotationViewController的多少个点子rotationX:、rotationY:、rotationZ:以及rotation:。

下一场在viewDidLoad方法中装置imageView的layer属性,将imageView设置成圆角。

最后实现三个Button的动作方法,rotationX:达成效益围绕X轴旋转,rotationY:完成效益围绕Y轴转动,rotationZ:达成效益围绕Z轴旋转,rotation:完成效益围绕着XYZ轴同时旋转。

   Layer Classes是core animation的基本功。Layer
Classes提供了三个华而不实的定义,这几个定义对于那多少个运用NSview和UIview的开发者来说是很熟练的。基础层是由CAlayer类提供的,CAlayer是独具Core
Animation层的父类。 

1.1 问题

UIImage动画是IOS提供的最基本的动画,平时用于制作一些小型的动画片,本案例使用UIImage制作1个家狗跑动的卡通,如图-1所示:

新葡萄娱乐 3

图-1

   iOS 独特的CALayer

4.4 完整代码

此案例中,T安德拉ViewController.m文件中的完整代码如下所示:

 

  1. #import “TRViewController.h”
    1. @interface
      TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end
    1. @implementation TRViewController
      • (void)viewDidLoad
  4. {
  5. [super
    viewDidLoad];
  6. //设置view的layer
  7.     CALayer *layer = self.view.layer;
  8. layer.backgroundColor = [[UIColor orangeColor] CGColor];
  9. layer.cornerRadius =
    30.0;
  10. //将imageView设置成圆角
  11. self.imageView.layer.cornerRadius = 10.0;
  12. //打开遮罩,不然无效
  13. self.imageView.layer.masksToBounds =YES;
    1. //加子层
  14. CALayer *subLayer = [CALayer layer];
  15. subLayer.backgroundColor = [UIColor purpleColor].CGColor;
  16. subLayer.frame =
    CGRectMake(30, 200, 100, 120);
  17. subLayer.shadowColor = [UIColor greenColor].CGColor;
  18. subLayer.shadowOffset = CGSizeMake(2, 2);
  19. subLayer.shadowRadius = 5.0;
  20. subLayer.shadowOpacity = 0.8;
  21. subLayer.cornerRadius = 10.0;
  22. [layer addSublayer:subLayer];
    1. //加有内容的子层
  23. CALayer *imageLayer = [CALayer new];
  24. imageLayer.frame =
    CGRectMake(180, 300, 100, 120);
  25. imageLayer.contents = (id)[UIImage imageNamed:@”d.jpg”].CGImage;
  26. imageLayer.cornerRadius = 10.0;
  27. imageLayer.masksToBounds = YES;
  28. [layer addSublayer:imageLayer];
  29. }
  30. @end 

 项目文件下载

4 CALayer的简练利用

(1)CAScrollLayer:它是CALayer的二个子类,用来突显layer的某一部分,1个CAScrollLayer对象的滚动区域是由其子层的布局来定义的。CAScrollLayer没有提供键盘或许鼠标事件,也未曾提供强烈的滚动条。

3.4 完整代码

此案例中,T兰德奥德赛ViewController.m文件中的完整代码如下所示:

 

  1. #import “TRViewController.h”
    1. @interface
      TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UILabel *welcomeLabel;
  3. @property (weak, nonatomic) IBOutlet UIImageView *aircraft;
  4. @end
    1. @implementation TRViewController
    • (void)viewDidAppear:(BOOL)animated
  5. {
  6. [super
    viewDidAppear:animated];
  7. //截止地点
  8.     CGRect
    endFrame = self.welcomeLabel.frame;
  9. //发轫地方
  10. CGRect startFrame
    = endFrame;
  11. startFrame.origin.x
    = – startFrame.size.width;
  12. //welcome的入场动画
  13. self.welcomeLabel.frame = startFrame;
  14. self.welcomeLabel.alpha = 0.1;
  15. [UIView animateWithDuration:5.0 delay:0.3 usingSpringWithDamping:0.1
    initialSpringVelocity:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
  16. self.welcomeLabel.frame = endFrame;
  17. self.welcomeLabel.alpha = 1.0;
  18. } completion:^(BOOL finished) {
  19. NSLog(@”动画停止”);
  20. }];
  21. //飞机的入场动画
  22. endFrame = self.aircraft.frame;
  23. startFrame = endFrame;
  24. startFrame.origin.y
    = self.view.bounds.size.height;
  25. self.aircraft.frame
    = startFrame;
  26. [UIView animateWithDuration:2.0 animations:^{
  27. self.aircraft.frame
    = endFrame;
  28. }];
  29. }
      • (IBAction)start:(UIButton *)sender
  30. {
  31. CGPoint point
    = self.aircraft.center;
  32. point.y = 80;
  33. [UIView animateWithDuration:3.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
  34. self.aircraft.center
    = point;
  35. } completion:^(BOOL finished) {
  36. NSLog(@”动画甘休”);
  37. }];
  38. }
  39. @end 

你能够因此以下的任何二个方法改变
CATransform3D 的数据结构:

2 使用NSTimer做2个图形淡入的效益

http://blog.163.com/donald\_wong5/blog/static/190962406201191912456928/

3.2 方案

率先在创制好的Xcode项目标Storyboard中拖放叁个ImageView控件和二个Label控件,在右侧栏的检查器中分别设置ImageView和Label的显示图片和文字,ImageView展现飞机图片,Label显示文字“Welcome
To
iGame“,并将ImageView和Label关联成T路虎极光ViewController的性质aircraft和welcomeLabel。

下一场在Storyboard中拖放一个Button对象,设置标题为Start,并涉及成TOdysseyViewController的主意start:。

说到底在viewDidLoad方法中应用UIView的卡通方法实现aircraft和welcomeLabel的入场动画,并在措施start:中选用UIView的卡通片方法完毕飞机的航空动画。

  (1)使用带有图表内容的 CGImageRef 来显式的安装图层的 contents
的性质。

3 使用UIView制作动画

   
主旨动画扩张了键-值编码协议,允许通过机要路径获取和设置2个图层的
CATransform3D 矩阵的值。表 4 描述了图层的 transform 和 sublayerTransform
属性的相应关键路径。

2.2 方案

先是在创建好的Xcode项目标Storyboard中拖放三个和荧屏一样大小的ImageView控件,并将ImageView设置为THighlanderViewController的习性imageView。

然后在viewDidLoad方法中开创3个计时器,每隔三分之一0秒重复调用方法changeAlpha:。

最后完成情势changeAlpha:,每一次调用都更改imageView的阿尔法值。

 

6.3 步骤

贯彻此案例必要听从如下步骤举行。

步骤一:搭建Storyboard界面

第②在成立好的Xcode项指标Storyboard中拖放二个ImageView控件和多个Button控件,在左边栏的检查器中设置ImageView和Button的性质,并将ImageView关联成TQashqaiRotationViewController的习性imageView,代码如下所示:

 

  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end

Storyboard中界面完成的结果如图-9所示:

新葡萄娱乐 4

图-9

手续二:达成3D旋转动画

首先将多个Button关联成T汉兰达RotationViewController的三个法子rotationX:、rotationY:、rotationZ:以及rotation:,

在viewDidLoad方法中设置imageView的layer属性,将imageView设置成圆角,代码如下所示:

 

    • (void)viewDidLoad
  1. {
  2. [super
    viewDidLoad];
  3. self.imageView.layer.cornerRadius = 8.0;
  4. self.imageView.layer.masksToBounds = YES;
  5. }

接下来完成多少个Button的动作方法,在rotationX:方法中经过layer的transform属性,达成效益围绕X轴旋转,然后利用类似的主意落成方式rotationY:和rotationZ:,代码如下所示:

 

    • (IBAction)rotationX:(id)sender
  1. {
  2. //创设基本动画
  3. CABasicAnimation
    *transformAnimation = [CABasicAnimation
    animationWithKeyPath:@”transform”];
  4. transformAnimation.fromValue = [NSValue
    valueWithCATransform3D:self.imageView.layer.transform];
  5. //计算目的值
  6. transformAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 0, 0)];
  7. transformAnimation.duration = 3.0;
  8. //将动画片添加到imageView的layer下面
  9. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
  10. }
    • (IBAction)rotationY:(id)sender
  11. {
  12. CABasicAnimation
    *transformAnimation = [CABasicAnimation
    animationWithKeyPath:@”transform”];
  13. transformAnimation.fromValue = [NSValue
    valueWithCATransform3D:self.imageView.layer.transform];
  14. transformAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0.0, 1.0, 0)];
  15. transformAnimation.duration = 3.0;
  16. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
  17. }
    • (IBAction)rotationZ:(id)sender
  18. {
  19. CABasicAnimation
    *transformAnimation = [CABasicAnimation
    animationWithKeyPath:@”transform”];
  20. transformAnimation.fromValue = [NSValue
    valueWithCATransform3D:self.imageView.layer.transform];
  21. transformAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0.0, 0.0, 1.0)];
  22. transformAnimation.duration = 3.0;
  23. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
  24. }

末段落成rotation:方法,该措施实现效益围绕着XYZ轴同时旋转,代码如下所示:

 

    • (IBAction)rotation:(id)sender
  1. {
  2. CABasicAnimation
    *transformAnimation = [CABasicAnimation
    animationWithKeyPath:@”transform”];
  3. transformAnimation.fromValue = [NSValue
    valueWithCATransform3D:self.imageView.layer.transform];
  4. transformAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 1.0, 1.0)];
  5. transformAnimation.duration = 3.0;
  6. transformAnimation.delegate = self;
  7. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
  8. }

贯彻animation的生命周期方法,当rotation动画截至时将imageView的transform属性值保持不变,从界面上移除,代码如下所示:

 

    • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
  1. {
  2. self.imageView.layer.transform = CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 1.0, 1.0);
  3. }



5.4 完整代码

本案例中,TRAnimationViewController.m文件中的完整代码如下所示:

 

  1. #import “TRAnimationViewController.h”
    1. @interface
      TRAnimationViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end
    1. @implementation TRAnimationViewController
    • (void)viewDidLoad
  4. {
  5. [super
    viewDidLoad];
  6. //设置imageView的layer属性
  7.     self.imageView.layer.cornerRadius = 8.0;
  8. self.imageView.layer.masksToBounds = YES;
  9. }
  10. //创造图片运动的曲线
    • (void)createCurve:(UIBezierPath *)path
  11. {
  12. [path moveToPoint:self.imageView.center];
  13. CGPoint
    targetPoint = CGPointMake(self.view.bounds.size.width – self.imageView.frame.size.width – 20, self.view.bounds.size.height – self.imageView.frame.size.height – 20);
  14. CGPoint control1
    = CGPointMake(self.view.bounds.size.width – self.imageView.frame.size.width – 20, self.imageView.frame.origin.y);
  15. CGPoint control2
    = CGPointMake(self.imageView.frame.origin.x, self.view.bounds.size.height – self.imageView.frame.size.height – 20);
  16. [path addCurveToPoint:targetPoint
    controlPoint1:control1
    controlPoint2:control2];
  17. }
    • (IBAction)start:(id)sender
  18. {
  19. UIBezierPath *path = [UIBezierPath bezierPath];
  20. [self createCurve:path];
  21. //创造关键帧
  22. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation
    animationWithKeyPath:@”position”];
  23. //设置相关属性
  24. moveAnimation.path =
    path.CGPath;
  25. moveAnimation.removedOnCompletion = YES;
    1. //创造缩放动画
  26. CABasicAnimation
    *scaleAnimation =
    [CABasicAnimation
    animationWithKeyPath:@”transform”];
  27. scaleAnimation.fromValue = [NSValue
    valueWithCATransform3D:CATransform3DIdentity];
  28. scaleAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
  29. scaleAnimation.removedOnCompletion = YES;
    1. //成立折射率动画
  30. CABasicAnimation
    *alphaAnimation =
    [CABasicAnimation
    animationWithKeyPath:@”opacity”];
  31. alphaAnimation.fromValue = @1.0;
  32. alphaAnimation.toValue = @0.0;
  33. alphaAnimation.removedOnCompletion = YES;
    1. //将以上动画放进1个动画组
  34. CAAnimationGroup
    *group = [CAAnimationGroup animation];
  35. group.animations =
    @[moveAnimation,
    scaleAnimation, alphaAnimation];
  36. group.duration =
    2.0;
  37. group.delegate =
    self;
  38. //加入到Layer中
  39. [self.imageView.layer addAnimation:group forKey:nil];
  40. }
      • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
  41. {
  42. [self.imageView
    removeFromSuperview];
  43. }
  44. @end

     

1.2 方案

率先在创设好的Xcode项指标Storyboard中拖放四个ImageView控件,并提到成TPAJEROViewController的品质imageView。

然后在viewDidLoad方法中选用工厂方法animatedImageNamed:成立UIImage对象image。

末尾将imageView的image属性设置为刚刚创造的image对象即可。

    你不能透过 Objective-C 2.0
的性质来设置结构域的值,比如上面包车型地铁代码将会不可能不奇怪运维:

6.4 完整代码

本案例中,TKoleosRotationViewController.m文件中的完整代码如下所示:

 

  1. #import “TRRotationViewController.h”
    1. @interface
      TRRotationViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
    1. @end
    1. @implementation TRRotationViewController
      • (void)viewDidLoad
  3. {
  4. [super
    viewDidLoad];
  5. self.imageView.layer.cornerRadius = 8.0;
  6. self.imageView.layer.masksToBounds = YES;
  7. }
      • (IBAction)rotationX:(id)sender
  8. 新葡萄娱乐,{
  9. //创设基本动画
  10. CABasicAnimation
    *transformAnimation = [CABasicAnimation
    animationWithKeyPath:@”transform”];
  11. transformAnimation.fromValue = [NSValue
    valueWithCATransform3D:self.imageView.layer.transform];
  12. //总括目的值
  13. transformAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 0, 0)];
  14. transformAnimation.duration = 3.0;
  15. //将动画片添加到imageView的layer上边
  16. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
  17. }
    • (IBAction)rotationY:(id)sender
  18. {
  19. CABasicAnimation
    *transformAnimation = [CABasicAnimation
    animationWithKeyPath:@”transform”];
  20. transformAnimation.fromValue = [NSValue
    valueWithCATransform3D:self.imageView.layer.transform];
  21. transformAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0.0, 1.0, 0)];
  22. transformAnimation.duration = 3.0;
  23. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
  24. }
    • (IBAction)rotationZ:(id)sender
  25. {
  26. CABasicAnimation
    *transformAnimation = [CABasicAnimation
    animationWithKeyPath:@”transform”];
  27. transformAnimation.fromValue = [NSValue
    valueWithCATransform3D:self.imageView.layer.transform];
  28. transformAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0.0, 0.0, 1.0)];
  29. transformAnimation.duration = 3.0;
  30. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
  31. }
    • (IBAction)rotation:(id)sender
  32. {
  33. CABasicAnimation
    *transformAnimation = [CABasicAnimation
    animationWithKeyPath:@”transform”];
  34. transformAnimation.fromValue = [NSValue
    valueWithCATransform3D:self.imageView.layer.transform];
  35. transformAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 1.0, 1.0)];
  36. transformAnimation.duration = 3.0;
  37. transformAnimation.delegate = self;
  38. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
  39. }
      • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
  40. {
  41. self.imageView.layer.transform = CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 1.0, 1.0);
  42. }
  43. @end 

1.1.2 动画和计时类(Animation and Timing
Classes)

1.4 完整代码

此案例中,T本田UR-VViewController.m文件中的完整代码如下所示:

 

  1. #import “TRViewController.h”
    1. @interface
      TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end
    1. @implementation TRViewController
    • (void)viewDidLoad
  4. {
  5. [super
    viewDidLoad];
  6. UIImage *image = [UIImage animatedImageNamed:@”0_0_run_” duration:2];
  7. self.imageView.image
    = image;
  8. }
  9. @end 

               

3.1 问题

UIView动画是UIKit提供尤其制作动画的API,其本质是对CoreAnimation的卷入,使用UIView能够轻松方便的贯彻动画,不必要通过任何总计,本案例使用UIView制作几个飞行器运动的动画片,如图-3所示:

新葡萄娱乐 5

图-3

  (3)继承 CALayer 类重载显示的函数。

4.2 方案

首先在创立好的Xcode项目标Storyboard中拖放三个ImageView控件,在左侧栏的检查器中安装ImageView的来得图片,并将ImageView和Label关联成T奥迪Q7ViewController的性质imageView。

下一场在viewDidLoad方法中装置self.view的layer的背景颜色和圆角。再安装imageView的layer属性,将layer设置完圆角之后要将遮罩打开。

最终在viewDidLoad方法中分别给self.view.layer添加2个无图片的子层和有图片的子层。

3.轻量级的数据结构,它能够而且显示并让广大个图层发生动画效果。

2.4 完整代码

此案例中,TPRADOViewController.m文件中的完整代码如下所示:

 

  1. #import “TRViewController.h”
    1. @interface
      TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end
    1. @implementation TRViewController
  4. #define FPS 30.0 //帧率
  5. #define DURATION 5.0 //动画时间长度
    • (void)viewDidLoad
  6. {
  7. [super
    viewDidLoad];
  8.     [NSTimer scheduledTimerWithTimeInterval:1/FPS target:self selector:@selector(changeAlpha:)
    userInfo:nil repeats:YES];
  9. }
  10. //当前值=开始值+当前的帧数*(结束值-开始值)/(帧率*时长)
    • (void)changeAlpha:(NSTimer *)timer
  11. {
  12. static NSUInteger count = 0;
  13. count++;
  14. self.imageView.alpha
    = count * 1.0/(FPS * DURATION);
  15. if (count >= FPS * DURATION) {
  16. [timer invalidate];
  17. }
  18. }
  19. @end 

新葡萄娱乐 6

4.3 步骤

福如东海此案例须要依照如下步骤实行。

步骤一:搭建Storyboard界面

首先在创建好的Xcode项目标Storyboard中拖放叁个ImageView控件,在左边栏的检查器中安装ImageView的显示图片,并将ImageView和Label关联成T中华VViewController的属性imageView,代码如下所示:

  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end

步骤二:设置layer属性

首先在viewDidLoad方法中设置self.view的layer的背景颜色和圆角,代码如下所示:

    • (void)viewDidLoad
  1. {
  2. [super
    viewDidLoad];
  3. //设置view的layer
  4.     CALayer *layer = self.view.layer;
  5. layer.backgroundColor = [[UIColor orangeColor] CGColor];
  6. layer.cornerRadius =
    30.0;
  7. }

运作程序意识背景变成圆角的,如图-6所示:

新葡萄娱乐 7

图-6

附带再设置imageView的layer属性,将layer设置完圆角之后要将遮罩打开,代码如下所示:

 

    • (void)viewDidLoad
  1. {
  2. [super
    viewDidLoad];
  3. //设置view的layer
  4.     CALayer *layer = self.view.layer;
  5. layer.backgroundColor = [[UIColor orangeColor] CGColor];
  6. layer.cornerRadius =
    30.0;
  7. //将imageView设置成圆角
  8. self.imageView.layer.cornerRadius = 10.0;
  9. //打开遮罩,不然无效
  10. self.imageView.layer.masksToBounds =YES;
  11. }

接下来在viewDidLoad方法中给self.view.layer添加1个无图片的子层,代码如下所示:

 

    • (void)viewDidLoad
  1. {
  2. [super
    viewDidLoad];
  3. //设置view的layer
  4.     CALayer *layer = self.view.layer;
  5. layer.backgroundColor = [[UIColor orangeColor] CGColor];
  6. layer.cornerRadius =
    30.0;
  7. //将imageView设置成圆角
  8. self.imageView.layer.cornerRadius = 10.0;
  9. //打开遮罩,不然无效
  10. self.imageView.layer.masksToBounds =YES;
    1. //加子层
  11. CALayer *subLayer = [CALayer layer];
  12. subLayer.backgroundColor = [UIColor purpleColor].CGColor;
  13. subLayer.frame =
    CGRectMake(30, 200, 100, 120);
  14. //设置阴影
  15. subLayer.shadowColor = [UIColor greenColor].CGColor;
  16. subLayer.shadowOffset = CGSizeMake(2, 2);
  17. subLayer.shadowRadius = 5.0;
  18. subLayer.shadowOpacity = 0.8;
  19. //设置圆角
  20. subLayer.cornerRadius = 10.0;
  21. [layer addSublayer:subLayer];
  22. }

说到底在viewDidLoad方法中给self.view.layer添加贰个有图表的子层,代码如下所示:

 

    • (void)viewDidLoad
  1. {
  2. [super
    viewDidLoad];
  3. //设置view的layer
  4.     CALayer *layer = self.view.layer;
  5. layer.backgroundColor = [[UIColor orangeColor] CGColor];
  6. layer.cornerRadius =
    30.0;
  7. //将imageView设置成圆角
  8. self.imageView.layer.cornerRadius = 10.0;
  9. //打开遮罩,不然无效
  10. self.imageView.layer.masksToBounds =YES;
  11. //加子层
  12. CALayer *subLayer = [CALayer layer];
  13. subLayer.backgroundColor = [UIColor purpleColor].CGColor;
  14. subLayer.frame =
    CGRectMake(30, 200, 100, 120);
  15. subLayer.shadowColor = [UIColor greenColor].CGColor;
  16. subLayer.shadowOffset = CGSizeMake(2, 2);
  17. subLayer.shadowRadius = 5.0;
  18. subLayer.shadowOpacity = 0.8;
  19. subLayer.cornerRadius = 10.0;
  20. [layer addSublayer:subLayer];
  21. //加有内容的子层
  22. CALayer *imageLayer = [CALayer new];
  23. imageLayer.frame =
    CGRectMake(180, 300, 100, 120);
  24. //设置层的始末
  25. imageLayer.contents = (id)[UIImage imageNamed:@”d.jpg”].CGImage;
  26. imageLayer.cornerRadius = 10.0;
  27. imageLayer.masksToBounds = YES;
  28. [layer addSublayer:imageLayer];
  29. }

 https://developer.apple.com/library/prerelease/ios/\#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/Introduction/Introduction.html\#//apple\_ref/doc/uid/TP30001066

5.3 步骤

兑现此案例供给依照如下步骤进行。

步骤一:搭建Storyboard界面

率先在开创好的Xcode项目标Storyboard中拖放一个ImageView控件和3个Button控件,在右侧栏的检查器中装置ImageView和Button的品质,并将ImageView关联成TRAnimationViewController的品质imageView,将Button关联成TRAnimationViewController的措施start:,代码如下所示:

 

  1. @interface TRAnimationViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end
    • (IBAction)start:(id)sender
  4. {
  5. }

手续二:完毕imageView的移动动画

首先在viewDidLoad方法中设置imageView的layer属性,将imageView设置成圆角,代码如下所示:

 

    • (void)viewDidLoad
  1. {
  2. [super
    viewDidLoad];
  3. //设置imageView的layer属性
  4.     self.imageView.layer.cornerRadius = 8.0;
  5. self.imageView.layer.masksToBounds = YES;
  6. }

下一场达成start:方法,当点击按钮imageView开端履行动画。首先制定二个imageView的卡通片路径path,是多个UIBezierPath类型,代码如下所示:

    • (IBAction)start:(id)sender
  1. {
  2. UIBezierPath *path = [UIBezierPath bezierPath];
  3. [self createCurve:path];
  4. }
      • (IBAction)start:(id)sender
  5. {
  6. UIBezierPath *path = [UIBezierPath bezierPath];
  7. [self createCurve:path];
  8. //成立关键帧
  9. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation
    animationWithKeyPath:@”position”];
  10. //设置相关属性
  11. moveAnimation.path =
    path.CGPath;
  12. moveAnimation.removedOnCompletion = YES;
  13. }

下一场创制主要帧动画,并设置相关属性,代码如下所示:

    • (IBAction)start:(id)sender
  1. {
  2. UIBezierPath *path = [UIBezierPath bezierPath];
  3. [self createCurve:path];
  4. //创制关键帧
  5. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation
    animationWithKeyPath:@”position”];
  6. //设置相关属性
  7. moveAnimation.path =
    path.CGPath;
  8. moveAnimation.removedOnCompletion = YES;
  9. }

再创设缩放动画以及发光度改变动画,代码如下所示:

 

    • (IBAction)start:(id)sender
  1. {
  2. UIBezierPath *path = [UIBezierPath bezierPath];
  3. [self createCurve:path];
  4. //创立关键帧
  5. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation
    animationWithKeyPath:@”position”];
  6. //设置相关属性
  7. moveAnimation.path =
    path.CGPath;
  8. moveAnimation.removedOnCompletion = YES;
  9. //创立缩放动画
  10. CABasicAnimation
    *scaleAnimation =
    [CABasicAnimation
    animationWithKeyPath:@”transform”];
  11. scaleAnimation.fromValue = [NSValue
    valueWithCATransform3D:CATransform3DIdentity];
  12. scaleAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
  13. scaleAnimation.removedOnCompletion = YES;
    1. //创设反射率动画
  14. CABasicAnimation
    *alphaAnimation =
    [CABasicAnimation
    animationWithKeyPath:@”opacity”];
  15. alphaAnimation.fromValue = @1.0;
  16. alphaAnimation.toValue = @0.0;
  17. alphaAnimation.removedOnCompletion = YES;
  18. }

最终将上述动画放进二个卡通群组里面,即CAAnimationGroup类型的group,并将动画片添加到imageView的layer中,代码如下所示:

 

    • (IBAction)start:(id)sender
  1. {
  2. UIBezierPath *path = [UIBezierPath bezierPath];
  3. [self createCurve:path];
  4. //成立关键帧
  5. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation
    animationWithKeyPath:@”position”];
  6. //设置相关属性
  7. moveAnimation.path =
    path.CGPath;
  8. moveAnimation.removedOnCompletion = YES;
    1. //创制缩放动画
  9. CABasicAnimation
    *scaleAnimation =
    [CABasicAnimation
    animationWithKeyPath:@”transform”];
  10. scaleAnimation.fromValue = [NSValue
    valueWithCATransform3D:CATransform3DIdentity];
  11. scaleAnimation.toValue = [NSValue
    valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
  12. scaleAnimation.removedOnCompletion = YES;
    1. //创造光滑度动画
  13. CABasicAnimation
    *alphaAnimation =
    [CABasicAnimation
    animationWithKeyPath:@”opacity”];
  14. alphaAnimation.fromValue = @1.0;
  15. alphaAnimation.toValue = @0.0;
  16. alphaAnimation.removedOnCompletion = YES;
    1. //将上述动画放进三个动画组
  17. CAAnimationGroup
    *group = [CAAnimationGroup animation];
  18. group.animations =
    @[moveAnimation,
    scaleAnimation, alphaAnimation];
  19. group.duration =
    2.0;
  20. group.delegate =
    self;
  21. //加入到Layer中
  22. [self.imageView.layer addAnimation:group forKey:nil];
  23. }

实现animation的生命周期方法,当动画结束时将imageView从界面上移除,代码如下所示:

 

    • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
  1. {
  2. [self.imageView
    removeFromSuperview];
  3. }

图层的
anchorPoint 属性是四个 CGPoint 值,它钦赐了一个基于图层 bounds 的符
合地点坐标系的任务。锚点(anchor point)钦赐了 bounds 相对于 position
的值,同
时也当作变换时候的支点。锚点使用单元空间坐标系表示,(0.0,0.0)点接近图层
的原点,而(1.0,1.0)是原点的对角点。改变图层的父图层的变换属性(假设存在
的话)将会潜移默化到 anchorPoint 的势头,具体变化在于父图层坐标系的 Y 轴。 

2.3 步骤

福寿绵绵此案例供给依照如下步骤实行。

步骤一:拖放ImageView控件

第二在创设好的Xcode项指标Storyboard中拖放一个和荧屏一样大小的ImageView控件,在左边栏的检查器中给ImageView设置image,并将ImageView设置为TOdysseyViewController的质量imageView,代码如下所示:

 

  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end

步骤二:创设计时器

在viewDidLoad方法中创设1个计时器,每隔三分一0秒重复调用方法changeAlpha:,代码如下所示:

    • (void)viewDidLoad
  1. {
  2. [super
    viewDidLoad];
  3.     [NSTimer scheduledTimerWithTimeInterval:1/FPS target:self selector:@selector(changeAlpha:)
    userInfo:nil repeats:YES];
  4. }

步骤三:实现changeAlpha:方法

第①定义七个宏FPS用来代表帧率,DURATION用来表示动画时间长度,在changeAlpha:方法中依照FPS和DURATION计算imageView的阿尔法值,代码如下所示:

 

  1. #define FPS 30.0 //帧率
  2. #define DURATION 5.0 //动画时间长度
  3. //当前值=开端值+当前的帧数*(结束值-开始值)/(帧率*时长)
    • (void)changeAlpha:(NSTimer *)timer
  4. {
  5. static NSUInteger count = 0;
  6. count++;
  7. self.imageView.alpha
    = count * 1.0/(FPS * DURATION);
  8. if (count >= FPS * DURATION) {
  9. [timer invalidate];
  10. }
  11. }

 图层的动画属性的每三个改动必然是业务的2个有个别。CATransaction
是核心动画里面负责协调多少个卡通原子更新显示操作。事务帮助嵌套使用。 

4.1 问题

任何UIView及子类对象都有壹天品质叫layer,此属性正是UIView的CoreAnimation层,类型是CALayer,本案例演示CALayer怎么样使用,如图-5所示:

新葡萄娱乐 8

图-5

主题动画的基础类富含在 Quartz 宗旨框架(Quartz Core
framework)里面,就算它的任何图层类在其它框架之中定义。下图展现了宗旨动画的类层次结构。 

6 使用CATransform3D制作3D动画

(2)提供二个代理直接绘制到Core Graphics image context(大旨图形的上下文)

1 演示UIImage制作的动画片

 第一章  图层的几何和生成

1.3 步骤

完毕此案例必要依照如下步骤举办。

步骤一:拖放ImageView控件

率先在创建好的Xcode项指标Storyboard中拖放一个ImageView控件,并提到成T兰德汉兰达ViewController的特性imageView,代码如下所示:

  1. @interface TRViewController ()
  2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  3. @end

步骤二:使用UIImage生成动画

先是导入图片素材,图片的命名规则是按顺序命名,即每张图纸的称谓前半某些同样后半有的是序号,例如:0_0_run_00、0_0_run_01、0_0_run_02……

接下来在viewDidLoad方法中利用工厂方法animatedImageNamed:创造UIImage对象image,那里需求注意的是imageNamed参数,传入的是图片名称不带序号的一部分。

最终将imageView的image属性设置为刚刚创造的image对象,代码如下所示:

 

    • (void)viewDidLoad
  1. {
  2. [super
    viewDidLoad];
  3. UIImage *image = [UIImage animatedImageNamed:@”0_0_run_” duration:2];
  4. self.imageView.image
    = image;
  5. }

  (2)钦命多个信托,它提供可能重绘内容。

5.1 问题

CoreAnimation是2个图形渲染和卡通片的尾部框架,可以提供越来越多更强大的图样渲染突显效果。本案例使用CoreAnimation的最首要帧动绘画艺术术和底蕴动画方法制作动画,如图-7所示:

新葡萄娱乐 9

图-7

 

5.2 方案

率先在创制好的Xcode项目标Storyboard中拖放2个ImageView控件和2个Button控件,在左侧栏的检查器中装置ImageView和Button的本性,并将ImageView关联成TRAnimationViewController的性情imageView,将Button关联成TRAnimationViewController的方法start:。

接下来在viewDidLoad方法中设置imageView的layer属性,将imageView设置成圆角。

最终实现start:方法,当点击按钮imageView开始执行动画。首先制定八个imageView的动画路径path,是三个UIBezierPath类型,然后分别创设关键帧动画、缩放动画以及发光度改变动画,最后将以上动画放进两个动画片群组里面,即CAAnimationGroup类型的group,并将动画片添加到imageView的layer中。

图层的五个天性钦赐了转移矩阵:transform 和 sublayerTransform 属性。图层的
transform 属性钦定的矩阵结合图层的 anchorPoint
属性作用于图层和图层的子图层上 面。图 3 展现在行使 anchorPoint
私下认可值(0.5,0.5)的时候转动和缩放变换怎么着影响一个图层。而图 4
展现了千篇一律的矩阵变换在 anchorPoint 为(0.0,0.0)的时候什么转移3个图层。图层的 sublayerTransform
属性钦定的矩阵只会影响图层的子图层,而不会对 图层本人发生影响。

6.1 问题

CATransform3D是二个结构体,是二个4×4的矩阵,用于描述一个3D图纸的变形,包蕴旋转、缩放以及活动,本案例使用CATransform3D制作3D旋转动画,如图-8所示:

新葡萄娱乐 10

图-8

 新葡萄娱乐 11

当你设置图层的 frame 属性的时候,position 会依据锚点(anchorPoint)相应的改
变,而当你设置图层的 position 属性的时候,bounds
会依据锚点(anchorPoint)做相应的转移。 

新葡萄娱乐 12

 图层的几何变动涉及到修改图层的几何属性,比如大小,锚点,圆角等性格等等,这些片段详细的能够查阅Quartz
2D
的文书档案,那几个文书档案讲的比较详细。

 

//向右下角收缩移动
– (IBAction)buttonClick:(id)sender
{
    
    CGPoint fromPoint = imageView.center;
    
    //路径曲线
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    [movePath moveToPoint:fromPoint];
     CGPoint toPoint = CGPointMake(300, 460);
    [movePath addQuadCurveToPoint:toPoint
                     controlPoint:CGPointMake(toPoint.x,fromPoint.y)];
    
   //关键帧
    CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@”position”];
    moveAnim.path = movePath.CGPath;
    moveAnim.removedOnCompletion = YES;
    
    //旋转变化
    CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@”transform”];
    scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    //x,y轴缩短到0.1,Z 轴不变
    scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
    scaleAnim.removedOnCompletion = YES;
    
    //光滑度变化
    CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@”alpha”];
    opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
    opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
    opacityAnim.removedOnCompletion = YES;
    
    //关键帧,旋转,反射率组合起来执行
    CAAnimationGroup *animGroup = [CAAnimationGroup animation];
    animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];
    animGroup.duration = 1;
    [imageView.layer addAnimation:animGroup forKey:nil];

     

  在该示例中,anchorPoint
私下认可值为(0.5,0.5),位于图层的基本点。图层的 position
值为(100.0,100.0),bounds 为(0.0,0.0,120,80.0)。通过测算获得图层的
frame为(40.0,60.0,120.0,80.0)。

 

   显式动画

 

(1)直接设置层的content属性到三个core
graphics图,只怕通过delegation来安装

               清单 2 中的示例表明了何等计划3个 CATransform3D
一个角度变换。

动画片,包罗动画的种种阶段的价值,以及关键帧时间和计时功效的一类别值。在
动画运营是,每个值被一定的插入值替代。

  (2)CAKeyframeAnimation
提供支撑至关心重视要帧动画。你钦赐动画的一个图层属性的严重性路径,3个象征在动画的每种阶段的价值的数组,还有二个关键帧时间的数组和岁月函数。

 

 在core aniamtion和cocoa
view之间有十分的大的相似之处,他们中间最大的定义上的差异正是layer不间接渲染到显示器上。

 新葡萄娱乐 13

行使变换函数能够在大旨动画里面在操作矩阵。你能够选拔那么些函数(如下表)去
创造一个矩阵一般后边用于转移图层大概它的子图层的 transform 和
sublayerTransform属性。变换函数恐怕直接操或然重回八个CATransform3D的数码结
构。这能够让你能够创设不难或复杂的变换,以便重复使用。

 

图层的
bounds 属性是叁个 CGRect 的值,钦点图层的高低(bounds.size)和图层的
原点(bounds.origin)。当您重写图层的重画方法的时候,bounds
的原点能够用作图形 上下文的原点。

 

有的依照图层的属性使用单元坐标空间度量它们的值。单元坐标空间钦赐图层边
界的相对值,而不是相对值。单元坐标空间加以的 x 和 y 的值总是在 0.0 到 1.0
之间。 内定贰个沿 X 轴的值为 0.0
的点,获得的是图层左侧缘的三个点,而钦赐贰个 1.0
的点,则是图层左侧缘的三个点。(对 Y 轴而言,要是是在 iOS 系统,则 0.0
对应于 顶部的点,而 1.0 则是底层的点,而在 Mac OS X
系统,获得的刚巧相反,就像此前提到的坐标系不相同一样)。而点(0.5,0.5)则刚刚是图层的为主点。

    替换的法门是,你必须透过
setValue:forKeyPath:也许 valueForKeyPath:方法, 具体如下:

– (IBAction)rightRotateBtnClick:(id)sender
{
    CGPoint fromPoint = imageView.center;
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    [movePath moveToPoint:fromPoint];
    CGPoint toPoint = CGPointMake(fromPoint.x +100 , fromPoint.y) ;
    
    [movePath addLineToPoint:toPoint];
    
    CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@”position”];
    moveAnim.path = movePath.CGPath;

第叁章 核心动画渲染框架

CAAnimation 达成了 CAMediaTiming
协议,提供了动画片的持续时间,速度,和另行计数。 CAAnimation 也促成了
CAAction
协议。该协议为图层触发八个动画片动作提供了提供规范响应。动画类同时定义了一个施用贝塞尔曲线来描述动画改变的时刻函数。例如,贰个匀速时间函数(linear timing
function)在动画的一体生命周期里面一贯维持速度不变,
而渐缓时间函数(ease-out timing
function)则在动画接近其生命周期的时候减慢速度。大旨动画额外提供了一星罗棋布抽象的和细化的动画片类,比如:CATransition
提供了1个图层变化的连通效果,它能影响图层的凡事内容。
动画进行的时候淡入淡出(fade)、推(push)、暴露(reveal)图层的始末。那个过渡效
果能够扩大到你协调定制的 Core Image 滤镜。CAAnimationGroup
允许一层层动画效果组合在一块,并行呈现动画。

CAAnimationGroup *animGroup = [CAAnimationGroup animation]; 

http://www.cocoachina.com/bbs/read.php?tid=12133&ordertype=asc

新葡萄娱乐 14

 3.3 图层的几何变换

新葡萄娱乐 15

CAPropertyAnimation 是三个华而不实的子类,它帮衬动画的显得图层的重中之重路
径中钦定的质量

 

图层拥有3个隐式的 frame,它是 position,bounds,anchorPoint 和
transform 属性 的一有的。设置新的 frame 将会相应的改观图层的 position 和
bounds 属性,可是 frame 本身并从未被保留。可是设置新的 frame 时候,bounds
的原点不受烦扰,bounds 的大 小变为 frame 的尺寸,即
bounds.size=frame.size。图层的岗位被设置为绝对于锚点 (anchor
point)的合乎岗位。当您设置 frame 的值的时候,它的盘算办法和 position、
bounds、和 anchorPoint 的性质相关。

QCCompositionLayer(由Quartz框架提供)能够把Quartz合成的剧情动画 显示。

独自于主线程之外。

 新葡萄娱乐 16

图层有1个图层树,既然是树,就同意添加,插入,删除,替换相应的图层,

第四章 动画

功能3 :图片旋转360度

 

animGroup.animations = [NSArray arrayWithObjects:moveAnim,scaleAnim,opacityAnim, nil];
animGroup.duration = 1;
[view.layer addAnimation:animGroup forKey:nil];

                 CGFloat m41, m42, m43, m44;

 Quartz 2D官方文书档案

 

 开源Core Animation
示例CA360

   
新葡萄娱乐 17

 3.1图层的坐标系

(2) 直接修改数据结构的成员

CALayer 的类引入键-值编码包容的容器类概念,也等于说3个类能够动用键 –
值编码的方法囤积任意值,而无需成立叁个子类。CALayer 的还增添了
NSKeyValueCoding 的业余磋商,出席暗中认可键值和额外的协会类型的机关目的包装
(CGPoint,CGSize,CGRect,CGAffineTransform 和 CATransform3D)的辅助,并
提供数不胜数这个组织的重要性路径领域的造访。

4.事务类,在原子更新的时候组成图层类。

   

下图描述了基于锚点的多少个示例值:

变换函数同时提供了能够比较三个转换矩阵是或不是是单位矩阵,也许七个矩阵是否相等。

   能够行使CALayer来更灵活的拓展示公布局。

 可能有人会很好奇CoreAnimation是怎样渲染动画,动画是哪些变迁的。

功效1 :移动图片到右下角

 

 

  多个重庆大学的子类

 其余一个演示demo,很好很有力

  下图呈现能够在内外文中钦命图层几何的质量: 

CAOpenGLLayer 提供了2个OpenGL渲染环境。你不可能不再三再四这几个类来行使 OpenGL
提供的始末。内容能够是静态的,或可趁着时间的推迟更新。

变换函数同时同意你把 CATransform3D
矩阵转化为 CGAffineTransform(仿射) 矩阵,前提是 CATransform3D
矩阵选用如下表示方法。

    图层的内容提供

http://xxxxxfsadf.iteye.com/blog/565785 

 

   大部分卡通属性拥有和谐关系的暗许动画,
你能够轻松地定制和替换。大家将会在前边“动画属性”部分列出三个完好的动画片属性列表和它们相应的暗许动画。

 

  

3.布局和平条约束类。

 

   关于怎样属性执行的是何等默许动画效果请参考apple官方文书档案 

  (1)CABasicAnimation提供了在图层的品质值间简单的插入。

CAKeyframeAnimation 辅助重点帧动画,你可以钦点的图层属性的首要路径

5.若是动画配置完毕并运维,主旨动画完全控制并独自完结相应的动画帧。

图层的 zPosition
属性值钦定了该图层位于 Z 轴上面地点,zPosition 用于安装图层
相对于图层的同级图层的可视地方

CAEAGLLayer 提供了三个OpenGLES渲染环境。

3.3.2 修改变换的数据结构

 

 
(3)CATransition提供了3个震慑全数图层的内容对接效果。在动画显示过程中运用淡出(fade)、推出(push)、露出(reveal)图层的内容。
常用的衔接效果能够透过提供你本人定制的主干图像滤镜来扩充。除了要钦定突显的动画片类型,你还非得钦定动画的间隔、它的快慢(它的插值怎样分布在一切动画进度)、动画循环时候的巡回次数、动画周期实现的时候是或不是自动
的反转、还有动画甘休的时候它的可视化状态。动画类和 CAMediaTiming
协议提供
全数这么些功效竟然越来越多的功能。CAAnimation、它的子类、时序协议被着力动画和Cocoa
Animation Proxy效能共享。那一个类将会在“动画类型和时序编制程序指南(Animation
Types and Timing Programming Guide)”里面详细介绍。

CALayer也管理动画和与其连带的layer的actions。layers接收一些从layer
tree中触发的insert和remove消息,修改被成立的layer的性质,只怕指明开发者的供给。这几个actions平日都会造成动画的发出。

               

图层一旦创制,你就足以由此矩阵变换成改变五个图层的几何样子。 

 

各个图层定义并爱慕和谐的坐标系,它在这之中的全部内容都经过相关的坐标系钦定地方。该规则同时适应于图层本人的内容和它的其余子图层。因为别的图层定义了它
自个儿的坐标系,CALayer
类提供相应的艺术用于从叁个图层坐标系的点、矩形、大小
值转化为另三个图层坐标系相应的值。

The presentation
tree包涵了脚下正在展现给用户作为动画发生的值。例如:对一个layer的backgroundcolor设置2个新的值的时候,在layer
tree中的值会马上转移。可是,在presentation
tree的相应层的backgroundcolor的值随着要出示给用户的插值颜色会被更新。

新葡萄娱乐 18

(3)设置任意数量的全体层共有的可视的品格属性。例如:backgroundColor(背景观),opacity(发光度)和masking(遮罩)。max
os x应用通过行使core image filters来达成那种可视化的性质。

CATransform3D
的数据结构定义2个同质的三维变换(4×4 CGFloat 值的矩阵),用于
图层的转动,缩放,偏移,歪斜和平运动用的透视。

   

 

//图片旋转360度
– (IBAction)rota360BtnClick:(id)sender
{
    CABasicAnimation *animation = [ CABasicAnimation
                                   animationWithKeyPath: @”transform” ];
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    
    //围绕Z轴旋转,垂直与显示器
    animation.toValue = [ NSValue valueWithCATransform3D: 

   Mac OS X 额外的类

当一个动画片在进行的经过中,你能够查询相应的presentation
layer的实例。假若你打算改变近日的卡通并且从当下显示状态开首3个新的动画,那是老大有效的。

图层的 frame、bounds、position 和 anchorPoint 关系如下图所示: 

Application Kit 的视图类相对于 superlayer 提供了经典的“struts and
springs”定位 模型。图层类包容那个模型,同时 Mac OS X
上边的为主动画提供了一套尤其灵活
的布局管理机制,它同意开发者本身修改布局管理器。宗旨动画的 CAConstraint
类 是一个布局管理器,它能够钦点子图层类限制于您钦命的封锁集合。各类约束
(CAConstraint 类的实例封装)描述层的几何属性(左,右,顶部或底部的边缘或水
平或垂直宗旨)的涉嫌,关系到其同级之一的几何属性层或 superlayer。

 1.1 Core animation类

2.看似视图一样,你能够经过动用图层来创建复杂的接口。

 

2.卡通和计时类。Animation and Timing Classes

新葡萄娱乐 19

1.1.1 图层类

你能够修改 CATransform3D
的数据结构的元素为别的其余你想要的数据值。清单 1 包涵了 CATransform3D
数据结构的定义,结构的积极分子都在其对应的矩阵地方。

 

 效果2 :移动图片到右下角

 3.4 图层的操作

(4)子类化CAlayer,同时在更多的包装格局中完成地点的妄动技术。 

在MVC的设计方式下,NSView和UIView是视图对象,core
animation层实际上是模型对象。他们包裹了几何图形,时间和可视属性,同时提供体现的始末,然则实际上展现并不是layer的义务。

QTMovieLayer and QTCaptureLayer (QT基特 框架提供)提供播放 QuickTime
影片和录像直播。

  

 图层的内容提供,是指通过一种艺术来制订CALayer 实例的始末:

struct CATransform3D

               typedef struct CATransform3D CATransform3D;

 

 

1.提供展示内容的图层类。CALayer

参考文书档案:

 上面将本着地点的学问做一个图纸动画的demo

(3) 使用键-值编码改变键路径

                 };

 

主导动画 CoreAnimation

     

相应的 position 属性值将会活动安装为(100.0,100.0),而 bounds 会自动安装为
(0.0,0.0,120.0,80.0)。

layer
tree包含了种种layer的对象模型。当您为3个layer的特性设置一个的时候,他们的值正是你设置的。

 3.5 图层的剧情

             Core Animation 类的继续关系图 

 这个操作都能够由此已部分api达成,api如下

 

就算如此图层和图层树与视图和视图的结构在不少地方抱有相似性,可是图层的几何
却分化,它进一步简明通俗。图层的装有几何属性,包罗图层的矩阵变换,都足以隐式
和显式动画。

  图层的
frame 值同样为(40.0,60.0,120.0,80.0),bounds 的值不变,可是图层的 position
值已经变更为(40.0,60.0)。

(1) 使用CATransform3D函数

  

   

主题动画 和 Cocoa Animation
同时利用这一个动画类。使用动画片描述,是因为那些类涉及到骨干动画,这几个将会在Animation
Types and Timing Programming Guide 有较深刻的座谈。

1.简练易用的高品质混合编制程序模型。

     控制多少个CALayer来呈现动画效果

CATransform3DIdentity
是单位矩阵,该矩阵没有缩放、旋转、歪斜、透视。把该
矩阵应用到图层上边,会把图层几何属性修改为私下认可值。 

 3.3.1 变换函数

就算您新创制二个图层,则唯有设置图层的 frame
为(40.0,60.0,120.0,80.0),

 
4.一套简单的卡通片接口,能够让您的动画片运转在单身的线程里面,并得以

诚如不直接使用,而是使用它的子类,CABasicAnimation,CAKeyframeAnimation.
在它的子类里修改属性来运营动画。

Core Animation for Mac OS X and the 酷派   下载地址 

 3.2内定图层的几何

CATransform3DMakeRotation(M_PI, 0, 0, 1.0) ];
    animation.duration = 1;
    //旋转效果累计,先转180度,接着再旋转180度,从而完毕360转悠
   animation.cumulative = YES;
   animation.repeatCount = 2;
    
    //在图纸边缘添加3个像素的晶莹区域,去图片锯齿
    CGRect imageRrect = CGRectMake(0, 0,imageView.frame.size.width, imageView.frame.size.height);
    UIGraphicsBeginImageContext(imageRrect.size); 
    [imageView.image drawInRect:CGRectMake(1,1,imageView.frame.size.width-2,imageView.frame.size.height-2)];
    imageView.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
   [imageView.layer addAnimation:animation forKey:nil];
}

动画是前几天用户界面包车型的士关键因素。当使用基本动画的时候,动画是机关完毕的。
没有动画的循环和计数器。你的应用程序不负负责重绘,也不担当盯梢动画的脚下状
态。动画在独立线程里面自动执行,没有和您的应用程序交互。

 

1.1.4 事务管理类    

CABasicAnimation 简单的为图层的属性提供修改。

    暗中同意动画 

7.灵活的布局管理模型。包罗允许图层相对同级图层的关系来安装相应属性的岗位和大小。

下图展现1个图层具有相同的
frame(如上航海用教室),然而在该图中它的 anchorPoint
属性值棉被服装置为(0.0,0.0),位于图层的左下角地方。

上运行的应用程序代码。

 

当渲染3个layer的时候,the render-tree会使用presentation-tree的值。the
render-tree的权利正是实行独立与程序活动的合成操作;渲染是在3个独门进度也许线程中,以便使其对应用程序的run
loop影响微乎其微。

              新葡萄娱乐 20

                 CGFloat m21, m22, m23, m24;

(3)CATiledLayer:它同意在增量阶段展现大和复杂的图像(正是将图纸进行分块展现,来减弱

1.1.3 布局管理器类

(2)CATextLayer:它是3个很有益就足以从string和attributed
string创立layer的content的类。

   
 图层的居多可视化属性是能够隐式动画的。通过简单的变动图层的可动画展现的属性,能够让图层现有属性从当前值动画渐变到新的属性值。例如设置图层的
hidden 属性为 YES 将会触发动画使层渐渐退出。

每三个可视的layer tree后边都有五个照应的tree:presentation tree和render
tree。如下图所示:

 当中有瞬间二种艺术来提供CAlayer的内容

CoreAnimation官方文书档案地址

图层的几何外形和 Cocoa
视图其余多个不一致地点是,你能够设置图层的三个边角
的半径来把图层展现为圆角。图层的 cornerRadius
属性内定了重绘图层内容,剪切子
图层,绘制图层的疆界和影子的时候时候圆角的半径。

 

}

   
宗旨动画的动画类使用基本的动画片和要害帧动画把图层的内容和甄选的品质动画的来得出来。全部中央动画的动画类都以从
CAAnimation 类继承而来。

八个卡通效果叠加,比如在执行动画的进度中须要同时修改position,阿尔法,
frame等品质,能够将多个卡通合成一起实施。

 

中央动画,开发人士能够为他们的利用创造动态用户界面,而无需采纳低级其余图纸
API,如 OpenGL 来赢得便捷的动画片质量。

通用的布局管理器和平条约束性布局管理器将会在“布局基本动画的图层”部分钻探。

    CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@”transform”];
    scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    
    //沿Z轴旋转
    scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,0,1)];
    
    //沿Y轴旋转
   // scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,1.0,0)];
    
   //沿X轴旋转
  // scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,1.0,0,0)];
    scaleAnim.cumulative = YES;
    scaleAnim.duration =1;
  //旋转2遍,360度    
    scaleAnim.repeatCount =2;
    imageView.center = toPoint;
    scaleAnim.removedOnCompletion = YES;
    CAAnimationGroup *animGroup = [CAAnimationGroup animation];
    animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim, nil];
    animGroup.duration = 2;
    
    [imageView.layer addAnimation:animGroup forKey:nil];

图层的坐标系在不一样平台上边装有差距性。在 iOS
系统中,默许的坐标种类原点
在图层的大旨左上角地点,原点向右和向下为正在。在 Mac OS X 系统中,暗中同意的坐
标系原点在图层的大旨左下角地点,原点向右和提高为正值。坐标系的全数值都以浮
点类型。你在别的平台上边创制的图层都采取该平台暗中认可的坐标系。

    层类(Layer Classes)

主题动画
提供了用来转移矩阵的变换函数 CATransform3DInvert。一般是用反转
点内转化对象提供反向转换。当您供给还原一个曾经被更换了的矩阵的时候,反转将
会万分有辅助。反转矩阵乘以逆矩阵值,结果是原始值。

新葡萄娱乐 21

               {

 
 动画的天性也能够显式动画。要显式动画的属性,你须要成立大旨动画动画类的一个实例,并点名所需的视觉效果。显式动画不会变动该
、属性的值,它只是用来动画展现。 

   3.3.3 通过键值路径修改变换

anchorPoint 暗中认可值是(0.5,0.5),位于图层边界的主干点(如上图显示),B 点 把
anchorPoint 设置为(0.0,0.5)。最后 C 点(1.0,0.0)把图层的 position 设置为
图层 frame 的右下角。该图适用于 Mac OS X 的图层。在 iOS
系统里面,图层使用分化的坐标系,相应的(0.0,0.0)位于左上角,而(1.0,1.0)位于右下角。

焦点动画编制程序指南 

前言,大旨动画的功利

 

主导动画提供了一套你能够在您应用程序里面使用的动画类的彰显:

 很多图层的习性修改暗中认可会执行那么些动画类。比如大小,折射率,颜色等品质

 //向右侧转悠

                 CGFloat m11, m12, m13, m14;

新葡萄娱乐 22

    myLayer.transform.rotation.x=0;

   
同1个视图类的实例一样,三个CAlayer实例也有三个独立的superlayer和上面装有的子层(sublayers),它成立了一个有层次结构的层,我们称之为layer
tree。layers的绘图就好像views一样是从后迈入绘制的,绘制的时候大家要内定其绝对与她们的superlayer的成团形状,同时还必要创立1个片段的坐标系。layers能够做一些更复杂的操作,例如rotate(旋转),skew(倾斜),scale(放缩),和project
the layer content(层的阴影)。

 第三章 核心动画概念

 

          [myLayer
setValue:[NSNumber numberWithInt:0]
forKeyPath:@”transform.rotation.x”];

 新葡萄娱乐 23