·您现在的位置: 江北区云翼计算机软件开发服务部 >> 文章中心 >> 网站建设 >> app软件开发 >> IOS开发 >> CoreAnimation(CA)

CoreAnimation(CA)

作者:佚名      IOS开发编辑:admin      更新时间:2022-07-23

开发者真会玩,原来我看到CA都懵了。啥是CA?原来就是Core Animation。哎,读书少啊,被虐成🐶了。

进入正题:开始学习Core Animation

先理解一个概念:图层(CALayer)。如果理解图层的直接绕道而行就行了。

图层:是动画发生的场所,包括UIView动画都发生在图层中。你也许会问图层和UIView有啥区别??????区别在于:

我们可以自定义图层,重写绘制方法,从而实现绘制图层的目的,图层也有层次关系,有自己的子图层。说了貌似UIView也有吧。对的。这是共有的。

真正的区别是:视图(UIView)是重量级的对象,它负责绘制和事件响应,图层负责绘制。事实上视图依赖于图层实现绘制处理。

加一个图层吧:看代码

- (void)addLayer {
      UIImage *image = [UIImage imageNamed:@"test"];
    layer = [CALayer layer];    //创建并返回一个实例对象
    layer.backgroundColor = [[UIColor redColor] CGColor];
    layer.contents = (id)[image CGImage];
    layer.bounds = CGRectMake(0.0f, 0.0f, 100.0f, 100.0f);
    layer.contentsGravity = kCAGravityResizeaspect;   //设置图层摆放样式
    layer.position = CGPointMake(100, 100);
    [self.view.layer addSublayer:layer];

}

在ViewDidLoad里面调用该方法后的结果是:

我们在视图上添加了一个图片。准确的说:是在self.view的图层上又添加了一个图层,这个图层里面的内容是一个图片。

------------------------------------------------------------简单的CALayer介绍就到这里吧------------------------------------------------------------

打断一下:动画真心不难,慢慢往下看。

看看动画的类型:

在Core Animation框架中有两种形式的动画:隐式动画和显式动画。

隐式动画:这是一种最简单的动画,不用设置定时器,不用考虑线程或者重画,它的很多属性都是默认的。

显式动画:是一种使用CABasicAnimation创建的动画,通过CABasicAnimation,可以更明确定义属性如何改变动画。它还有更复杂的动画类型:关键帧动画,这里可以定义动画的起点和终点,还可以定义某些帧之间的动画。使用CAKeyframeAnimation创建的动画。

---------------------------------------------------大概理解一下类型先。---------------------------------------------------

隐式动画

- (IBAction)startAction:(id)sender {
    //仿射变换矩阵
    CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(self.view.frame.size.width-160, self.view.frame.size.height-160);
    [_imageVIew.layer setAffineTransform:moveTransform];
    _imageVIew.layer.opacity = 1.0f;
}

运行结果:

这里利用一个仿射变换进行隐式动画实现。仿射 这里面有一些讲解。

---------------------------------------------------------------隐式动画结束---------------------------------------------------------------

显示动画:

创建显示动画的代码:

[CABasicAnimation animationWithKeyPath:@"opacity"];

其中意思就是给透明度添加动画。还可以设置动画的属性有

transform.scale

transform.scale.y

transform.scale.x

transform.rotation.z

opacity

margin

zPosition

backgroundColor..................还有好多

这里需要注意的是animationWithKeyPath:方法接收的是字符串。

举个🌰吧。

- (IBAction)startAction:(id)sender {
    CABasicAnimation *opAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opAnim.duration = 3.0;
    opAnim.fromValue = [NSNumber numberWithFloat:0.25];
    opAnim.toValue = [NSNumber numberWithFloat:1.0];
    opAnim.cumulative = YES;   //属性累加
    opAnim.repeatCount = 2;
    /*
    kCAFillModeForwards
    kCAFillModeBackwards
    kCAFillModeBoth
    kCAFillModeRemoved
    kCAFillModeFrozen
     */
    //可以防止回闪
    opAnim.fillMode = kCAFillModeForwards;  //设置动画结束时状态,kCAFillModeForwards代表保持动画结束值。
    opAnim.removedOnCompletion = NO;    //设置动画结束时候不停止,这样设置fillModel才能起作用。
//    [_imageView.layer addAnimation:opAnim forKey:@"animateOpacity"];
    /*
     struct CGAffineTransform {
     CGFloat a, b, c, d;
     CGFloat tx, ty;
     };
     */
    CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(self.view.frame.size.width-160, self.view.frame.size.height-160);
    CABasicAnimation *moveAim = [CABasicAnimation animationWithKeyPath:@"transform"];
    moveAim.duration = 3.0;
    moveAim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(moveTransform)];
    moveAim.fillMode = kCAFillModeForwards;
    moveAim.removedOnCompletion = NO;
    moveAim.repeatCount = 2;
    [_imageView.layer addAnimation:moveAim forKey:@"animateTransform"];
}

