lottie动画

在开发MG项目的时候，考虑到自动化战斗吸引特点之一就是特效动画，那么还是得学着做一下的，直接就了解到了lottie动画

lottie介绍及其原理相关：

　　动画实现原理，高性能JSON动画，lottie优缺点及其JSON文件数据解析

记录一些学习到的东西：

html或vue-cli使用lottie，参考：here

基本html使用lottie动画的json文件写法，参考：here

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"></script>
引入js包

 

lottie动画基本方法，参考：here，(其他方法：here，监听事件：here)

一份我自己写的code：

复制代码
<!DOCTYPE html>
<html>

<head>
    <title>box</title>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.8/lottie_svg.min.js"></script> 无效引用 -->
    <!-- <script src="https://labs.nearpod.com/bodymovin/demo/markus/halloween/lottie.min.js"></script> 无效引用 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"></script>
    <style>
        .box {
            position: absolute;
            top: 0px;
        }
    </style>
</head>

<body>
    <!-- 
        但是这种方式不便于动态使用，应当在canvas组件内部使用
     -->
    <div id="svgContainer" style="width: 400px;height: 400px;"></div>
    <button type="button" onclick="start()">播放</button>
    <button type="button" onclick="pause()">暂停</button>
    <button type="button" onclick="stop()">停止</button><br>
    <button type="button" onclick="setSpeed(1)">播放速度:1</button>
    <button type="button" onclick="setSpeed(0.5)">播放速度:0.5</button>
    <button type="button" onclick="setSpeed(2)">播放速度:2</button>
    <button type="button" onclick="destroy()">销毁动画</button>
</body>
<script>
    var svgContainer=document.getElementById('svgContainer');
    var animItem=lottie.loadAnimation({
        container: svgContainer, // 包含动画的dom元素
        loop: true,// 循环播放
        autoplay: false, // 自动播放

        // renderer: "svg",
        renderer: "canvas",
        path: 'https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json',

        // 不兼容canvas/html绘制
        // renderer: "svg",
        // path: '../mine.json',
    })
    function start(){
        console.log("调用start");
        lottie.play();
    }
    function pause(){
        console.log("调用pause");
        lottie.pause();
    }
    function stop(){
        console.log("调用stop");
        lottie.stop();
    }
    function setSpeed(x){
        console.log("调用setSpeed",x);
        lottie.setSpeed(x);
    }
    function destroy(x){
        console.log("调用destroy");
        lottie.destroy();
    }
    // TIPS: 当设置path属性的时候，并不是简单的一个相对路径或者是绝对路径引入，
    // 而是lottie会发送一个http请求，访问这个json文件。
    // 如果是在vue/react项目中要注意最终的打包访问路径。
    
    // 考虑页面性能更优，建议使用svg渲染方式，
    // 通过path加载远程JSON文件，使用animationData会让json文件打包到JS中，
</script>
</html>
html+lottie基本方法
复制代码
复制代码
除了data_ready事件，下面还有一些其他常用的事件可以监听：

*complete: 播放完成(循环播放下不会触发)

*loopComplete: 当前循环下播放(循环播放/非循环播放)结束时触发

*enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发

*segmentStart: 播放指定片段时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。

*data_ready: 动画json文件加载完毕触发

*DOMLoaded: 动画相关的dom已经被添加到html后触发

*destroy: 将在动画删除时触发
常用事件
复制代码

 

【Over】

posted @   Renhr  阅读(160)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！
点击右上角即可分享
微信分享提示