⌘K

Apresentamos os novos Runtimes dotLottie

Construído para Desempenho e Consistência Cross-Plataforma

Vivencie animações aprimoradas, tempos de carregamento mais rápidos e suporte confiável em várias plataformas com os novos tempos de execução do dotLottie.

Experience enhanced animations, faster load times, and reliable

cross-platform support with the new dotLottie Runtimes.

Visit Developer Portal

Experiência perfeita em multiplataforma

Diga adeus à frustração das animações inconsistentes em diferentes plataformas. Nossos Runtimes dotLottie garantem paridade de recursos na web, Android e iOS.

Desempenho melhorado

Experiencie animações rápidas e suaves com o nosso tempo de execução de alta performance otimizado, projetado para aumentar a eficiência em todos os dispositivos.

Estudo de caso do Canva

Página de Teste de Desempenho

Consistência da plataforma

Alcance uma renderização uniforme de animações na web, iOS e Android, garantindo que suas animações sejam executadas de forma consistente em todas as plataformas.

Funcionalidades Suportadas

AE expressões prontas

NOVO

Integre facilmente as expressões do AE com suporte em todas as plataformas: web, iOS e Android, agora integradas de forma perfeita no reprodutor dotLottie.

Integrações Robustas da Estrutura

Com nossos runtimes, integrar-se com vários frameworks populares é fácil.

Web

React

VueJS

Svelte

React Native

Flutter

iOS

Android

import { DotLottie } from '@lottiefiles/dotlottie-web';

const dotLottie = new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.querySelector('#dotlottie-canvas'),
    src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
});

Web

React

VueJS

Svelte

React Native

Flutter

iOS

Android

import { DotLottie } from '@lottiefiles/dotlottie-web';

const dotLottie = new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.querySelector('#dotlottie-canvas'),
    src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
});

Web

React

VueJS

Svelte

React Native

Flutter

iOS

Android

import { DotLottie } from '@lottiefiles/dotlottie-web';

const dotLottie = new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.querySelector('#dotlottie-canvas'),
    src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
});

Visit Developer Portal

A vantagem do dotLottie

Apresentamos o dotLottie, nosso inovador formato de arquivo que traz uma série de benefícios:
tamanho de arquivo reduzido, interatividade, expressões juntamente com temas e pacotes agrupados.

Apresentamos dotLottie, nosso inovador formato de arquivo que traz uma série de benefícios: tamanho de arquivo reduzido, interatividade, expressões juntamente com tema e pacotes inclusos.

Introducing dotLottie, our innovative file format that brings a host of benefits: reduced file size, interactivity, expressions alongside theming and bundled packages.

Tamanho do ficheiro reduzido

Comprima suas animações em até 80% e aumente ou diminua sem pixelação.

Tamanho do ficheiro reduzido

Comprima suas animações em até 80% e aumente ou diminua sem pixelação.

Tematização

Adapte suas animações com facilidade para o modo escuro, modo claro ou modos personalizados pelo usuário.

Interatividade

Aproveite novos métodos de interatividade para criar animações envolventes e interativas em todas as plataformas.

Pacotes combinados

Inclua múltiplas animações e assets num único ficheiro dotLottie, simplificando a gestão e implementação.

Desempenho incomparável

As novas runtimes dotLottie são impulsionadas pelo motor gráfico de alta performance ThorVG. Com suporte para o formato dotLottie, que é 80% menor do que um JSON normal.

Índice de desempenho

Nossos tempos de execução superam significativamente o atual reprodutor da web, como demonstrado em nosso detalhado índice de desempenho.

biblioteca de JS

Crie e controle animações dotLottie com facilidade com a nossa poderosa biblioteca JavaScript.

No nosso caso, isso levou a uma poupança de aproximadamente 8 segundos, representando uma melhoria de cerca de 80%. Da mesma forma, em termos de memória, poupámos aproximadamente 164MB, o que equivale a ~70%.

Aprenda como a Canva o fez