目录:
动画库 - 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实例:
- 具体代码
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) {
}];
-
动画效果
动画效果图
网友评论