iOS 修复SVGAPlayer播放svga动画延迟的问题

问题代码

- (void)showAnimation
{
    if (![TPSkinManager shareManager].isHaveSkin ||
        [TPUserDefault instance].isNightMode.intValue == 1 ||
        ![TPSkinManager showTopAnimation]) {
        return;
    }

    dispatch_async(dispatch_get_main_queue(), ^{
        self.svgPlayer.hidden = NO;
        NSString *topAnimationName = [[TPSkinManager shareManager] getSkinInfoListVauleWithKey:TPSkinMapKey_animation_topbar];
        SVGAParser *parser = [[SVGAParser alloc] init];
        NSString *path = [NSString stringWithFormat:@"%@/%@/%@",kSkinCachePath,[TPUserDefault instance].skinPath,topAnimationName];
        NSData *data = [NSData dataWithContentsOfFile:path];
        [parser parseWithData:data cacheKey:@"" completionBlock:^(SVGAVideoEntity * _Nonnull videoItem) {
            self.svgPlayer.videoItem = videoItem;
             } failureBlock:^(NSError * _Nonnull error) {
            
        }];
  });

问题原因,异步延迟

在调用动画方法的时候才解析动画文件, 而解析动画文件是异步的

解决方法,提前解析号文件数据,调用动画的时候直接开始动画

- (SVGAPlayer *)svgPlayer
{
    if (!_svgPlayer) {
        _svgPlayer = [[SVGAPlayer alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, SafeAreaTopHeight + 44 * rectScale())];
        _svgPlayer.hidden = YES;
        _svgPlayer.loops = 1;
        _svgPlayer.clearsAfterStop = NO;
        [self configSvgaDataWithCompletion:nil];
    }
    return _svgPlayer;
}


- (void)configSvgaDataWithCompletion:(void (^)(void))completion
{
    NSString *topAnimationName = [[TPSkinManager shareManager] getSkinInfoListVauleWithKey:TPSkinMapKey_animation_topbar];
    SVGAParser *parser = [[SVGAParser alloc] init];
    NSString *path = [NSString stringWithFormat:@"%@/%@/%@",kSkinCachePath,[TPUserDefault instance].skinPath,topAnimationName];
    NSData *data = [NSData dataWithContentsOfFile:path];
    [parser parseWithData:data cacheKey:@"" completionBlock:^(SVGAVideoEntity * _Nonnull videoItem) {
        _svgPlayer.videoItem = videoItem;
        if (completion) {
            completion();
        }
    } failureBlock:^(NSError * _Nonnull error) {
    }];
}


- (void)showAnimation
{

    dispatch_async(dispatch_get_main_queue(), ^{
        self.svgPlayer.hidden = NO;
        if (self.svgPlayer.videoItem) {
            [self.svgPlayer startAnimation];
        } else {
            [self configSvgaDataWithCompletion:^{
                [self.svgPlayer startAnimation];
            }];
        }
    });
}


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,让我来为你解答这个问题。 首先,要在uniapp中播放svgsvga格式的动画,需要使用相应的插件库。目前比较流行的插件库有lottie和wx-extend。 以下是使用wx-extend插件库来实现播放svg / svga格式动画的具体步骤: 1. 安装wx-extend插件库 通过npm安装wx-extend插件库: ``` npm install wx-extend --save ``` 2. 引入wx-extend插件库 在需要使用插件的页面或组件中引入wx-extend插件库: ```javascript import wxParser from 'wx-extend'; ``` 3. 播放svg格式动画 使用wxParser插件的parse方法来播放svg格式动画: ```html <template> <view> <!-- svg格式动画 --> <parser html="{{svgData}}" bindnodeinserted="onSvgLoaded"></parser> </view> </template> <script> import wxParser from 'wx-extend'; export default { data() { return { svgData: '<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="#00FF00" /></svg>' } }, methods: { onSvgLoaded(e) { // svg动画加载完成后的回调函数 console.log('svg动画加载完成'); } }, mounted() { // 解析svg格式动画 wxParser.parse(this.svgData, this.$el, 100); } } </script> ``` 4. 播放svga格式动画 使用wxParser插件的parseSVGA方法来播放svga格式动画: ```html <template> <view> <!-- svga格式动画 --> <parser svga="{{svgaData}}" bindnodeinserted="onSvgaLoaded"></parser> </view> </template> <script> import wxParser from 'wx-extend'; export default { data() { return { svgaData: 'https://xxx.com/xxx.svga' } }, methods: { onSvgaLoaded(e) { // svga动画加载完成后的回调函数 console.log('svga动画加载完成'); } }, mounted() { // 解析svga格式动画 wxParser.parseSVGA(this.svgaData, this.$el, 100); } } </script> ``` 以上就是在uniapp中实现播放svg / svga格式动画的详细步骤,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值