美文网首页SVGASwiftUI
IOS使用SVGA实现动画效果

IOS使用SVGA实现动画效果

作者: Hahn_z | 来源:发表于2019-04-03 00:04 被阅读0次

效果图


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

相关文章

  • IOS使用SVGA实现动画效果

    效果图 参考资料 开源代码 SVGA官网 : http://svga.io SVGA简介 : ...

  • SVGA使用心得

    1、什么是SVGA SVGA是一种动画格式,可以兼容安卓、ios和web,可以实现很多复杂的动画,这样开发就不用头...

  • UIView动画合集

    iOS开发-UIView之动画效果的实现方法(合集) 前言:在开发APP中,我们会经常使用到动画效果。使用动画可以...

  • SVGA使用文档

    SVGA动画介绍: SVGA是YY开发的一种跨平台的开源动画格式,同时兼容 iOS / Android / Flu...

  • iOS重拾直播系列-直播间礼物效果

    之前写过直播间的礼物效果的文章iOS开发 - Lottie实现直播间礼物特效iOS开发-SVGA Animatio...

  • iOS动画-认识CoreAnimation

    前言 在iOS中,普通的动画可以使用UIKit提供的方法来实现动画,但如果想要实现复杂的动画效果,使用CoreAn...

  • Flutter 134: 图解动画小插曲之 SVGA 动画

    小菜之前尝试了 Flare 和 Lottie 动画,实现效果都很高效;今天小菜尝试另一种思路 SVGA[http:...

  • ios 电商demo(实现各种常见动画效果和页面布局)

    ios 电商demo(实现各种常见动画效果和页面布局) ios 电商demo(实现各种常见动画效果和页面布局)

  • Lottie实现动画效果

    使用Lottie实现动画效果 1、通过CocoaPods lottie-ios导入这个类2、找一个动画的json文...

  • SVGA

    一、SVGA[http://svga.io/index.html] 全新的动画格式 高性能动画播放体验 SVGA ...

网友评论

    本文标题:IOS使用SVGA实现动画效果

    本文链接:https://www.haomeiwen.com/subject/skyobqtx.html