Core Animation

13 8月

IOS的动画效果无处不在,是由Core Animation来实现的,但为了开发方便,UIView已经在Core Animation基础上封装了一些动画效果,如渐隐滑动等。所以UIKit中常用的例如UILabel,UIButton都是继承自UIView的,也就自动获得了一些动画效果。

  • UIView动画
  • CALayer
  • lottie

UIView动画

UIView内置了UIViewAnimationWithBlocks动画封装,内置很多方法,能处理大小,位置,变形等动画效果,满足日常大多数需求。

// 动画一:简单从左上角移动到居中
[UIView animateWithDuration:1 animations:^{
    self.deleteButton.frame = CGRectMake((self.bounds.size.width - 200)/2, (self.bounds.size.height - 200)/2, 200, 200);
}];

// 动画二:从左上角移动到居中后还加上回弹效果
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
    self.deleteButton.frame = CGRectMake((self.bounds.size.width - 200)/2, (self.bounds.size.height - 200)/2, 200, 200);
} completion:^(BOOL finished) {
    NSLog(@"showDeleteView finish");
}];

CALayer

UIView能展示动画,底层其实就是CALayer(Core Animation Layer)提供支持的。UIKit的其他组件,都有对应的CALayer,例如CAScrollLayer,CATextLayer。

在UIView头文件里可以看到CALayer:

@property(nonatomic,readonly,strong)  CALayer  *layer;

日常的动画都已经在View层做了封装,直接调用就行了,但要实现边框圆角,阴影等时,就需要直接使用CALayer。例如圆角按钮:

self.deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(290, 80, 30, 20)];
self.deleteButton.layer.cornerRadius = 10;
self.deleteButton.layer.masksToBounds = YES;
self.deleteButton.layer.borderColor = [UIColor lightGrayColor].CGColor;
self.deleteButton.layer.borderWidth = 2;

lottie

动画的话其实也没必要完全自己实现,可以使用lottie官网点这里

Lottie通过JSON文件将动画描述映射到iOS的LayerModel、Keyframe、ShapeItem、DashElement、Marker、Mask、Transform这些类的属性中,最终通过CoreAnimation进行渲染。本质是一样的,但过程更精准,而且这也是未来发展的趋势。

业务逻辑不用写源生代码,用DSL将代码转成中间格式文件(如JSON)不同平台(Android,IOS)再对中间文件进行解析,转为源生代码执行。

发表评论

电子邮件地址不会被公开。 必填项已用*标注