前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >说lottie谁是lottie?

说lottie谁是lottie?

作者头像
linwu
发布2023-08-10 14:27:09
3150
发布2023-08-10 14:27:09
举报
文章被收录于专栏:编程时光编程时光
现代JavaScript高级小册

深入浅出Dart

现代TypeScript高级小册

theme: v-green

背景

在项目中,loading 常用的动画方案是 Gif 动画。

Gif 动画存在一些问题,例如:文件较大、无法缩放匹配不同屏幕大小和密度、易出现锯齿、无法控制动画等。

其他常用的动画方案有:

  • Png 序列帧:文件大,可能会在不同屏幕分辨率下失真
  • SVG 动画:实现成本高,易出现动画还原度低的情况

目前,项目需要经过调研,Lottie 动画是一种具有高可行性的方案。

image.png
image.png

Lottie 简介

Lottie 是 airbnb 开源的动画库,支持多个平台如 Android、iOS、Web、React Native 和 Windows。其提供从 AE 到各终端的完整工具流程。设计师可以通过 AE 的 Bodymovin 插件将动画导出为 json 文件,然后通过 Lottie 实现动画效果确保动画的还原度

lottie实现的动画效果:

jcode

lottie-web

lottie-web 支持多种特性,提供复杂的动画控制和监听功能。

使用示例如下:

代码语言:javascript
复制
lottie.loadAnimation({
  container: animationWindow,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://linwu-hi.github.io/lottie/animation_ll2ddfyg.json'
});

jcode

控制动画播放的方法:

名称

描述

animation.play

播放该动画,从目前停止的帧开始播放

stop

停止播放该动画,回到第 0 帧

pause

暂停该动画,在当前帧停止并保持

goToAndStop

animation.goToAndStop(value, isFrame);跳到某个时刻/帧并停止。isFrame(默认 false)指示 value 表示帧还是时间(毫秒)

goToAndPlay

animation.goToAndPlay(value, isFrame);跳到某个时刻/帧并进行播放

goToAndStop

animation.goToAndStop(30, true);跳转到第 30 帧并停止

playSegments

animation.playSegments(arr, forceFlag);arr 可以包含两个数字或者两个数字组成的数组,forceFlag 表示是否立即强制播放该片段 animation.playSegments([10,20], false);播放完之前的片段,播放 10-20 帧 animation.playSegments([[0,5],[10,18]], true);直接播放 0-5 帧和 10-18 帧

setSpeed

animation.setSpeed(speed);设置播放速度,speed 为 1 表示正常速度

setDirection

animation.setDirection(direction);设置播放方向,1 表示正向播放,-1 表示反向播放

destroy

animation.destroy();删除该动画,移除相应的元素标签等。在 unmount 的时候,需要调用该方法

监听事件:

名称

描述

data_ready

加载完 json 动画

complete

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

loopComplete

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

enterFrame

每进入一帧就会触发,播放时每一帧都会触发一次,stop 方法也会触发

segmentStart

每进入一帧就会触发,播放时每一帧都会触发一次,stop 方法也会触发

DOMLoaded

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

destroy

将在动画删除时触发

Lottie 动画性能

image.png
image.png

对比 Lottie 和 Gif 动画,数据显示 Lottie 动画文件更小,帧率更高,而且其性能表现更好。

  • GIF动图
animation_ll2ewnwn_small.gif
animation_ll2ewnwn_small.gif
  • Lottie动画

jcode

react-lottie

react-lottie 将 lottie-web 封装成 React 组件,使其更加易于在 React 中使用。

代码语言:javascript
复制
import React from 'react'
import Lottie from 'react-lottie';
import * as animationData from './pinjump.json'
 
export default class LottieControl extends React.Component {
 
  constructor(props) {
    super(props);
    this.state = {isStopped: false, isPaused: false};
  }
 
  render() {
    const buttonStyle = {
      display: 'block',
      margin: '10px auto'
    };
 
    const defaultOptions = {
      loop: true,
      autoplay: true, 
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };
 
    return <div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
              isStopped={this.state.isStopped}
              isPaused={this.state.isPaused}/>
      <button style={buttonStyle} onClick={() => this.setState({isStopped: true})}>stop</button>
      <button style={buttonStyle} onClick={() => this.setState({isStopped: false})}>play</button>
      <button style={buttonStyle} onClick={() => this.setState({isPaused: !this.state.isPaused})}>pause</button>
    </div>
  }
}

vue-lottie

vue-lottie 将 lottie-web 封装成 vue 组件,使其更加易于在 vue 中使用。

也有vue3-lottie

代码语言:javascript
复制
<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        <div>
            <p>Speed: x{{animationSpeed}}</p>
            <input type="range" value="1" min="0" max="3" step="0.5"
                   v-on:change="onSpeedChange" v-model="animationSpeed">
        </div>
        <button v-on:click="stop">stop</button>
        <button v-on:click="pause">pause</button>
        <button v-on:click="play">play</button>
    </div>
</template>
 
<script>
  import Lottie from './lottie.vue';
  import * as animationData from './assets/pinjump.json';
 
  export default {
    name: 'app',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 1
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },
 
      stop: function () {
        this.anim.stop();
      },
 
      play: function () {
        this.anim.play();
      },
 
      pause: function () {
        this.anim.pause();
      },
 
      onSpeedChange: function () {
        this.anim.setSpeed(this.animationSpeed);
      }
    }
  }
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-08-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • theme: v-green
  • 背景
  • Lottie 简介
  • lottie-web
  • Lottie 动画性能
  • react-lottie
  • vue-lottie
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档