SVGA 开发使用指南 - svga/docs GitHub Wiki
SVGA Player 是一个动效播放 SDK。 使用设计师插件将动效源文件一键导出 .svga 文件, 即可在多平台播放。
SVGAPlayer
SVGAPlayer 是动效的载体，被用来播放动效，它继承自 View，
代码中把它当 View 使用即可。
videoItem: SVGAVideoEntity
videoItem 是当前播放的内容，
记录了动效的主要信息，是动效描述文件解析后的产物。
loops: int
loops 是为播放器设置的动效循环次数，
默认值是 0，此时意味着动效会无限循环.
clearsAfterStop: BOOL
clearsAfterStop 决定动效结束后画布的状态，
默认值是 true 此时会在动效结束时清理画布。
fillMode: NSString
fillMode 决定动效暂停时画布所在帧状态，
默认值是 Forward 意味着动效将会暂停在当前帧的下一帧，
Backward 意味着动效将会停在当前帧。
delegate: id<SVGAPlayerDelegate>
SVGAPlayer 通过代理来通知当前动效状态。
- (void)startAnimation;
从第 0 帧开始动效，直到 loops 结束。
- (void)startAnimationWithRange:(NSRange)range reverse:(BOOL)reverse;
从第 Range.location 帧开始动效，播放 Range.length 帧，
直到 loops 结束。
reverse 决定动效是正序播放还是倒序播放，
默认值是 false，意味着动效正序播放，
true 则代表动效从最后一帧倒序播放。
- (void)stepToFrame:(NSInteger)frame andPlay:(BOOL)andPlay;
从第 frame 帧渲染动效，
如果 andPlay 为 true 则会从当前帧开始播放动效。
- (void)stepToPercentage:(CGFloat)percentage andPlay:(BOOL)andPlay;
从第 percentage * 总帧数 帧渲染动效，
percentage 的范围是 0.0 - 1.0，
如果 andPlay 为 true 则会从当前帧开始播放动效。
- (void)pauseAnimation;
在当前帧暂停动效。
- (void)stopAnimation;
停止播放，
此时 clearsAfterStop 如果为 true，
画布将被清空。
- (void)setHidden:(BOOL)hidden forKey:(NSString *)aKey;
通过 imageKey 将某元素动效动态隐藏。
- (void)setImage:(UIImage *)image forKey:(NSString *)aKey;
通过 imageKey 将某元素动效动态替换成 image 对应的 Bitmap。
- (void)setImageWithURL:(NSURL *)URL forKey:(NSString *)aKey;
通过 imageKey 将某元素动效动态替换成 URL 链接的 Bitmap，
URL 对应的内容会自动下载缓存。
- (void)setAttributedText:(NSAttributedString *)attributedText forKey:(NSString *)aKey;
通过 imageKey 将某元素动效动态替换成 Text，
并通过 attributedText 设置 Text样式。
- (void)setDrawingBlock:(SVGAPlayerDynamicDrawingBlock)drawingBlock forKey:(NSString *)aKey;
通过 imageKey 动态替换动效元素，
在 drawingBlock 中绘制将要替换的内容。
- (void)clearDynamicObjects;
清空当前动效设置的全部 DynamicObjects。
SVGAParser
SVGAParser 是 .svga 文件的解析器，
将设计师导出的 .svga 文件解析成 SVGAPlayer 能够识别的
SVGAVideoEntity。
也负责 .svga 加载、缓存、清理。
parseWithNamed:(nonnull NSString *)named ...
通过 .svga 的文件名称在 bundle 中加载动效文件。
parseWithURL:(nonnull NSURL *)URL ...
通过 .svga 的文件 URL 在远程主机中加载动效文件。
parseWithURLRequest:(nonnull NSURLRequest *)URLRequest ...
通过封装好的 URLRequest 请求，在远程主机中加载动效文件。
SVGAPlayerDelegate
Delegate 设置的是 SVGA 播放器当前播放状态通知回调方法。
- (void)svgaPlayerDidFinishedAnimation:(SVGAPlayer *)player;
当动画结束时回调此方法。 注意: 当 loops 设置为 0 的时候此方法永不回调。
- (void)svgaPlayerDidAnimatedToFrame:(NSInteger)frame;
当动画播放到第 frame 帧时回调此方法。
- (void)svgaPlayerDidAnimatedToPercentage:(CGFloat)percentage;
当动画播放到第 percentage * 总帧数 时回调此方法。
下载动效案例
SVGA-Samples
以上提供的 SVGA 文件可以仅供测试交流使用，
版权 yy 所有，转载请联系开发者。
步骤
加载 .svga 文件
// Setup a SVGAPlayer by yourself.
SVGAParser *parser = [[SVGAParser alloc] init];
[parser parseWithURL:[NSURL URLWithString:@"https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"] completionBlock:^(SVGAVideoEntity * _Nullable videoItem) {
} failureBlock:nil];
设置播放器
[...aPlayer setDrawingBlock:^(CALayer *contentLayer, NSInteger frameIndex) {
// do things by yourself
} forKey:@"banner"];
通过 ImageKey 实现元素替换
imageKey 是当前动效元素的图层名称，
元素和 imageKey 对应列表一般由设计师提供，
SVGA Preview
在官网播放对应的动效，
点击 浏览素材 也可以查找元素对应的 imageKey。
尝试使用元素替换
SVGA-Samples 以上提供的 SVGA 文件可以仅供测试交流使用。
步骤
加载 .svga 文件
// Setup a SVGAPlayer by yourself.
SVGAParser *parser = [[SVGAParser alloc] init];
[parser parseWithURL:[NSURL URLWithString:@"https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"] completionBlock:^(SVGAVideoEntity * _Nullable videoItem) {
} failureBlock:nil];
动态隐藏
[...aPlayer setHidden:YES forKey:@"banner"];
banner 对应的动效元素将被隐藏。
动态替换
[...aPlayer setImage:iconImage forKey:@"99"];
// or
[...aPlayer setImageWithURL:[NSURL URLWithString: @"https://github.com/PonyCui/resources/blob/master/svga_replace_avatar.png?raw=true"] forKey:@"99"];
99 对应的动效元素将被替换成 iconImage。
使用 Text 动态替换
NSAttributedString *text = [[NSAttributedString alloc] initWithString:@"Pony send Kitty flowers."
attributes:@{
NSForegroundColorAttributeName: [UIColor whiteColor],
NSFontAttributeName: [UIFont boldSystemFontOfSize:28.0],
}];
[...aPlayer setAttributedText:text forKey:@"banner"];
banner 对应的动效元素将被替换成 text。