IOS使用SVGA实现动画效果

效果图

1B8B1051E1DE992FD0D46ADC14BD0814.gif

参考资料

开源代码

SVGA官网： http://svga.io

SVGA简介： https://github.com/yyued/SVGA-Format

SVGA示例动画： https://github.com/yyued/SVGA-Samples

我的Demo ： https://gitee.com/HanZhiLi/SVGA_Demo

安装(cooped)

pod 'SVGAPlayer'

pod install

引用(头文件)

import <SVGA.h>

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *coverView;

@property (nonatomic, strong) SVGAPlayer *player;

@end

@implementationViewController

- (void)viewDidLoad {

[super viewDidLoad];

 self.player = [[SVGAPlayer alloc] initWithFrame:CGRectMake(0, 0 ,self.coverView.frame.size.width, self.coverView.frame.size.height)];

[self.coverView addSubview:self.player];

 self.player.delegate=self;

[selfLoadBtn:self];

 //动画循环次数 默认是0(无限次)

 self.player.loops=0;

 //动画停止后清除画布。 默认是true

 self.player.clearsAfterStop = true;

 //默认为Forward。可能是Forward，Backward。Forward 表示动画将在完成后在最后一帧暂停。Backward 表示动画将在完成后在第一帧暂停。

 self.player.fillMode=@"Forward";

 //设置第一帧结束的时候触发

//    [self svgaPlayerDidAnimatedToFrame:1];

 //当图片百分比出现的时候触发

//    [self svgaPlayerDidAnimatedToPercentage:1.0];

}

/**

 这些方法暂时不清楚怎么使用

 //在特定范围内播放动画。如果reverse设置为true，则动画将从end开始反向开始。

 - (void)startAnimationWithRange:(NSRange)range reverse:(BOOL)reverse;

 //渲染特定帧，如果andPlay设置为，则从此帧播放true

 - (void)stepToFrame:(NSInteger)frame andPlay:(BOOL)andPlay;

 //渲染特定百分比架，percentage价值应0.0到1.0，从这个框架，如果玩andPlay套到true

 - (void)stepToPercentage:(CGFloat)percentage andPlay:(BOOL)andPlay;

 */

//本地资源

- (IBAction)LoadBtn:(id)sender {

 //先停止动画

[self.player stopAnimation];

 //Angel 是本地格式为svga 的文件

    SVGAParser*parser = [[SVGAParseralloc]init];

[parserparseWithNamed:@"Angel" inBundle:[NSBundle mainBundle] completionBlock:^(SVGAVideoEntity * _Nonnull videoItem) {

 if(videoItem !=nil) {

 self.player.videoItem= videoItem;

[self.playerstartAnimation];

        }

}failureBlock:^(NSError*_Nonnullerror) {

    }];

}

//网络资源

- (IBAction)NetBtn:(id)sender {

 //先停止动画

[self.player stopAnimation];

    SVGAParser*parser = [[SVGAParseralloc]init];

[parserparseWithURL:[NSURL URLWithString:@"https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"] completionBlock:^(SVGAVideoEntity * _Nullable videoItem) {

 if(videoItem !=nil) {

 self.player.videoItem= videoItem;

[self.playerstartAnimation];

        }

}failureBlock:^(NSError*_Nonnullerror) {

        NSLog(@"error = %@",error);

    }];

}

//暂停动画

- (IBAction)StopBtn:(id)sender {

[self.player pauseAnimation];

}

//下载资源

- (IBAction)DownloadBtn:(id)sender {

 //先停止动画

[self.player stopAnimation];

    HZLAFNetworking *af = [HZLAFNetworking shareHZLAFNetworking];

    NSDictionary *thisDict = [NSDictionary dictionary];

    NSString*str =@"";

[afdownLoadAFResqustUrlString:@"https://github.com/yyued/SVGA-Samples/blob/master/kingset.svga?raw=true" appendingWithDict:thisDict blackWithBlock:^(NSDictionary * _Nonnull dict) {

        NSLog(@"下载成功 = %@",dict);

        NSData*file = [NSDatadataWithContentsOfURL:dict[@"content"]];

        SVGAParser*parser = [[SVGAParseralloc]init];

[parserparseWithData:filecacheKey:strcompletionBlock:^(SVGAVideoEntity*_NonnullvideoItem) {

 if(videoItem !=nil) {

 self.player.videoItem= videoItem;

[self.playerstartAnimation];

            }

}failureBlock:^(NSError*_Nonnullerror) {

            NSLog(@"error = %@",error);

        }];

[selfinsertImg];

[selfinsertText];

//        [self hiddenOther];

//        [self DivOther];

    }];

}

/**

因为我只知道图片(https://github.com/yyued/SVGA-Samples/blob/master/kingset.svga?raw=true)的图层元素，所以只有这个图片了

*/

//指定元素插入图片 key值是这个svga图层的名字(需要问设计师)

-(void)insertImg{

 //插入网络图片

[self.player setImageWithURL:[NSURL URLWithString:@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554222508824&di=ae84a80b918f26b14d47302096985307&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201504%2F04%2F20150404H4348_kAvTw.thumb.700_0.jpeg"]  forKey:@"99"];

 //插入本地图片

//    [self.player setImage:[UIImage imageNamed:@"zzr.jpg"] forKey:@"99"];

}

//指定元素插入文字 key值是这个svga图层的名字(需要问设计师)

-(void)insertText{

    NSAttributedString *text = [[NSAttributedString alloc] initWithString:@"大番薯驾到" attributes:@{NSForegroundColorAttributeName: [UIColor whiteColor],NSFontAttributeName: [UIFont boldSystemFontOfSize:28.0],}];

[self.player setAttributedText:text forKey:@"banner"];

}

//隐藏指定元素 key值是这个svga图层的名字(需要问设计师)

-(void)hiddenOther{

[self.player setHidden:YES forKey:@"banner"];

}

//设置指定元素layer key值是这个svga图层的名字(需要问设计师)

-(void)DivOther{

 //在指定元素设置

[self.playersetDrawingBlock:^(CALayer*contentLayer,NSIntegerframeIndex) {

        contentLayer.backgroundColor= [[UIColorredColor]CGColor];

    }forKey:@"banner"];

}

#pragma -mark SVGAPlayerDelegate

-(void)svgaPlayerDidFinishedAnimation:(SVGAPlayer*)player{

    NSLog(@"动画结束触发");

}

- (void)svgaPlayerDidAnimatedToFrame:(NSInteger)frame{

    NSLog(@"动画播放到特定帧后触发");

}

- (void)svgaPlayerDidAnimatedToPercentage:(CGFloat)percentage{

    NSLog(@"动画播放后触发到特定百分比（从0.0到1.0)");

}

@end

因为github的速度太慢了，我将上面要使用的资源放在自己的服务器上
https://lzxhzl.cn/posche.svga
https://lzxhzl.cn/kingset.svga