音视频开发之旅（62) -Lottie 源码分析之json解析

最新推荐文章于 2024-03-11 13:28:11 发布
最新推荐文章于 2024-03-11 13:28:11 发布
阅读量3.3k 收藏 3
点赞数
分类专栏： 音视频开发之旅 文章标签： json 音视频 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011570979/article/details/122396319
版权

目录

  1. Lottie能做什么
  2. Lottie 动画使用调用流程
  3. Json字段介绍
  4. 解析为LottieComposition
  5. 资料
  6. 总结

一、Lottie能做什么

在实现动画方面，原生的方式开发成本比较高，airbnb开源的lottie有Android、iOS、RN等多个版本的支持，设计师通过AE设计好动画后，通过AE插件Bodymovin导出json和素材文件。

可以上 https://lottiefiles.com/popular 看看一些流行的 Lottie 动效

客户端通过加载解析渲染播放 即可实现对应的动画效果，这个思路和设计非常值得学习借鉴。接下来两篇我们对其进行学习分析，欢迎讨论交流。

二、Lottie 动画使用调用流程

Lottie 的动画调用流程

1. 创建LottieAnimationView
2. 创建LottieDrawable
3. 解析json文件为LottieComposition对象
4. lottieDrawable.setComposition(lottieComposition)
   lottieAnimationView.setImageDrawable(lottieDrawable)
5. 播放动画playAnimation()
在onValueChanged时，各个创建好的Drawable会根据需求进行重绘，达到动画的效果。

对于开发者使用非常简单, 可以参考lottie源码中sample的使用。

三、Json字段介绍

我们以Lottie-android提供的demo中的AndroidWave.json和anima.json 为例来学习
object

下面我们看下assets中的字段
object->assets：资源

可以看到object中有layers ,assets中也可能有layers，那边layers这个图层字段包含了什么信息呐。
object->layers：图层

object->layers->ty：图层类型

object->layers->ks：图层变换

“o 、r、 p、 a、 s”中字段相同，都是a、k、x、ix 下面对a、k做说明。x、ix也不知道什么用处。
object->layers->ks-> o 、r、 p、 a、 s

Lottie json的字段基本解释完，下面我们结合Lottie-android的源码看下解析为LottieComposition的过程

四、 解析为LottieComposition

json的解析器，解析为LottieComposition对象

 

4.1 LottieComposition解析的过程

LottieComposition对象

json的解析器，解析为LottieComposition对象

//lottie json的解析器，解析为LottieComposition对象
public class LottieCompositionMoshiParser {
  private static final JsonReader.Options NAMES = JsonReader.Options.of(
      "w", // 0
      "h", // 1
      "ip", // 2
      "op", // 3
      "fr", // 4
      "v", // 5
      "layers", // 6
      "assets", // 7
      "fonts", // 8
      "chars", // 9
      "markers" // 10
  );

  public static LottieComposition parse(JsonReader reader) throws IOException {
    float scale = Utils.dpScale();
    float startFrame = 0f;
    float endFrame = 0f;
    float frameRate = 0f;
    final LongSparseArray<Layer> layerMap = new LongSparseArray<>();
    final List<Layer> layers = new ArrayList<>();
    int width = 0;
    int height = 0;
    Map<String, List<Layer>> precomps = new HashMap<>();
    Map<String, LottieImageAsset> images = new HashMap<>();
    Map<String, Font> fonts = new HashMap<>();
    List<Marker> markers = new ArrayList<>();
    SparseArrayCompat<FontCharacter> characters = new SparseArrayCompat<>();

    LottieComposition composition = new LottieComposition();
    reader.beginObject();
    while (reader.hasNext()) {
      switch (reader.selectName(NAMES)) {
        case 0:
          width = reader.nextInt();
          break;
        case 1:
          height = reader.nextInt();
          break;
        case 2:
          startFrame = (float) reader.nextDouble();
          break;
        case 3:
          endFrame = (float) reader.nextDouble() - 0.01f;
          break;
        case 4:
          frameRate = (float) reader.nextDouble();
          break;
        case 5:
          String version = reader.nextString();
          String[] versions = version.split("\\.");
          int majorVersion = Integer.parseInt(versions[0]);
          int minorVersion = Integer.parseInt(versions[1]);
          int patchVersion = Integer.parseInt(versions[2]);
          if (!Utils.isAtLeastVersion(majorVersion, minorVersion, patchVersion,
              4, 4, 0)) {
            composition.addWarning("Lottie only supports bodymovin >= 4.4.0");
          }
          break;
        case 6://重点看下parseLayers的实现
          parseLayers(reader, composition, layers, layerMap);
          break;
        case 7:
          parseAssets(reader, composition, precomps, images);
          break;
        case 8:
          parseFonts(reader, fonts);
          break;
        case 9:
          parseChars(reader, composition, characters);
          break;
        case 10:
          parseMarkers(reader, markers);
          break;
        default:
          reader.skipName();
          reader.skipValue();
      }
    }
    
    // w、h会根据像素密度自动适配
    int scaledWidth = (int) (width * scale);
    int scaledHeight = (int) (height * scale);
    Rect bounds = new Rect(0, 0, scaledWidth, scaledHeight);

    //json内容解析完之后，调用composition的init进行LottieComposition字段的赋值，完成json对LottieComposition的工作
    composition.init(bounds, startFrame, endFrame, frameRate, layers, layerMap, precomps,
        images, characters, fonts, markers);

    return composition;
  }

  private static void parseLayers(JsonReader reader, LottieComposition composition,
      List<Layer> layers, LongSparseArray<Layer> layerMap) throws IOException {
    int imageCount = 0;
    reader.beginArray();
    //遍历解析每个layer图层，
    while (reader.hasNext()) {
      //图层解析
      Layer layer = LayerParser.parse(reader, composition);
      if (layer.getLayerType() == Layer.LayerType.IMAGE) {
        imageCount++;
      }
      //加入到layers和map提高效率
      layers.add(layer);
      layerMap.put(layer.getId(), layer);

    }
    reader.endArray();
  }

4.2 layers图层的解析过程

被解析为Layer对象

通过LayerParser把json中layers解析为Layer对象

//通过LayerParser把json中layers解析为Layer对象
public class LayerParser {

  //对应 json中layers的字段
  private static final JsonReader.Options NAMES = JsonReader.Options.of(
      "nm", // 0
      "ind", // 1
      "refId", // 2
      "ty", // 3
      "parent", // 4
      "sw", // 5
      "sh", // 6
      "sc", // 7
      "ks", // 8
      "tt", // 9
      "masksProperties", // 10
      "shapes", // 11
      "t", // 12
      "ef", // 13
      "sr", // 14
      "st", // 15
      "w", // 16
      "h", // 17
      "ip", // 18
      "op", // 19
      "tm", // 20
      "cl", // 21
      "hd" // 22
  );


  private static final JsonReader.Options TEXT_NAMES = JsonReader.Options.of(
      "d",
      "a"
  );

  private static final JsonReader.Options EFFECTS_NAMES = JsonReader.Options.of(
      "ty",
      "nm"
  );

