首页 > 其他分享 >在WPF中使用JSON(Lottie)动画

在WPF中使用JSON(Lottie)动画

时间:2022-11-24 23:11:43浏览次数:72  
标签:动画 播放 文件 JSON WPF Lottie True

摘要

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App 像使用静态素材一样使用这些动画,完美实现动画效果。在WPF中使用Lottie比直接使用Gif图像所占内存更小且不失真完美还原设计师的动画效果。

代码实现

1、安装LottieSharp包
Install-Package LottieSharp -Version 1.1.3

image-20221124224712998

Tips:1.1.3需要.NETFramework4.6.1环境,1.1.3以上需要.NET6以上环境

2、准备Lottie动画文件

image-20221124224736054

文末附Lottie下载网站,或自行寻求设计师帮助

3、XAML编写
<lottie:LottieAnimationView
            x:Name="PART_Lottie"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            AutoPlay="True"
            FileName="{Binding CurrentFile}" />
4、播放动画

在控件上设置AutoPlay为True可自动播放,也可手动在后台代码中使用PlayAnimation()播放,后台操作播放需要通过控件去访问方法。

属性说明:

属性/事件/方法 描述
AutoPlay True/False 为True时自动播放动画
FileName 文件路径 Lottie的文件路径
RepeatCount -1..N 重复次数,-1表示永远重复
Url 文件地址 播放在线json文件的动画
IsPlaying True/False 是否正在播放
OnStop(事件) 动画停止时触发,RepeatCount设为-1时永远不会触发
PlayAnimation() 播放动画

效果

1

制作Lottie文件

Lottie的制作流程如下:

img

其实就是将制作好的PS/AI图像,在AE中使用Bodymovin插件制作导出成Json文件

Json文件解析:

img

渲染原理:

img

Bodymovin插件下载:https://github.com/bigxixi/bodymovin_cn

具体使用教程自行研究或委托设计师帮助

参考教程:

Lottie动画制作整理

保姆级教程|Lottie动效设计完全指南

写给新手的Lottie指南

大厂设计都在用的动画导出工具——附详细流程

推荐Lottie动画库

在不会AE的情况下且又没有设计师的帮助下,可以去互联网寻找公开的动画库,推荐如下两个网站

代码

https://github.com/luchong0813/WPF_LottieAnimation_Demo

标签:动画,播放,文件,JSON,WPF,Lottie,True
From: https://www.cnblogs.com/chonglu/p/16923789.html

相关文章

  • JWT(JSON Web Token)介绍与实践
    作者:迷彩JWT(JSONWebToken)介绍与实践JWT介绍Jsonwebtoken(JWT),根据官网的定义,是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC7519).该toke......
  • spring boot 返回的json中去掉值为null的属性
    直接上代码:importcom.fasterxml.jackson.annotation.JsonInclude;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializ......
  • C#对类所有属性进行排序并输出Json数据以及对Json数据进行排序
    ///<summary>///对自定义类进行升序排序,并输出Json字符串///</summary>///<example>///stringjson=JsonConvert.SerializeObject(new自定义类名(){...},new......
  • jmeter-json获取多个返回值
    1、前提条件:·已安装jmeter并可以正常使用;·接口调试正常(正常请求);2、截图/源码:返回参数  JSON获取 ......
  • js判断是否是Json对象
    有两种方法1.使用正则表达式(推荐),代码如下:if(/^[\],:{}\s]*$/.test(text.replace(/\\["\\\/bfnrtu]/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[e......
  • js对Json数组进行深复制
    在开发微信小程序的时候,很多时候我们传json对象的时候都需要小心,因为传进去的都是引用,所以有深复制Json对象的需求,方法如下:varbasicInfoTmp=JSON.parse(JSON.stringify(u......
  • 【转】WPF DataContext
    简介:    获取或设置元素参与数据绑定时的数据上下文。数据上下文是一种概念,允许元素从父元素继承有关用于绑定的数据源以及绑定的其他特征(如路径)的信息。此依赖......
  • java中post发送json格式数据
    /***发送post请求*@paramURL数据发送地址*@paramjsonjson格式数据内容*@paramheadParams请求头内容*@return请求结果*/......
  • Fastjsonfan反序列化(一)
    前置知识Fastjson是一个Java库,可以将Java对象转换为JSON格式,当然它也可以将JSON字符串转换为Java对象。Fastjson可以操作任何Java对象,即使是一些预先存在......
  • 【COCOS2DX-LUA 脚本开发之十】使用Lua CJSON库进行encode与decode操作完成对Json数据
    本站文章均为​​李华明Himi​​​原创,转载务必在明显处注明:(作者新浪微博:​​@李华明Himi​​​) width="150"height="210"framebo......