首页 - 素材教程 - 素材百科 - lottie素材-wpf加载.json动画

lottie素材-wpf加载.json动画

原创:素材网 2023-09-01 19:54:49

学生党反卷神器阿里推出6款神器

阿里推出6个免费AI神器

绘剪自动化生成短视频

“绘剪”工具可以实现分不同行业场景,免费视频模板可用急速生成体验,分秒级生产多视频创意高率创意,多元投放场景自动匹配灵活自定义能力,支持定制化创意编辑

猖良图片动效制作

它是一个积累了很多通用动效素材的平台让不会动效的也能基于动效库和素材库快速生成一个通用动效创意,你只需要简单地编辑图片、颜色或者文字即可。同时平支台集成了以 Lottie 为代表的动效技术。持全平台 iOS、Android、H5、小程序

ChartCube

按照不同的分析目的、样式需求,帮你选择适合的可视化图表类型从简平快的配置,到深入细节的微调,都有友好的方式为你呈现。各式图片、数据文件、配置记录,都可以导出。甚至一键复制代码

顽免抠图免费批量在线抠图

顽兔是一个由阿里出品的在线抠图网站我们只需要登陆,就可以使用。优点: 抠出的图片不限次数,可以批量上传抠图免费下载!

悉语·智能文案一键生成文案

悉语智能文案是阿里创意中心出品的一款一键生成商品营销文案的工具。在平台随意复制一款商品链接添加到工具中,点击生成文案,悉语智能文案工具就会生成该商品的营销文案,包括: 场景化文案、内容营销文案和商品属性文案,多种文案供用户选择!

堆友全量免费商用

堆友是由阿里设计师团队倾力打造的在线设计+编辑器平台,于2023年3月下旬首度公开亮相,将持续进行迭代与扩容,旨在填补设计领域的免费+高品质缺位。素材类别:场景、元素、人物

如何实现微信8.0爆炸和烟花表情特效

Lottie 是一套著名的跨平台动画效果解决方案, 支持iOS、Android、Web 和 React Native(所以我们的设计师对它也非常熟悉), 设计师使用Adobe After Effects设计好的动画导出成 JSON 格式,通过lottie,各平台使用这份json就可实现设计师的动画效果,不用各自去写复杂的动画逻辑,也省去了很多沟通成本。

根据lottie的Android源码,其大致原理是:

解析json->layer对象的映射->layer对象为layerview构造出各种path等->数据全部准备好就是不断的执行view的draw方法完成绘制

Android端的实现是基于Drawable,最终都是对canvas的操作。lottieDrawable中的setComposition方法中的buildCompositionLayer开始真正的解析layer和绘制

layer的类型与 AE中的图层的对应关系为:

Lottie - 轻松实现复杂的动画效果

lottie源码分析

[github:android地址] (

)

[github:ios地址] (]

)

如此酷炫又带音效的动画相当于透明视频了。如何在移动设备上播放透明视频呢?一般MP4格式的视频是没有透明通道的。可以分离出Alpha通道,再通过OpenGL ES重新实现Alpha通道和RGB通道的混合,从而实现在端上播放带透明通道的视频。

这个方案字节跳动和企鹅电竞用于直播间送礼动画,两家的开源方案在此,其原理是一模一样的:

字节跳动:[

] (

)

企鹅电竞:

AlphaPlayer的播放器是基于exoPlayer实现的,vap是自定义解码器,由于兼容性的原因,我本来更倾向于选择AlphaPlayer。但是后来发现vap做得更完善一些。对比AlphaPlayer的优势有:

行。

用lotttie方案已在我们的产品中实现“烟花”和“爆竹”的效果。但是美术嚷嚷效果不好。我们还是实现了,并且在播放动画的同时,还创建了一个音频播放器播放音效。

烟花:

此方案局限在于:

相比于lottie方案的好处:

如何使用:

AE将最终合成导出为png序列,然后使用VPA所提供工具合成带透明通道数据的MP4视频。

效果:

暂和lottie方案一致。(已接入实现)因为暂时使用同一份AE素材导出。不过显而易见地可以做得更精细,可能资源也会更大,目前mp4加2s的音效只有400k。

此处另外补一张此方案的效果对比一下,烟雾效果比lottie方案要逼真多了。

After Effects CC 全套入门教程

AE在我们项目中的应用除了上述特效动画,还有VE视频编辑模板。VE视频剪辑方案是一个集AE(Adore After Effects)和Pr(Premiere)软件功能为一体的视频处理方案。从视频特效的角度来看,它是一个类似After Effects的基于图层和特效插件系统的视频处理架构;从视频编辑的角度来讲,它是类似一个多轨道的含视频滤镜、贴纸、文字动画、轨道动画、视频特效、视频转场、视频动画为一体的视频编辑系统。

对于一个模板配置数据json进行分析(由VE配套工具导出)

附件 super_mosaic_

对上述聊天特效烟花json数据进行分析(由lotttie配套ae插件导出)

附件 YanHua_ChengHong_750×

从以下几个问题分析json数据结构

wpf加载.json动画

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()播放,后台操作播放需要通过控件去访问方法。

< 上一篇 情人节素材图片大全-七夕带字浪漫图片_七夕情人节浪漫情话图片? 下一篇 > 花瓣素材图片大全-插画手绘花瓣-求简单又好看的手绘玫瑰花步骤和图片
相关推荐
校园卫生海报-创建卫生城市宣传海报-怎么设计环保海报?
插画培训培训-插画培训机构推荐
海报奶茶招聘模板-奶茶店招聘信息怎么写?
校园纳新海报-社团纳新海报尺寸-动漫社招新海报制作要怎么作