Поддержка Lottie UWP

Я пробовал использовать Lottie для Xamarin.Forms на iOS и UWP, и теперь я полностью сбит с толку. Поскольку мое приложение UWP не отображает анимацию, я немного поискал и обнаружил, что UWP не поддерживается Lottie. Но поскольку на Nuget можно ссылаться из моего приложения UWP, я просмотрел описание того, что Nuget и команда Lottie написали, что это так.

введите здесь описание изображения

Итак, что теперь правильно? И если UWP IS поддерживается, нужно ли делать дополнительные шаги?


xamarin xamarin.forms c# uwp lottie
person Daniel DirtyNative Martin    schedule 14.11.2018    source источник
comment
Надеюсь, что поможет.   -  person Dishant    schedule 16.11.2018

Ответы (2)


arrow_upward
1
arrow_downward

Это похоже на "опечатку" в описании nuget, если вы посмотрите на исходный код от martijn00, он связал собственные библиотеки Lottie iOS и Android (а не веб-версию)

Существует html / js-версия Lottie (lottie-web), которую вы можете использовать через WebView Xamarin.Forms на iOS, Android, UWP.

Его действительно легко настроить, и вам не нужны никакие пользовательские пакеты / надстройки. Всего один файл JavaScript (lottie.js), ваш файл анимации на основе json и несколько простых HTML-файлов.

re: https://github.com/airbnb/lottie-web

Пример использования локальных файлов с lottie-web

Поместите свои файлы в каждый из локальных ресурсов собственного приложения, Активы (AndroidAsset) для Android, Ресурсы для (BundleResource) iOS и т. Д.

├── lottie.html
├── lottie.js
└── lottieLogo.json

Примечание: эти файлы должны быть предварительно сжаты / минимизированы для максимальной эффективности загрузки.

Примечание. Вы можете «связать» их из одного источника, поэтому на самом деле у вас не будет нескольких копий в решении.

Lottie.html

<!DOCTYPE html>
<html style="width: 100%;height: 100%">
<head>
    <script id="animData" type="application/json">
        LottieJsonReplaceMe
    </script>
    <script>
        LottieJavaScriptReplaceMe
    </script>
</head>
    <body style="background-color:#ccc; margin: 0px;height: 100%;">
        <div style="width:100%;height:100%;background-color:#333;" id="lottie"></div>
        <script>
            var data = JSON.parse(document.getElementById('animData').innerHTML);
            console.log("start:");
            console.log(data);
            console.log("end:");
            var animation = bodymovin.loadAnimation({
              container: document.getElementById('lottie'),
              animationData: data,
              renderer: 'svg/canvas/html',
              loop: false,
              autoplay: true,
              name: "StackOverflow",
              });
            var anim = bodymovin.loadAnimation(animation);
        </script>
    </body>
</html>

lottie.js

lottieLogo.json

  • Ваш файл данных анимации Lottie json

Объединение html, javascript и json в одну строку позволяет избежать защиты XMLHttpRequest / CORS на различных платформах / браузерах при работе с локальными файлами (file://localhost/....), в противном случае необходимо изменить настройки управления встроенным браузером каждой платформы.

Примечание. Использование Xamarin.Essentials из библиотеки .NetStd / Forms для получения потока к содержимому приложения, зависящего от платформы, только для чтения, и для местоположения кэша для сохранения комбинированного html (для эффективного многократного использования).

    string html;
    var htmlCachedFile = Path.Combine(FileSystem.CacheDirectory, "lottie.html");
#if DEBUG
    if (File.Exists(htmlCachedFile)) File.Delete(htmlCachedFile);
#endif
    if (!File.Exists(htmlCachedFile))
        using (var htmlStream = await FileSystem.OpenAppPackageFileAsync("lottie.html"))
        using (var jsStream = await FileSystem.OpenAppPackageFileAsync("lottie.js"))
        using (var jsonStream = await FileSystem.OpenAppPackageFileAsync("data.json"))
        {
            var jsonReader = new StreamReader(jsonStream);
            var json = jsonReader.ReadToEnd();
            var jsReader = new StreamReader(jsStream);
            var js = jsReader.ReadToEnd();
            var htmlReader = new StreamReader(htmlStream);
            var html1 = htmlReader.ReadToEnd();
            var html2 = html1.Replace("LottieJavaScriptReplaceMe", js);
            html = html2.Replace("LottieJsonReplaceMe", json);
            File.WriteAllText(htmlCachedFile, html);
        }
    else
        html = File.ReadAllText(htmlCachedFile);
    webView.Source = new HtmlWebViewSource() { Html = html };

Порт Lottie UWP

Существует порт Lottie для C # / UWP, я не использовал его лично, но должна быть возможность добавить средство визуализации пользовательских форм и интегрировать его в оболочку martijn00 Xamarin.Forms Lottie, чтобы добавить поддержку UWP:

https://github.com/azchohfi/LottieUWP

Примечание. Возможно, вы захотите просмотреть проблемы Github для этого порта, поскольку, похоже, не все анимации поддерживаются (?), И есть другие нерешенные проблемы ...

person SushiHangover    schedule 14.11.2018
comment
У вас есть примеры для этого? - person Daniel DirtyNative Martin; 15.11.2018
comment
Вы добавляете файлы html / js / json в свои собственные проекты точно так же, как пример загрузки локального содержимого Xamarin WebView: docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/ - person SushiHangover; 15.11.2018
comment
Поэтому после МНОГО попыток и ошибок я все еще не могу заставить его работать. Я добавил WebView и настроил, как описано, добавил , который выглядит как rel="nofollow noreferml работа, потому что я вижу фон, но не отображается анимация. - person Daniel DirtyNative Martin; 15.11.2018

arrow_upward
1
arrow_downward

Microsoft официально поддерживает Lottie в Windows для приложений UWP.

https://github.com/windows-toolkit/Lottie-Windows

Однако некоторые функции пока не поддерживаются. Вы можете проверить эту таблицу, чтобы узнать, поддерживается ли уже используемая вами функция в UWP: https://airbnb.io/lottie/supported-features.html

person Allan Jiang    schedule 13.03.2019