{"id":10526,"date":"2023-07-06T00:11:11","date_gmt":"2023-07-05T22:11:11","guid":{"rendered":"https:\/\/www.incari.com\/lottie-animations\/"},"modified":"2023-02-16T17:17:33","modified_gmt":"2023-02-16T16:17:33","slug":"lottie-animations","status":"publish","type":"post","link":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/","title":{"rendered":"Generate high-quality animations with decreased loading and shipping time."},"content":{"rendered":"<h3 data-renderer-start-pos=\"354\">Making a lasting impression through animation<\/h3>\n<p data-renderer-start-pos=\"390\">Strong user engagement is the key to understanding users and building a loyal audience. For every brand, company, and product this is a struggle. One way to create a higher level of engagement is by using dynamic elements in UI design, such as animations. This powerful tool can allow you to showcase your brand personality and create small but impactful interactions that stand out to audiences. Visual cues and animations can serve as a guide or highlight features of your UI. For example, with a progress bar or an animation to indicate success you create a tailored experience.<\/p>\n<p data-renderer-start-pos=\"390\">The <em>Journal of the Association for Information Systems<\/em> study on the <a href=\"https:\/\/www.researchgate.net\/publication\/321039345_Effects_of_Animation_on_Attentional_Resources_of_Online_Consumers\"><em>Effects of Animation on Attentional Resources of Online Consumers<\/em><\/a> concluded that dynamic elements increase user enjoyment and time spent on a page. When it comes to animation implementation there is one problem many designers and developers encounter &#8211; performance and efficiency. That is where Lottie comes in.<\/p>\n<p><img decoding=\"async\" class=\"size-medium\" src=\"https:\/\/1175389792-files.gitbook.io\/~\/files\/v0\/b\/gitbook-x-prod.appspot.com\/o\/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-7394eb1ec22e4bc9dbe8f3c1ba99b758105ee59d%2Flottiespriteimage2.gif?alt=media\" alt=\"Incari Studio 2022.2 Lottie Implementation \" width=\"2542\" height=\"1359\" \/><\/p>\n<h3>From a dinosaur to a puppy<\/h3>\n<p data-renderer-start-pos=\"891\">GIF, video and image sequences, and more. There are multiple ways to export your animations, but with problems such as limited color availability and compression, they are likely to become low-quality and unscalable.<\/p>\n<p data-renderer-start-pos=\"891\"><a href=\"https:\/\/lottiefiles.com\/what-is-lottie\">Lottie<\/a>, developed in 2015 by Hernan Torrisi, is a file format that significantly decreases file sizes, loading, and shipping time while keeping the best possible quality. Named after\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Lotte_Reiniger\">Charlotte Reigners<\/a>, a German silhouette animation pioneer, Lottie is a JavaScript Object Notation (JSON) based animation file. This file format mixes vector raster elements and applies the animation at run time. Lottie is supported by many great design tools such as After Effects, Figma, and Canva. Why else do we think Lottie is great?<\/p>\n<ul>\n<li>Small file sized<\/li>\n<li>Increased loading speed<\/li>\n<li>Scaling without pixelation<\/li>\n<li>Easy to edit and convert into code<\/li>\n<li>Access to a large library of animations online<\/li>\n<\/ul>\n<h3>The Incari Studio 2022.2 and Lottie workflow<\/h3>\n<p>Sounds good right? Let\u2019s go over how to employ your animation in our software. To start, add your Lottie animation to the Incari Studio Asset manager and create a Lottie Sprite. The Lottie Sprite Object allows you to incorporate any Lottie animation into your user interface. To create this object click the plus icon in the Scene Outliner and select Lottie Sprite Object. Drag the file from the Asset Manager into the Attribute Editor.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium\" src=\"https:\/\/1175389792-files.gitbook.io\/~\/files\/v0\/b\/gitbook-x-prod.appspot.com\/o\/spaces%2FOEts3pBau6LMamSYhGZp%2Fuploads%2Fgit-blob-e10cd985059030bff99e2cd94de049d337f5f42e%2Fcreatelottiesprite2.png?alt=media\" width=\"917\" height=\"1200\" \/><\/p>\n<p>For more information on how to import and place Lottie animations in your project, you can check out our in-depth documentation article on Lottie, <a href=\"https:\/\/docs.incari.com\/incari-studio\/v\/2022.2\/objects-and-types\/scene-objects\/lottie-sprite\">here<\/a>.<\/p>\n<h3>From documentation to implementation<\/h3>\n<p>Lottie is a format that focuses on seamless project handoffs and easy implementation for developers. Create your animation with the design tool of your choice, and export your file as a Lottie to utilize dynamic elements for your interfaces.<\/p>\n<p>Start playing around with <a href=\"https:\/\/www.incari.com\/zh-hans\/incaristudio-2022-2\/\">Incari Studio 2022.2<\/a> with our <a href=\"https:\/\/www.incari.com\/zh-hans\/\u4ea7\u54c1\/incari-studio-trial\/\">30-day free trial<\/a>. Interested in purchasing a license for you and your team? Reach out to our <a href=\"mailto:sales@incari.com\">sales team<\/a> for more information on our enterprise plan.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Making a lasting impression through animation Strong us [&hellip;]<\/p>\n","protected":false},"author":629,"featured_media":12273,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[184],"tags":[],"class_list":["post-10526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-184"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Generate high-quality animations with decreased loading and shipping time. - Incari<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate high-quality animations with decreased loading and shipping time.\" \/>\n<meta property=\"og:description\" content=\"Making a lasting impression through animation Strong us [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Incari\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-05T22:11:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.incari.com\/wp-content\/uploads\/2023\/02\/Blog_Featured.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"robin.lemmen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"robin.lemmen\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/\"},\"author\":{\"name\":\"robin.lemmen\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#\\\/schema\\\/person\\\/9d84b3247b16dba8a9c0ebb6fc5aff85\"},\"headline\":\"Generate high-quality animations with decreased loading and shipping time.\",\"datePublished\":\"2023-07-05T22:11:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/\"},\"wordCount\":498,\"publisher\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.incari.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Blog_Featured-2.png\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/\",\"url\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/\",\"name\":\"Generate high-quality animations with decreased loading and shipping time. - Incari\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.incari.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Blog_Featured-2.png\",\"datePublished\":\"2023-07-05T22:11:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.incari.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Blog_Featured-2.png\",\"contentUrl\":\"https:\\\/\\\/www.incari.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Blog_Featured-2.png\",\"width\":1200,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/lottie-animations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate high-quality animations with decreased loading and shipping time.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#website\",\"url\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/\",\"name\":\"Incari\",\"description\":\"HMI Development Platform\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#organization\",\"name\":\"Incari GmbH\",\"url\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.incari.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Vertical.png\",\"contentUrl\":\"https:\\\/\\\/www.incari.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Vertical.png\",\"width\":1501,\"height\":772,\"caption\":\"Incari GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/company\\\/incari-gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCItKf_Bm_5rEWzPH0YozF2Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/#\\\/schema\\\/person\\\/9d84b3247b16dba8a9c0ebb6fc5aff85\",\"name\":\"robin.lemmen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d4911f3c2d3a6fac280bfee83e8ecd03342849b9bb04490d820e9be4f0c02a47?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d4911f3c2d3a6fac280bfee83e8ecd03342849b9bb04490d820e9be4f0c02a47?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d4911f3c2d3a6fac280bfee83e8ecd03342849b9bb04490d820e9be4f0c02a47?s=96&d=mm&r=g\",\"caption\":\"robin.lemmen\"},\"url\":\"https:\\\/\\\/www.incari.com\\\/zh-hans\\\/author\\\/robinlemmen222\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Generate high-quality animations with decreased loading and shipping time. - Incari","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/","og_locale":"zh_CN","og_type":"article","og_title":"Generate high-quality animations with decreased loading and shipping time.","og_description":"Making a lasting impression through animation Strong us [&hellip;]","og_url":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/","og_site_name":"Incari","article_published_time":"2023-07-05T22:11:11+00:00","og_image":[{"width":1200,"height":400,"url":"https:\/\/www.incari.com\/wp-content\/uploads\/2023\/02\/Blog_Featured.webp","type":"image\/webp"}],"author":"robin.lemmen","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"robin.lemmen","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/#article","isPartOf":{"@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/"},"author":{"name":"robin.lemmen","@id":"https:\/\/www.incari.com\/zh-hans\/#\/schema\/person\/9d84b3247b16dba8a9c0ebb6fc5aff85"},"headline":"Generate high-quality animations with decreased loading and shipping time.","datePublished":"2023-07-05T22:11:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/"},"wordCount":498,"publisher":{"@id":"https:\/\/www.incari.com\/zh-hans\/#organization"},"image":{"@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.incari.com\/wp-content\/uploads\/2023\/07\/Blog_Featured-2.png","inLanguage":"zh-Hans"},{"@type":"WebPage","@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/","url":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/","name":"Generate high-quality animations with decreased loading and shipping time. - Incari","isPartOf":{"@id":"https:\/\/www.incari.com\/zh-hans\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/#primaryimage"},"image":{"@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.incari.com\/wp-content\/uploads\/2023\/07\/Blog_Featured-2.png","datePublished":"2023-07-05T22:11:11+00:00","breadcrumb":{"@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.incari.com\/zh-hans\/lottie-animations\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/#primaryimage","url":"https:\/\/www.incari.com\/wp-content\/uploads\/2023\/07\/Blog_Featured-2.png","contentUrl":"https:\/\/www.incari.com\/wp-content\/uploads\/2023\/07\/Blog_Featured-2.png","width":1200,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.incari.com\/zh-hans\/lottie-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.incari.com\/zh-hans\/"},{"@type":"ListItem","position":2,"name":"Generate high-quality animations with decreased loading and shipping time."}]},{"@type":"WebSite","@id":"https:\/\/www.incari.com\/zh-hans\/#website","url":"https:\/\/www.incari.com\/zh-hans\/","name":"Incari","description":"HMI Development Platform","publisher":{"@id":"https:\/\/www.incari.com\/zh-hans\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.incari.com\/zh-hans\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":"Organization","@id":"https:\/\/www.incari.com\/zh-hans\/#organization","name":"Incari GmbH","url":"https:\/\/www.incari.com\/zh-hans\/","logo":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.incari.com\/zh-hans\/#\/schema\/logo\/image\/","url":"https:\/\/www.incari.com\/wp-content\/uploads\/2022\/03\/Vertical.png","contentUrl":"https:\/\/www.incari.com\/wp-content\/uploads\/2022\/03\/Vertical.png","width":1501,"height":772,"caption":"Incari GmbH"},"image":{"@id":"https:\/\/www.incari.com\/zh-hans\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/incari-gmbh","https:\/\/www.youtube.com\/channel\/UCItKf_Bm_5rEWzPH0YozF2Q"]},{"@type":"Person","@id":"https:\/\/www.incari.com\/zh-hans\/#\/schema\/person\/9d84b3247b16dba8a9c0ebb6fc5aff85","name":"robin.lemmen","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/secure.gravatar.com\/avatar\/d4911f3c2d3a6fac280bfee83e8ecd03342849b9bb04490d820e9be4f0c02a47?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d4911f3c2d3a6fac280bfee83e8ecd03342849b9bb04490d820e9be4f0c02a47?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d4911f3c2d3a6fac280bfee83e8ecd03342849b9bb04490d820e9be4f0c02a47?s=96&d=mm&r=g","caption":"robin.lemmen"},"url":"https:\/\/www.incari.com\/zh-hans\/author\/robinlemmen222\/"}]}},"jetpack_featured_media_url":"https:\/\/www.incari.com\/wp-content\/uploads\/2023\/07\/Blog_Featured-2.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/posts\/10526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/users\/629"}],"replies":[{"embeddable":true,"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=10526"}],"version-history":[{"count":0,"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/posts\/10526\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/media\/12273"}],"wp:attachment":[{"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=10526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=10526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.incari.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=10526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}