SVGA动画梳理

646 阅读1分钟

背景

SVGA动画其实就是把 Flash 或者AE 文件中的所有动画元素(位图、矢量)给提取出来,并将其在时间轴中的每帧的动画元素(位移、缩放、 旋转、透明度)导出,然后通过Player将这些信息还原

优点: 1.跨平台支持 2.集成简单,使用方便,免去写代码困扰 3.可替换指定元素 4.支持音频播放(暂不支持自定义修改) 缺点: 1.复杂动画解析较慢,对低端设备可能会卡顿 2.不适合交互的场景 3.官方只支持OC,不支持swift

类图

SVGA流程图.jpg

常用方法

svga解析网络资源
[parser parseWithURL:[NSURL URLWithString:@"https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/kingset.svga?raw=true"]
         completionBlock:^(SVGAVideoEntity *_Nullable videoItem) {
             [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
             if (videoItem != nil) {
                 self.aPlayer.videoItem = videoItem;
                 NSMutableParagraphStyle *para = [[NSMutableParagraphStyle alloc] init];
                 [para setLineBreakMode:NSLineBreakByTruncatingTail];
                 [para setAlignment:NSTextAlignmentCenter];
                 NSAttributedString *str = [[NSAttributedString alloc]
                                            initWithString:@"Hello, World! Hello, World!"
                                            attributes:@{
                                                NSFontAttributeName: [UIFont systemFontOfSize:28],
                  NSForegroundColorAttributeName: [UIColor yellowColor],
                  NSParagraphStyleAttributeName: para,}];
                 [self.aPlayer setAttributedText:str forKey:@"banner"];
                 [self.aPlayer startAnimation];
             }
         } failureBlock:nil];
svga解析本地
    [parser parseWithNamed:@"Rocket" inBundle:nil completionBlock:^(SVGAVideoEntity * _Nonnull videoItem) {
        if (videoItem != nil) {
            self.aPlayer.videoItem = videoItem;
            [self.aPlayer startAnimation];
        }
    } failureBlock:nil];
svga替换资源
NSArray *imgs = @[@"22-03",@"22-04",@"22-05",@"22-06",@"22-07",@"wt",@"x"];
    [parser parseWithNamed:@"test_svga" inBundle:nil completionBlock:^(SVGAVideoEntity *_Nonnull videoItem) {
        if (videoItem != nil) {
            self.aPlayer.videoItem = videoItem;
            for (NSInteger i=0; i<imgs.count; i++) {
                UIImage *img = [UIImage imageNamed:imgs[i]];
                [self.aPlayer setImage:img forKey:imgs[i]];
            }
            [self.aPlayer startAnimation];
        }

    } failureBlock:nil];

参考

github.com/yyued/SVGAP…

svga.jiangxinniang.com/

svga.io/svga-previe…

www.jianshu.com/p/07af814d9…