[BUG] Animations with image assets fail to load images

amirvenus commented 1 year ago

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": []
}

mattleibow commented 1 year ago

Seems to also have issues with base64 images in the lottie files: https://lottiefiles.com/36895-healthy-or-junk-food

mattleibow commented 1 year ago

Real issue tracked here: https://github.com/mono/SkiaSharp/issues/2173

mattleibow commented 1 year ago

Anyone have an example file like this? I am working on fixing this and I want to add some tests.

mattleibow commented 1 year ago

This PR will get us to the happy place: https://github.com/mono/SkiaSharp/pull/2630

mattleibow commented 7 months ago

Now that we have https://github.com/mono/SkiaSharp.Extended/pull/277, I think we can finally do this!

FYI I also see there is a new file format dotLottie: https://dotlottie.io/

mono / SkiaSharp.Extended

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