  public static Layer parse(JsonReader reader, LottieComposition composition) throws IOException {
    // This should always be set by After Effects. However, if somebody wants to minify
    // and optimize their json, the name isn't critical for most cases so it can be removed.
    String layerName = "UNSET";
    Layer.LayerType layerType = null;
    String refId = null;
    long layerId = 0;
    int solidWidth = 0;
    int solidHeight = 0;
    int solidColor = 0;
    int preCompWidth = 0;
    int preCompHeight = 0;
    long parentId = -1;
    float timeStretch = 1f;
    float startFrame = 0f;
    float inFrame = 0f;
    float outFrame = 0f;
    String cl = null;
    boolean hidden = false;
    BlurEffect blurEffect = null;
    DropShadowEffect dropShadowEffect = null;

    Layer.MatteType matteType = Layer.MatteType.NONE;
    AnimatableTransform transform = null;
    AnimatableTextFrame text = null;
    AnimatableTextProperties textProperties = null;
    AnimatableFloatValue timeRemapping = null;

    List<Mask> masks = new ArrayList<>();
    List<ContentModel> shapes = new ArrayList<>();

    reader.beginObject();
    while (reader.hasNext()) {
      switch (reader.selectName(NAMES)) {
        case 0:
          layerName = reader.nextString();
          break;
        case 1:
          layerId = reader.nextInt();
          break;
        case 2:
          refId = reader.nextString();
          break;
        case 3:
          int layerTypeInt = reader.nextInt();
          //看下Layer.LayerType的值 对应json中ty
          if (layerTypeInt < Layer.LayerType.UNKNOWN.ordinal()) {
            layerType = Layer.LayerType.values()[layerTypeInt];
          } else {
            layerType = Layer.LayerType.UNKNOWN;
          }
          break;
        case 4:
          parentId = reader.nextInt();
          break;
        case 5:
          solidWidth = (int) (reader.nextInt() * Utils.dpScale());
          break;
        case 6:
          solidHeight = (int) (reader.nextInt() * Utils.dpScale());
          break;
        case 7:
          solidColor = Color.parseColor(reader.nextString());
          break;
        case 8:
          //图层变换，动画的 这个重点看下 
          transform = AnimatableTransformParser.parse(reader, composition);
          break;
        case 9:
          int matteTypeIndex = reader.nextInt();
          if (matteTypeIndex >= Layer.MatteType.values().length) {
            composition.addWarning("Unsupported matte type: " + matteTypeIndex);
            break;
          }
          matteType = Layer.MatteType.values()[matteTypeIndex];
          switch (matteType) {
            case LUMA:
              composition.addWarning("Unsupported matte type: Luma");
              break;
            case LUMA_INVERTED:
              composition.addWarning("Unsupported matte type: Luma Inverted");
              break;
          }
          composition.incrementMatteOrMaskCount(1);
          break;
        case 10:
          //蒙层解析
          reader.beginArray();
          while (reader.hasNext()) {
            masks.add(MaskParser.parse(reader, composition));
          }
          composition.incrementMatteOrMaskCount(masks.size());
          reader.endArray();
          break;
        case 11:
          reader.beginArray();
          while (reader.hasNext()) {
            ContentModel shape = ContentModelParser.parse(reader, composition);
            if (shape != null) {
              shapes.add(shape);
            }
          }
          reader.endArray();
          break;
        case 12:
          reader.beginObject();
          while (reader.hasNext()) {
            switch (reader.selectName(TEXT_NAMES)) {
              case 0:
                text = AnimatableValueParser.parseDocumentData(reader, composition);
                break;
              case 1:
                reader.beginArray();
                if (reader.hasNext()) {
                  textProperties = AnimatableTextPropertiesParser.parse(reader, composition);
                }
                while (reader.hasNext()) {
                  reader.skipValue();
                }
                reader.endArray();
                break;
              default:
                reader.skipName();
                reader.skipValue();
            }
          }
          reader.endObject();
          break;
        case 13:
          //特效
          reader.beginArray();
          List<String> effectNames = new ArrayList<>();
          while (reader.hasNext()) {
            reader.beginObject();
            while (reader.hasNext()) {
              switch (reader.selectName(EFFECTS_NAMES)) {
                case 0:
                  int type = reader.nextInt();
                  if (type == 29) {
                    blurEffect = BlurEffectParser.parse(reader, composition);
                  } else if (type == 25) {
                    dropShadowEffect = new DropShadowEffectParser().parse(reader, composition);
                  }
                  break;
                case 1:
                  String effectName = reader.nextString();
                  effectNames.add(effectName);
                  break;
                default:
                  reader.skipName();
                  reader.skipValue();

              }
            }
            reader.endObject();
          }
          reader.endArray();
          composition.addWarning("Lottie doesn't support layer effects. If you are using them for " +
              " fills, strokes, trim paths etc. then try adding them directly as contents " +
              " in your shape. Found: " + effectNames);
          break;
        case 14:
          timeStretch = (float) reader.nextDouble();
          break;
        case 15:
          startFrame = (float) reader.nextDouble();
          break;
        case 16:
          preCompWidth = (int) (reader.nextInt() * Utils.dpScale());
          break;
        case 17:
          preCompHeight = (int) (reader.nextInt() * Utils.dpScale());
          break;
        case 18:
          inFrame = (float) reader.nextDouble();
          break;
        case 19:
          outFrame = (float) reader.nextDouble();
          break;
        case 20:
          timeRemapping = AnimatableValueParser.parseFloat(reader, composition, false);
          break;
        case 21:
          cl = reader.nextString();
          break;
        case 22:
          hidden = reader.nextBoolean();
          break;
        default:
          reader.skipName();
          reader.skipValue();
      }
    }
    reader.endObject();

    List<Keyframe<Float>> inOutKeyframes = new ArrayList<>();
    // Before the in frame
    if (inFrame > 0) {
      Keyframe<Float> preKeyframe = new Keyframe<>(composition, 0f, 0f, null, 0f, inFrame);
      inOutKeyframes.add(preKeyframe);
    }

    // The + 1 is because the animation should be visible on the out frame itself.
    outFrame = (outFrame > 0 ? outFrame : composition.getEndFrame());
    Keyframe<Float> visibleKeyframe =
        new Keyframe<>(composition, 1f, 1f, null, inFrame, outFrame);
    inOutKeyframes.add(visibleKeyframe);

    Keyframe<Float> outKeyframe = new Keyframe<>(
        composition, 0f, 0f, null, outFrame, Float.MAX_VALUE);
    inOutKeyframes.add(outKeyframe);

    if (layerName.endsWith(".ai") || "ai".equals(cl)) {
      composition.addWarning("Convert your Illustrator layers to shape layers.");
    }

    //根据上面解析的值，生成对应的Layer对象。这个对象是进行绘制
    return new Layer(shapes, composition, layerName, layerId, layerType, parentId, refId,
        masks, transform, solidWidth, solidHeight, solidColor, timeStretch, startFrame,
        preCompWidth, preCompHeight, text, textProperties, inOutKeyframes, matteType,
        timeRemapping, hidden, blurEffect, dropShadowEffect);
  }
}

4.3 ks图层变换的解析过程

被解析为对象AnimatableTransform

通过AnimatableTransformParser把json中ks解析为AnimatableTransform对象

//通过AnimatableTransformParser把json中ks解析为AnimatableTransform对象
public class AnimatableTransformParser {

