{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/plus/lottie","result":{"data":{"current":{"frontmatter":{"title":"Lottie 动画","order":34,"brief":"在网页中展示 Lottie 动画","icon":"doc-lottie"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#params-其他常用参数","title":"Params 其他常用参数"},{"url":"#获取当前动画实例","title":"获取当前动画实例"},{"url":"#获取全局-lottie","title":"获取全局 Lottie"},{"url":"#api","title":"API"}]},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 34,\n  \"category\": \"Plus\",\n  \"title\": \"Lottie 动画\",\n  \"icon\": \"doc-lottie\",\n  \"dir\": \"column\",\n  \"brief\": \"在网页中展示 Lottie 动画\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Lottie \\u7EC4\\u4EF6\\u80FD\\u591F\\u4FBF\\u6377\\u7B80\\u5355\\u5730\\u6E32\\u67D3 Lottie \\u52A8\\u753B\\uFF0C\\u540C\\u65F6\\u63D0\\u4F9B\\u65B9\\u5F0F\\u83B7\\u53D6\\u5230\\u5168\\u5C40 Lottie \\u548C \\u52A8\\u753B\\u5B9E\\u4F8B\\u6EE1\\u8DB3\\u66F4\\u5E7F\\u6CDB\\u7684\\u914D\\u7F6E\\u9700\\u6C42\\u3002\\u5185\\u90E8\\u57FA\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lottie-web\"), \" \\u6E32\\u67D3 Lottie \\u52A8\\u753B\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u76F8\\u8F83\\u4E8E\\u76F4\\u63A5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lottie-web\"), \"\\uFF0C\\u4F7F\\u7528 Semi Lottie \\u7EC4\\u4EF6\\u7684\\u4F18\\u52BF\\u5728\\u4E8E\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65E0\\u9700\\u5173\\u5FC3\\u52A8\\u753B\\u5BB9\\u5668\\u7684\\u521B\\u5EFA\\u4E0E\\u9500\\u6BC1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u65E0\\u9700\\u5173\\u5FC3\\u52A8\\u753B\\u672C\\u8EAB\\u7684\\u751F\\u547D\\u5468\\u671F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u66F4\\u6613\\u548C React \\u9879\\u76EE\\u7ED3\\u5408\\u4F7F\\u7528\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Lottie \\u4ECE v2.62.0 \\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Lottie } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5F53 Lottie \\u52A8\\u753B\\u8D44\\u6E90 JSON \\u5728 CDN \\u4E0A\\u65F6\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5411 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"params\"), \" props \\u91CC\\u4F20\\u5165 path= \\u4F60\\u7684 lottie json \\u7684 URL \\u5373\\u53EF\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import { Lottie } from '@douyinfe/semi-ui';\\nimport React from 'react';\\n\\n() => {\\n    const jsonURL =\\n        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json';\\n\\n    return (\\n        <div>\\n            <Lottie params={{ path: jsonURL }} width={'300px'} height={'300'} />\\n        </div>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5F53 Lottie \\u52A8\\u753B\\u8D44\\u6E90 JSON \\u9700\\u8981\\u88AB\\u6253\\u5305\\u5230\\u7F51\\u7AD9\\u4EE3\\u7801\\u4E2D\\u65F6\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5411 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"params\"), \" props \\u91CC\\u4F20\\u5165 animationData= \\u4F60\\u7684 lottie json \\u5BF9\\u8C61\\u5373\\u53EF (\\u4E0B\\u65B9 Demo \\u8BF7\\u6C42 JSON \\u662F\\u4EC5\\u4F5C\\u4E3A\\u6F14\\u793A\\uFF0C\\u5B9E\\u9645\\u9879\\u76EE\\u4E2D json \\u5E94\\u5F53\\u88AB\\u624B\\u52A8 import\\uFF0C\\u800C\\u4E0D\\u662F\\u901A\\u8FC7\\u7F51\\u7EDC\\u8BF7\\u6C42\\u83B7\\u53D6\\uFF0C\\u8FD9\\u6837 JSON \\u52A8\\u753B\\u8D44\\u6E90\\u624D\\u4F1A\\u88AB\\u6253\\u5305\\u8FDB\\u7F51\\u7AD9\\u4EE3\\u7801)\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import { Lottie } from '@douyinfe/semi-ui';\\nimport React from 'react';\\n\\n() => {\\n    const jsonURL =\\n        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json';\\n    const [data, setData] = useState('');\\n\\n    useEffect(() => {\\n        fetch(jsonURL)\\n            .then(resp => resp.json())\\n            .then(setData);\\n    }, []);\\n\\n    return (\\n        <div>\\n            <Lottie params={{ animationData: data }} width={'300px'} height={'300px'} />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Params \\u5176\\u4ED6\\u5E38\\u7528\\u53C2\\u6570\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"params\"), \" \\u4F1A\\u88AB\\u7EC4\\u4EF6\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lottie-web\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lottie.loadAnimation\"), \" \\u4E2D\\uFF0C\\u53EF\\u4EE5\\u53C2\\u8003 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lottie-web\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage\"\n  }, \"\\u6587\\u6863\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5E38\\u7528\\u53C2\\u6570\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"//params\\n{\\n    container: element, // \\u6E32\\u67D3\\u5BB9\\u5668\\uFF0C\\u4E0D\\u4F20\\u5219\\u7531 Semi Lottie \\u7EC4\\u4EF6\\u81EA\\u52A8\\u914D\\u7F6E\\u5E76\\u751F\\u6210\\n    renderer: 'svg', // \\u6E32\\u67D3\\u65B9\\u5F0F\\uFF0C \\u9ED8\\u8BA4 SVG\\n    loop: true, // \\u662F\\u5426\\u5F00\\u542F\\u5FAA\\u73AF\\uFF0C\\u9ED8\\u8BA4 true\\n    autoplay: true, // \\u662F\\u5426\\u81EA\\u52A8\\u64AD\\u653E\\uFF0C\\u9ED8\\u8BA4 true\\uFF0C\\u8BBE\\u7F6E\\u4E3A false \\u65F6\\u9700\\u8981\\u901A\\u8FC7\\u52A8\\u753B\\u5B9E\\u4F8B\\u4E0A\\u7684 play \\u65B9\\u6CD5\\u624B\\u52A8\\u64AD\\u653E\\n    path: 'data.json' // \\u52A8\\u753B JSON \\u6587\\u4EF6\\u7684 URL \\u8DEF\\u5F84 \\uFF08\\u4E0E animationData \\u4E92\\u65A5\\uFF09\\n    animationData: {/*...*/} // \\u52A8\\u753B\\u7684 JSON \\u5BF9\\u8C61 \\uFF08\\u4E0E animationData \\u4E92\\u65A5\\uFF09\\n    /*...*/\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u83B7\\u53D6\\u5F53\\u524D\\u52A8\\u753B\\u5B9E\\u4F8B\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getAnimationInstance\"), \" \\u83B7\\u53D6\\u5F53\\u524D\\u64AD\\u653E\\u7684\\u52A8\\u753B\\u7684 animation \\u5B9E\\u4F8B\\uFF0C\\u5B9E\\u4F8B\\u4E0A\\u542B\\u6709\\u8BB8\\u591A\\u65B9\\u6CD5\\u7528\\u4E8E\\u8C03\\u6574\\u52A8\\u753B\\u7684\\u5404\\u9879\\u53C2\\u6570\\uFF0C\\u4F8B\\u5982\\u64AD\\u653E\\u6682\\u505C\\uFF0C\\u83B7\\u53D6\\u5F53\\u524D\\u5E27\\u5E8F\\u53F7\\uFF0C\\u8C03\\u6574\\u64AD\\u653E\\u901F\\u5EA6\\u7B49\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5173\\u4E8E\\u52A8\\u753B\\u5B9E\\u4F8B\\u4E0A\\u542B\\u6709\\u7684\\u65B9\\u6CD5\\uFF0C\\u66F4\\u591A\\u4FE1\\u606F\\u53EF\\u4EE5\\u53C2\\u8003 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lottie-web\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage\"\n  }, \"\\u6587\\u6863\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import { Lottie } from '@douyinfe/semi-ui';\\nimport React from 'react';\\n\\n() => {\\n    const jsonURL =\\n        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json';\\n\\n    return (\\n        <div>\\n            <Lottie\\n                getAnimationInstance={animation => {\\n                    console.log(animation);\\n                }}\\n                params={{ path: jsonURL }}\\n                width={'300px'}\\n                height={'300px'}\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u83B7\\u53D6\\u5168\\u5C40 Lottie\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getLottie\"), \" Props \\u83B7\\u53D6\\u5168\\u5C40 lottie\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 Semi Lottie \\u7EC4\\u4EF6\\u4E0A\\u7684\\u9759\\u6001\\u65B9\\u6CD5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Lottie.getLottie\"), \" \\u6765\\u83B7\\u53D6\\u5168\\u5C40 lottie\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5173\\u4E8E\\u5168\\u5C40 lottie \\u4E0A\\u542B\\u6709\\u7684\\u65B9\\u6CD5\\uFF0C\\u66F4\\u591A\\u4FE1\\u606F\\u53EF\\u4EE5\\u53C2\\u8003 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lottie-web\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage\"\n  }, \"\\u6587\\u6863\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import { Lottie } from '@douyinfe/semi-ui';\\nimport React from 'react';\\n\\n() => {\\n    const jsonURL =\\n        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json';\\n\\n    console.log('lottie', Lottie.getLottie());\\n\\n    return (\\n        <div>\\n            <Lottie\\n                getLottie={lottie => console.log('lottie', lottie)}\\n                params={{ path: jsonURL }}\\n                width={'300px'}\\n                height={'300px'}\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"params\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u4E8E\\u914D\\u7F6E\\u52A8\\u753B\\u76F8\\u5173\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u540C lottie-web lottie.loadAnimation \\u5165\\u53C2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getAnimationInstance\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6\\u5F53\\u524D\\u52A8\\u753B AnimationItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(animation:AnimationItem)=>void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getLottie\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6\\u5168\\u5C40 Lottie\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(lottie: Lottie)=>void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/plus/lottie","next":{"fields":{"slug":"en-US/input/autocomplete"},"id":"6bdff4f1-a764-58dc-bb8b-f285437b988b","frontmatter":{"title":"AutoComplete","localeCode":"en-US","icon":"doc-autocomplete","showNew":null}},"previous":{"fields":{"slug":"en-US/plus/lottie"},"id":"de0b81e0-360f-5e0d-b57e-d2bd27bc75c5","frontmatter":{"title":"Lottie Animation","localeCode":"en-US","icon":"doc-lottie","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}