iOS动画详解

iOS动画详解

Created: Mar 17, 2019 5:46 PM

今天聊一下iOS经常使用的四种动画CABasicAnimation，CAKeyframeAnimation，CATransition，以及UIView的animate。

CABasicAnimation，CAKeyframeAnimation，CATransition这三个动画的基类其实都是CAAnimation，这种动画有个最大的特色是，执行完动画，属性不会发生变化，好比一个View从A点移动到B点，其实坐标仍是A点。

下面作一下详细的介绍：

CAAnimation

CAAnimation在设置动画的时候有如下通用属性：

• fromValue: 动画的开始值
• toValue: 动画的结束值
• beginTime: 动画的开始时间
• duration : 动画的持续时间
• repeatCount : 动画的重复次数
• fillMode: 动画的运行场景
• isRemovedOnCompletion: 完成后是否删除动画
• autoreverses: 执行的动画按照原动画返回执行

CABasicAnimation（基础动画）

基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操做。好比：位移、旋转、缩放、透明度、背景色等。

基础动画根据 keyPath 来区分不一样的动画。keyPath能够是：

• transform.scale (比例转换)
  • transform.scale.x
  • transform.scale.y、
• transform.rotation(旋转)
  • transform.rotation.x(绕x轴旋转)
  • transform.rotation.y(绕y轴旋转)
  • transform.rotation.z(绕z轴旋转)、
• opacity (透明度)
• margin
• backgroundColor(背景色)
• cornerRadius(圆角)
• borderWidth(边框宽）
• bounds
• contents
• contentsRect
• cornerRadius
• frame
• hidden
• mask
• masksToBounds
• shadowColor(阴影色)
• shadowOffset
• shadowOpacity

代码示例：

CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.fromValue = [NSValue valueWithCGPoint:self.aView.center];
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.aView.center.x+100, self.aView.center.y)];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    animation.duration = 3.0;
    [animation setRepeatDuration:20];
    animation.repeatCount = 3;
    [self.aView.layer addAnimation:animation forKey:@"click1"];
复制代码

以上代码能够实现将view沿x轴移动100

CAKeyframeAnimation（关键帧动画）

关键帧动画，顾名思义，咱们只须要设定一个关键点，而后view即可以将几个关键点造成天然的过分。

关键帧动画，有些特殊的属性：

• path：关键帧动画中的执行路径
• values: 关键帧动画中的关键点数组

示例代码：

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *value6=[NSValue valueWithCGPoint:CGPointMake(200, 400)];
    animation.values=@[value1,value2,value3,value4,value5,value6];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    animation.duration = 3.0;
    [animation setRepeatDuration:20];
    animation.repeatCount = 3;
    [self.aView.layer addAnimation:animation forKey:@"click2"];
复制代码

CATransition(过渡动画)

CATransition 用于作过渡动画或者转场动画，可以为层提供移出屏幕和移入屏幕的动画效果。

因此这里要注意的是它的特殊应用场景，CATransition是为了实现一个view移入或移除屏幕而设计的。能够将其想象成ppt的动画效果。

他也有一些特殊属性：

• type： 过渡动画的动画类型，系统提供了多种过渡动画（官方提供了四种fade, moveIn, push and reveal. Defaults to fade.）
• subtype : 过渡动画的动画方向,（系统提供了四种：fromLeft(从左侧)fromRight (从右侧)fromTop (有上面）fromBottom (从下面））

代码示例：

CATransition * animation = [CATransition animation];
    animation.type = @"pageCurl";
    animation.subtype = kCATransitionFromLeft;
    animation.duration = 3;
    [self.aView.layer addAnimation:animation forKey:@"click3"];
复制代码

UIView

UIView的动画是能够改变View组件的属性的，它支持对一下属性进行更改：

• frame
• bounds
• center
• transform
• alpha
• backgroundColor
• contentStretch

如：

- (void)clicked4:(id)sender{
    
    [UIView animateWithDuration:3 animations:^{
        self.aView.frame = CGRectMake(80, 80, 80, 80);
    } completion:^(BOOL finished) {
        NSLog(@"aaaaaa 结束");
    }];
}
复制代码

UIView动画有如下几个参数：

• animateWithDuration执行时间
• animations 动画的类型，实际上是一个回调，能够在这个回调中设置aView最终的属性，而后根据如今的属性到这个最终属性，实现一个动画
• completion执行完毕的回调
• delay等待时间
• options 一个设置数组，能够设置动画的执行状态，如重复，加速度方式等等