网站维护是什么专业,太原seo排名,辽宁app开发公司,开发和研发的区别什么是 Lottie Lottie 是 Airbnb 发布的一款开源动画库#xff0c;它适用于 Android、iOS、Web 和 Windows 的库。 它提供了一套从设计师使用 AE#xff08;Adobe After Effects#xff09;到各端开发者实现动画的工具流。 UED 提供动画 json 文件即可#xff0c; 开发者就… 什么是 Lottie Lottie 是 Airbnb 发布的一款开源动画库它适用于 Android、iOS、Web 和 Windows 的库。 它提供了一套从设计师使用 AEAdobe After Effects到各端开发者实现动画的工具流。 UED 提供动画 json 文件即可 开发者就可以直接运用在 iOS、Android、Web 和 React Native之上无需其他额外操作。 Lottie-Web 是 Lottie 在 web 端的技术方案。 Lottie-Web 提供了 SVG、Canvas 和 HTML 三种渲染模式一般使用 Svg 或 Canvas 即可。 1、SVG 渲染器支持的特性最多也是使用最多的渲染方式。并且 SVG 是可伸缩的任何分辨率下不会失真; 2、Canvas 渲染器就是根据动画的数据将每一帧的对象不断重绘出来; 3、HTML 渲染器受限于其功能支持的特性最少只能做一些很简单的图形或者文字也不支持滤镜效果。 安装依赖 npm install lottie-web --save 从官网下载了一个json文件示例
LottieFiles: Download Free lightweight animations for website apps.
也可以下载gif格式 基本使用
script setup
import { ref, onMounted } from vue
import lottie from lottie-webconst lottieInstance ref(null)
const lottieInstance2 ref(null)let imgName Animation - 1712559820721.json
const getImg () {return new URL(/src/assets/${imgName}, import.meta.url).href;
}
const init () {// 读取动画容器const lottieContainer document.getElementById(lottieId)if (!lottieContainer) return;// 实例化lottieInstance.value lottie.loadAnimation({// UED 提供的 动画的 json 文件path: https://static-cdn.canyuegongzi.xyz/lf20/lf20_jv0xz0qi.json,// 渲染方式renderer: svg,// 是否循环loop: true,autoplay: true, // 自动播放container: lottieContainer, // 用于渲染的容器});// 初始化第二个动画const lottieContainer2 document.getElementById(lottieId2)if (!lottieContainer2) return;lottieInstance2.value lottie.loadAnimation({path: getImg(),// path: ./src/assets/Animation - 1712559820721.json,renderer: svg,loop: true,autoplay: true,container: lottieContainer2});
}const onStart () {lottieInstance.value?.play();lottieInstance2.value?.play();
}onMounted(() {init()onStart()
})
/scripttemplatediv classcardimg src../assets/Animation - 1712559725257.gif /img src../assets/Animation - 1712559820721.gif //divdiv styledisplay: flex;div idlottieId/divdiv idlottieId2/div/div/templatestyle scoped#lottieId {width: 300px;height: 300px;
}#lottieId2 {width: 300px;height: 300px;
}
/style文章参考自 http://t.csdnimg.cn/fh4Ww lottie-weblottie动画使用详解_动画_jasmine 莉-华为开发者联盟HarmonyOS专区