  private static final JsonReader.Options NAMES = JsonReader.Options.of(
      "a",  // 1
      "p",  // 2
      "s",  // 3
      "rz", // 4
      "r",  // 5
      "o",  // 6
      "so", // 7
      "eo", // 8
      "sk", // 9
      "sa"  // 10
  );
  private static final JsonReader.Options ANIMATABLE_NAMES = JsonReader.Options.of("k");

  public static AnimatableTransform parse(
      JsonReader reader, LottieComposition composition) throws IOException {
    AnimatablePathValue anchorPoint = null;
    AnimatableValue<PointF, PointF> position = null;
    AnimatableScaleValue scale = null;
    AnimatableFloatValue rotation = null;
    AnimatableIntegerValue opacity = null;
    AnimatableFloatValue startOpacity = null;
    AnimatableFloatValue endOpacity = null;
    AnimatableFloatValue skew = null;
    AnimatableFloatValue skewAngle = null;

    boolean isObject = reader.peek() == JsonReader.Token.BEGIN_OBJECT;
    if (isObject) {
      reader.beginObject();
    }
    while (reader.hasNext()) {
      switch (reader.selectName(NAMES)) {
        case 0: // a
          reader.beginObject();
          while (reader.hasNext()) {
            switch (reader.selectName(ANIMATABLE_NAMES)) {
              case 0:
                anchorPoint = AnimatablePathValueParser.parse(reader, composition);
                break;
              default:
                reader.skipName();
                reader.skipValue();
            }
          }
          reader.endObject();
          break;
        case 1: // p
          position =
              AnimatablePathValueParser.parseSplitPath(reader, composition);
          break;
        case 2: // s
          scale = AnimatableValueParser.parseScale(reader, composition);
          break;
        case 3: // rz
          composition.addWarning("Lottie doesn't support 3D layers.");
        case 4: // r
          rotation = AnimatableValueParser.parseFloat(reader, composition, false);
          if (rotation.getKeyframes().isEmpty()) {
            rotation.getKeyframes().add(new Keyframe<>(composition, 0f, 0f, null, 0f, composition.getEndFrame()));
          } else if (rotation.getKeyframes().get(0).startValue == null) {
            rotation.getKeyframes().set(0, new Keyframe<>(composition, 0f, 0f, null, 0f, composition.getEndFrame()));
          }
          break;
        case 5: // o
          opacity = AnimatableValueParser.parseInteger(reader, composition);
          break;
        case 6: // so
          startOpacity = AnimatableValueParser.parseFloat(reader, composition, false);
          break;
        case 7: // eo
          endOpacity = AnimatableValueParser.parseFloat(reader, composition, false);
          break;
        case 8: // sk
          skew = AnimatableValueParser.parseFloat(reader, composition, false);
          break;
        case 9: // sa
          skewAngle = AnimatableValueParser.parseFloat(reader, composition, false);
          break;
        default:
          reader.skipName();
          reader.skipValue();
      }
    }
    if (isObject) {
      reader.endObject();
    }

    if (isAnchorPointIdentity(anchorPoint)) {
      anchorPoint = null;
    }
    if (isPositionIdentity(position)) {
      position = null;
    }
    if (isRotationIdentity(rotation)) {
      rotation = null;
    }
    if (isScaleIdentity(scale)) {
      scale = null;
    }
    if (isSkewIdentity(skew)) {
      skew = null;
    }
    if (isSkewAngleIdentity(skewAngle)) {
      skewAngle = null;
    }
    //根据解析的属性生成AnimatableTransform对象
    return new AnimatableTransform(anchorPoint, position, scale, rotation, opacity, startOpacity, endOpacity, skew, skewAngle);
  }

五、资料

  1. Lottie 的使用
  2. Lottie实现思路和源码分析
  3. 如何看懂json参数
  4. Lottie—json文件解析
  5. Lottie 还可以做这些？

六、收获

通过本篇的学习

  1. 了解Lottie动画的流程
  2. 了解lottie json的中每个字段的含义
  3. 分析lottie json解析过程

感谢你的阅读
下一篇我们分析学习Layer渲染和动画部分的实现，欢迎关注公众号“音视频开发之旅”，一起学习成长。
欢迎交流

音视频开发之旅
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
非常漂亮的影视解析源码.zip
05-18
非常漂亮的前端页面 可直接前端输入链接解析 可自用可当作影视站接口 接口格式：你的域名/?url= 后台自带解析接口，超清无广告，支持超前点播，如失效可在后台自行更改 无需安装，直接上传源码至服务器或虚拟主机即可，后台：域名/admin 密码：123456
ae导出json_Lottie动画json文件解析
weixin_39866487的博客
11-27 3400
导读：Lottie 是一个很好的动画库，不同于FaceBook 的 POP，Lottie 主要是重现由AE(Adobe After Effects)实现的动画，具体方法是AE 导出一个json，Lottie 读取json 进行较为炫酷的动画。本文主要讲述从AE的bodymovin插件导出的JSON文件到Objective-c的LOTCompisition实体对象的过程。JSON文件包含做...
Web端使用Lottie渲染AE导出的json动画-lottie-web-demo
最新发布
JackieDYH的博客
03-11 1147
创建LottieAni文件。
Lottie 动画AE+Bodymovin导出的JSON文件解读
mo911108的博客
02-09 2134
lottie动画的json配置object 名称 定义 v 使用bodymovin的版本 assetes 图片集合 layers 图层集合 w 视图的宽度 h 视图的高度 ip 起始关键帧 op 结束关键帧 fr 帧率 动画时间 = (op - ip)/fr 在AE制作视频是的开始和结束时通过设置两个关键帧关键帧来完成。帧率就是单位为每秒显示帧数。 object -> assetes assetes是...
Lottie源代码解析
weixin_52192405的博客
07-17 513
简单介绍第三方库Lottie的源代码
Lottie源码浅探
dcsff的专栏
05-28 1431
Lottie动画步骤：前置知识：Lottie对动画的变换主要是通过Matrix实现， 因此需要了解Matrix相关知识，可以看下下面的博客：https://blog.csdn.net/pathuang68/article/details/6991867一、动画Json传入方法：Json动画传入的方式定义在LottieComposition.Factory中，分别为：1.      fromAsse...
Lottie—json文件解析
半宛清愁的博客
09-11 1万+
Lottie主要类图： Lottie对外通过控件LottieAnimationView暴露接口，控制动画。 LottieAnimationView继承自ImageView，通过当前时间绘制canvas显示到界面上。这里有两个关键类：LottieComposition 负责解析json描述文件，把json内容转成Java数据对象；LottieDrawable负责绘制，把LottieCompo...
Lottie系列二：高级属性
许进进的博客
07-18 2081
要理解如何在 Lottie 中更改动画属性，首先应了解动画属性是如何存储在 Lottie 中的。动画属性存储在一个数据树中，该数据树模仿 After effect 的信息层次结构。在后效果一个组合是一个图层的集合，每个图层都有自己的时间线。层对象有字符串名称，它们的内容可以是图像、形状图层、填充、笔画，或者几乎任何可绘制的内容。后效果中的每个对象都有一个名称。Lottie 可以使用 KeyPath 根据名称查找这些对象和属性。...
Lottie--前端动画效果--UI输出json格式--lottie动画在JavaScript中使用
weixin_45406850的博客
03-10 7076
Lottie一个适用于Web、Android、iOS、React Native和Window的移动库，它可以使用Bodymovin解析以json格式导出的Adobe After Effects动画，并再移动设备上进行本地渲染。 1.需要引入JavaScript文件，我使用的是cdn中的链接。这里直接上链接，按需取用。点这里 2.json格式的文件 我不是UI啊，我也不知道怎么做出来的，我只知道使用AE做的动画再导出的。到我手里就是两个文件：一个.html文件和一个.json文件。 html后缀的文件可以.
lottie.js动画的使用(JSON动画)
qq_43601848的博客
11-16 1437
lottie动画的使用步骤
微信小程序通过lottie库实现json动画
HOMEXS的博客
02-04 1879
在页面wxml文件创建一个canvas标签来存放动画（注意这里canvas需要包裹在view标签中并设置 style="width: 100%;把ui提供的json文件动画改成js文件并通过module.exports导出文件。json动画模糊问题处理（需要把像素比率计算进去，完美解决）在页面ts文件中使用动画。
json解析源码，纯c
06-24
json解析源码，纯c，可以直接使用。直接调用函数进行解析，适用于哥哥平台，亲测有效
一个JSON格式的Lottie动画文件
07-03
一个JSON格式的Lottie动画文件，使用阿里-犸良动画设计平台生成，用于Lottie动画+SwiftUI教程测试使用
puppeteer-lottie:通过Puppeteer将Lottie动画渲染为图像，GIF或MP4
05-01
在macOS上，您可以运行： brew install ffmpeg用法const renderLottie = require ( 'puppeteer-lottie' )// Create an MP4 from a lottie animationawait renderLottie ( { path : 'fixtures/bodymovin.json' , ...
iOS-多媒体-复杂动画-Lottie-播放本地和网络的Json动画文件-12Lottie-loadedFromUrlAndLo
05-20
iOS_多媒体_复杂动画_Lottie_播放本地和网络的Json动画文件_12Lottie-loadedFromUrlAndLoc
svelte-lottie-player:Svelte的Lottie Player组件
04-13
这提供了一个使用Lottie-Web库的Lottie播放器，并添加了一个控制工具栏，渲染图和其他方便的配置以查看Lottie动画。 特征 通过道具配置彩票网 控制工具栏，具有播放，暂停，停止，带有寻道器的进度跟踪，循环播放 ...
iOS-多媒体-复杂动画-Lottie-控制播放Json动画文件的播放进度-13Lottie-slider
05-20
iOS_多媒体_复杂动画_Lottie_控制播放Json动画文件的播放进度_13Lottie-slider
react-lottie-player:完全声明式的React Lottie玩家
03-31
安装npm install --save react-lottie-player用法import React from 'react'import Lottie from 'react-lottie-player'import lottieJson from './my-lottie.json'export default function Example ( ) { return ( &...
android音视频点/直播模块开发
热门推荐
yabin的专栏
04-21 2万+
前言随着音视频领域的火热，在很多领域（教育，游戏，娱乐，体育，跑步，餐饮，音乐等）尝试做音视频直播/点播功能，那么作为开发一个小白，如何快速学习音视频基础知识，了解音视频编解码的传输协议，编解码方式，以及如何技术选型，如何解决遇到的坑，本文抛砖引玉，欢迎大咖交流。一. 音视频的基础知识1.1 基本概念视频是什么静止的画面叫图像（picture）。连续的图像变化每秒超过24帧（frame）画面以上时，
vue3-lottie
08-23
vue3-lottie是一个用于在Vue3中使用Lottie动画的插件。安装它的步骤如下： 1. 首先，确保你已经安装了npm、cnpm、pnpm或yarn，这些都是常用的包管理工具，你可以根据自己的喜好选择其中一个来安装依赖。 2. 在你的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值