动画库 - Keyframes-iOS

目录：

动画库 - Lottie-iOS
动画库 - SVGA-iOS
动画库 - Keyframes-iOS

APP常见的动画库对比：

动画库	Lottie	SVGA	Keyframes
支持平台	Android/iOS/Web	Android/iOS/Web	Android/iOS
设计工具支持	AfterEffects(AE)	AE&Flash	AE
功能边界	所有	部分	矢量图
导出工具	插件	插件	脚本
设计成本	需要命名规范	无	需要脚本
资源包大小zip	2.6M	767K
官网	airbnb.design/lottie/	svga.io/	git地址

简介

Keyframes自定义除了开始和结束以外的“关键帧”，实现动画效果。

优缺点

优点：
使用确实简单方便。
缺点：
不能动态的修改或定义动画内容，不同的动画无法实现同步，多个动画彼此无法堆叠。需要理解设计师给的动画样式才能做出效果。

demo实例：

1. 具体代码

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 85, 36)];
    imageView.image = [UIImage imageNamed:@"plane"];
    [self.view addSubview:imageView];
    imageView.center = self.view.center;
    CGPoint originCenter = self.view.center;
    [UIView animateKeyframesWithDuration:1.5f delay:0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.25 animations:^{
            imageView.center = CGPointMake(imageView.center.x + 80, imageView.center.y - 10);
        }];
        [UIView addKeyframeWithRelativeStartTime:0.1 relativeDuration:0.4 animations:^{
            imageView.transform = CGAffineTransformMakeRotation(-M_PI/8);
        }];
        [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
            imageView.center = CGPointMake(imageView.center.x + 100, imageView.center.y - 50);
            imageView.alpha = 0;
        }];
        [UIView addKeyframeWithRelativeStartTime:0.51 relativeDuration:0.01 animations:^{
            imageView.transform = CGAffineTransformIdentity;
            imageView.center = CGPointMake(0, originCenter.y);
        }];
        [UIView addKeyframeWithRelativeStartTime:0.55 relativeDuration:0.45 animations:^{
            imageView.alpha = 1;
            imageView.center = originCenter;
        }];
    } completion:^(BOOL finished) {
    }];

4. 动画效果

   
   
   动画效果图

目录：

动画库 - Lottie-iOS
动画库 - SVGA-iOS
动画库 - Keyframes-iOS