我们通过CABasicAnimation来为opacity创建动画,用CGAffineTransform来设置仿射变换矩阵。然后设置动画的一些属性,再然后把动画添加到要动的对象上边。

运行效果如下:

这里注意下:下面的两句代码可以防止闪回问题(就是比如动画完成后透明度应该是1.0,而闪一下又初始化为0.25)

opAnim.fillMode = kCAFillModeForwards;

opAnim.removeOnCompletion = NO;

这里设置NO设置前面的fillModel才起作用。

------------------------------------------------------------------------显示动画结束------------------------------------------------------------------------

关键帧动画:

- (IBAction)startAction:(id)sender {
    CAKeyframeAnimation *opAnim = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    opAnim.duration = 3.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];
    opAnim.fillMode = kCAFillModeForwards;
    opAnim.removedOnCompletion = NO;
    
    [_imageView.layer addAnimation:opAnim forKey:@"animateOpacity"];
    
    CGAffineTransform moveTransform = CGAffineTransformMakeTranslation(self.view.frame.size.width-160, self.view.frame.size.height-160);
   
    CABasicAnimation *moveAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    moveAnim.duration = 3.0;
    moveAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(moveTransform)];
    
    moveAnim.fillMode = kCAFillModeForwards;
    moveAnim.removedOnCompletion = NO;
    moveAnim.repeatCount = 1;
    [_imageView.layer addAnimation:moveAnim forKey:@"animateTransform"];
}

效果如下:

这里效果不是太明显。

首先我们用CAKeyframeAnimation创建一个关键帧动画为opacity属性,在0.0属性为0.25,在0.5属性为0.75,在1属性为1。你可以把它理解成一个坐标系。里面的都是点。这样就是关键帧了。然后设置一下关键帧的其他属性。然后将关键帧添加到要实现该动画的对象上。

------------------------------------------------------------------------------关键帧动画结束------------------------------------------------------------------------------

看看使用路径吧。我这个地方有点问题。无法显示动画效果,但是不知道为什么。

我的代码

- (IBAction)startAction:(id)sender {
    CGMutablePathRef starPath = CGPathCreateMutable();  //创建可变路径
    CGPathMoveToPoint(starPath, NULL, _moveButton.frame.origin.x, _moveButton.frame.origin.y);
    CGPathMoveToPoint(starPath, NULL, 100.0f, 280.0f);
    CGPathMoveToPoint(starPath, NULL, 260.0f, 170.0f);
    CGPathMoveToPoint(starPath, NULL, 60.0f, 170.0f);
    CGPathMoveToPoint(starPath, NULL, 220.0f, 280.0f);
    CGPathCloseSubpath(starPath);   //封闭路径
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    [animation setDuration:10.0f];
    [animation setPath:starPath];   //设置路径,只有关键帧才有路径
    CFRelease(starPath);
    starPath = nil;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    animation.repeatCount = 3;
    [_moveButton.layer addAnimation:animation forKey:@"animatetransform"];
  
}

其中CGMutablePathRef是创建一个可变的路径,

然后CGPathCloseSubPath是封闭路径。

使用完路径之后需要释放一下。

由于没有出来结果,就没截图了。标记一下。谁知道的可以告诉我,谢谢。

 

动画就这么多吧,现在只是很基础的学习。等用到的时候再慢慢利用这些去创建复杂的动画。

 

------------------------------------------------------------------------------------------------没有了---------------------------------------------------------------------------------------

附上源码:

http://pan.baidu.com/s/1kTKmIeb

 

谁知道那个路径问题的麻烦说一下。

 

------------------------------------------------------------------------------------大意了------------------------------------------------------------------------------------

封闭路径写错了方法:

- (IBAction)startAction:(id)sender {
    CGMutablePathRef starPath = CGPathCreateMutable();  //创建可变路径
    CGPathMoveToPoint(starPath, NULL, _moveButton.frame.origin.x, _moveButton.frame.origin.y);

    CGPathAddLineToPoint(starPath, NULL, 100.0f, 280.0f);
    CGPathAddLineToPoint(starPath, NULL, 260.0f, 170.0f);
    CGPathAddLineToPoint(starPath, NULL, 60.0f, 170.0f);
    CGPathAddLineToPoint(starPath, NULL, 220.0f, 280.0f);
    CGPathCloseSubpath(starPath);   //封闭路径
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    [animation setDuration:10.0f];
    [animation setPath:starPath];   //设置路径,只有关键帧才有路径
    CFRelease(starPath);
    starPath = nil;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
//    animation.repeatCount = 3;
    [_moveButton.layer addAnimation:animation forKey:@"position"];
  
}

应该先moveToPoint,然后添加point。。。。。。。。

运行结果:

--------------------------------------------------------动画先告一段落了----------------------------------------------------------------------