Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
amirvenus opened this issue Apr 18, 2023 · 5 comments
Open

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

amirvenus opened this issue Apr 18, 2023 · 5 comments
Labels

Comments

@amirvenus
Copy link

amirvenus commented Apr 18, 2023

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
Copy link
Contributor

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

@mattleibow
Copy link
Contributor

Real issue tracked here: mono/SkiaSharp#2173

@mattleibow
Copy link
Contributor

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

@mattleibow
Copy link
Contributor

This PR will get us to the happy place: mono/SkiaSharp#2630

@mattleibow
Copy link
Contributor

Now that we have #277, I think we can finally do this!

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants