Skip to content

[BUG] Animations with image assets fail to load images #169

Open
@amirvenus

Description

@amirvenus

Previously, when using the lottie animations, one could have one or more images with the animations and have them referenced in the data.json file.

As noted, we are referencing these images in that json payload:

img_0.png
img_1.png

We would then need to specify the Assets Folder path so that the app can locate the images:

animationView.ImageAssetsFolder = "images";

However, such functionality (specifying the ImageAssetsFolder) is missing on the new library and as a result - and as far as I know - we can only use images in base64 format as of now which is undesirable especially if you are a couple of images specified in the animation file.

An example would be:

{
  "v": "5.7.6",
  "fr": 24,
  "ip": 0,
  "op": 48,
  "w": 400,
  "h": 400,
  "nm": "welcome",
  "ddd": 0,
  "assets": [
    {
      "id": "image_0",
      "w": 101,
      "h": 72,
      "u": "",
      "p": "img_0.png",
      "e": 0
    },
    {
      "id": "image_1",
      "w": 256,
      "h": 390,
      "u": "",
      "p": "img_1.png",
      "e": 0
    }
  ],
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ty": 2,
      "nm": "face.png",
      "cl": "png",
      "refId": "image_0",
      "sr": 1,
      "ks": {
        "o": {
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "r": {
          "a": 1,
          "k": [
            {
              "i": {
                "x": [ 0.833 ],
                "y": [ 0.833 ]
              },
              "o": {
                "x": [ 0.167 ],
                "y": [ 0.167 ]
              },
              "t": 0,
              "s": [ 0 ]
            },
            {
              "i": {
                "x": [ 0.833 ],
                "y": [ 0.833 ]
              },
              "o": {
                "x": [ 0.167 ],
                "y": [ 0.167 ]
              },
              "t": 4,
              "s": [ 0 ]
            },
            {
              "i": {
                "x": [ 0.833 ],
                "y": [ 0.833 ]
              },
              "o": {
                "x": [ 0.167 ],
                "y": [ 0.167 ]
              },
              "t": 8,
              "s": [ -50 ]
            },
            {
              "i": {
                "x": [ 0.833 ],
                "y": [ 0.833 ]
              },
              "o": {
                "x": [ 0.167 ],
                "y": [ 0.167 ]
              },
              "t": 20,
              "s": [ 50 ]
            },
            {
              "t": 29,
              "s": [ 0 ]
            }
          ],
          "ix": 10
        },
        "p": {
          "a": 0,
          "k": [ 200, 273, 0 ],
          "ix": 2,
          "l": 2
        },
        "a": {
          "a": 0,
          "k": [ 50.5, 36, 0 ],
          "ix": 1,
          "l": 2
        },
        "s": {
          "a": 0,
          "k": [ 100, 100, 100 ],
          "ix": 6,
          "l": 2
        }
      },
      "ao": 0,
      "ip": 0,
      "op": 48,
      "st": 0,
      "bm": 0
    },
    {
      "ddd": 0,
      "ind": 2,
      "ty": 2,
      "nm": "LOCK.png",
      "cl": "png",
      "refId": "image_1",
      "sr": 1,
      "ks": {
        "o": {
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "r": {
          "a": 0,
          "k": 0,
          "ix": 10
        },
        "p": {
          "a": 0,
          "k": [ 200, 200, 0 ],
          "ix": 2,
          "l": 2
        },
        "a": {
          "a": 0,
          "k": [ 128, 195, 0 ],
          "ix": 1,
          "l": 2
        },
        "s": {
          "a": 0,
          "k": [ 100, 100, 100 ],
          "ix": 6,
          "l": 2
        }
      },
      "ao": 0,
      "ip": 0,
      "op": 48,
      "st": 0,
      "bm": 0
    }
  ],
  "markers": []
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions