bodymovin导出没有html5,Bodymovin导出Json文件避坑指南

一、放入AE中的图层最好是图片格式，如果是AI或者PSD格式图层，在mac系统会出现勾选了“保留图片名称”选项，但是无法输出image文件夹，演示的html会出现图片丢失

mac系统AE图层为AI或PSD格式，勾选“保留图片名称”选项，输出无图片

勾选“保留图片名称”选项，输出无图片html

勾选“保留图片名称”选项，输出无image文件夹

如若不勾选“保留图片名称”选项，插件导出的图片资源会自动命名为img_0至img_N，而如果产品中之前有同样的动效图片素材，放入该动效后，资源会覆盖。

默认命名，资源会覆盖同样命名的

所以，我们在AE文件中的图层需要全英文命名，且如若是在mac系统上，AE中的图层最好是图片。如果是AI或是PSD格式，需要手动将图层创建为形状，但是创建形状后图层颜色丢失，需要重新设置颜色。

故mac系统上建议使用图片作为图层。

(经验证，windows系统不存在这个问题，不管是AI图层还是PSD图层，勾选“保留图片名称”选项，导出.ai或是.PSD格式的资源，只要Json和素材能对应上，在开发实现上就没有问题)。

AI图层创建形状

AI图层创建形状后颜色丢失

image文件后缀

Json资源后缀

AI和PSD图层

html演示无问题

二、小程序实现APP端的动效，同样可使用Lottie库，使用bodymovin插件导出Json格式，值得注意的地方：资源在插件输出时要转化成base64格式，否则无法在小程序引入图片。

这样输出的文件会没有了image文件夹，图片资源一并存到了Json中，Json体积多大，动画在小程序的体积就是多大。

一个小细节是：压缩图片选项不管设置高还是低，Json的体积不会有太大的变化，所以保持默认80就OK。

小程序输出Json需要将图片资源转换为base64格式

三、Lottie库AE特性支持要点：形状、填充、基本属性变换可支持，蒙版部分效果不支持，考虑到多平台兼容，动画要求简单，输出时简化帧数

Lottie支持的AE特性列表官方文档：https://airbnb.io/lottie/#/supported-features

bodymovin导出没有html5,Bodymovin导出Json文件避坑指南相关推荐

基于xdocreport导出复杂word文档，专业避坑指南
如果你要先问我为什么要导出word?那么请你走开,你个杠精! 在完成这个功能时花费了大量的时间查阅资料,发现能满足导出复杂word文档的工具只有xdocreport,如果有其他的工具欢迎分享.废话不多 ...
ae导出json_关于AE转json动画开发避坑指南
本篇文章是给一定基础的UI设计写的 Lottie 是Airbnb开源的一个面向Android. iOS.React Native .Web的动画库,能分析 Adobe After Effects 导出 ...
html5 写json 文件,HTML5实现本地JSON文件的读写
参考: 使用HTML5来实现本地文件读取和写入 (FileReader读取json文件,FileSaver.js保存json文件) JS创建.写入.读取本地文件(txt) (ActiveXObj ...
Pinpoint【环境搭建 01】JDK\HBase\Pinpoint Collector+Web 最新版 2.3.3 安装配置运行验证及脚本文件分享（避坑指南捷径指北）
本文主要是介绍 Pinpoint 环境的部署,小伙伴儿们也可以参考 Pinpoint <官网>的<快速入门>手册,最新版本v2.3.3组件可到官方<GitHub仓库> ...
ensp桥接云ping不通_谁偷了我的云主机文件？五大场景避坑指南
在云主机的日常运维工作中,我们的工程师经常会遇到用户上报的文件丢失类问题,原因多种多样,这些问题对用户造成了或大或小的困扰.现将其中较典型的场景梳理出来,希望能够帮助大家规避掉这些风险,防止重复踩坑. ...
ajax文件流下载文件之避坑指南
公司一个老项目前端请求用的jquery的ajax,下载文件需要传用户信息所以没办法用window.location.href下载,用项目里面jquery的ajax下载,下载的压缩文件一直是下载下来解压 ...
【Linux部署】Greenplum数据库6.13.0单机版【重启实录】（5次报错问题及解决的避坑指南+日志文件查看方法）
GP数据库安装后正常运行,服务器被恶意连接故修改密码后重启,GP数据库也需要重新启动,这个重新启动的过程坑坑洼洼
Java实现将JSON文件导出到Excel
文章目录一.运行环境二.需求描述三.实现思路四.实现代码一.运行环境 windows10 IDEA 2022 JDK 8 Maven 3.8.6 Apache POI 5 fastjson2 ...
微信小程序云开发——常用功能2：操作云数据库一键批量导入数据（导入json文件）
微信小程序云开发--常用功能2:操作云数据库一键批量导入数据(导入json文件) 今天我们要添加100条数据.下面的过程是先创建一条记录,然后导出这条数据看json文件中是如何编辑字段的,然后仿照这个 ...
爬虫之scrapy框架的数据持久化存储/保存为scv,json文件
文章目录前情回顾 selenium+phantomjs/chrome/firefox execjs模块使用今日笔记 scrapy框架小试牛刀猫眼电影案例知识点汇总数据持久化存储(MySQL ...

bodymovin导出没有html5,Bodymovin导出Json文件避坑指南

bodymovin导出没有html5,Bodymovin导出Json文件避坑指南相关推荐

最新文章

热门文章