首页 > 其他分享 >react项目中使用lottie动画

react项目中使用lottie动画

时间:2024-05-10 11:36:55浏览次数:23  
标签:动画 myLottie react export props import lottie

一,引入lottie库

点击查看代码
npm i --save react-lottie @types/react-lottie

二,下载lottie的json文件
iconfont.cn中可以在库中下载lottie文件(注意版权问题)

三,在项目中使用lottie

点击查看代码
import * as React from "react";

import Lottie from "react-lottie";
import * as myLottie from "../../assets/lottie.json";

export interface HelloProps {
  compiler: string;
  framework: string;
}

// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component<HelloProps, {}> {
  render() {
    const options = {
      loop: true,
      autoplay: true,
      animationData: myLottie,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice",
      },
    };
    return (
      <div>
        <h1>
          Hello from {this.props.compiler} and {this.props.framework}!
        </h1>
        <Lottie options={options} height={100} width={100} />
      </div>
    );
  }
}

标签:动画,myLottie,react,export,props,import,lottie
From: https://www.cnblogs.com/xyblives/p/18183958

相关文章

  • react中使用craco,针对路径转换,修改webpack别名路径配置
    1.0首先下载craco依赖包npminstall@craco/craco-D2.0在项目根目录下面新建craco.config.js文件,里面内容配置为constpath=require('path')module.exports={webpack:{alias:{'@':path.resolve(__dirname,'src')}......
  • React — 访问 Redux Store 的正确方法是什么?
    在组件中访问Store的最佳方法是使用connect()函数,该函数创建一个包裹现有组件的新组件。此模式称为高阶组件,通常是在React中扩展组件功能的首选方式。这允许您将状态和Action创建者映射到组件,并在Store更新时自动传递它们。使用connect的<FilterLink>组件:import{......
  • EPAI手绘建模APP动画、场景、手势操作
    (15) 动画 图 299 动画控制器① 打开动画控制器。播放动画过程中,切换场景观察视角时,自动停止播放。动画编辑参见常用工具栏-更多-动画动画编辑器部分。② 关闭动画控制器。③ 设置动画参数:设置动画总帧数;这只帧率,帧率越大,播放速度越快;设置是否循环播放,如果设置了,动画......
  • react + antd + js 简单Cron组件,支持国际化
    Cron.jsimportReact,{Fragment,useState,useCallback,useRef,useEffect}from'react';import{Select,TimePicker,Input}from'antd';constOption=Select.Option;constmwidth80={minWidth:80,marginRight:10};constwidt......
  • React文本溢出组件封装以及高亮提示
    React文本溢出组件封装以及高亮提示Abbr组件:使用场景:当我们需要设置支持最大行数时进行省略展示当我们需要设置支持设置超过多少字符进行省略展示当我们需要设置支持关键字高亮展示(有点问题,当关键字被裁剪成...之后,就无法高亮)当我们需要支持忽略大小写高亮当我们需要支持......
  • react 性能优化
    一纯组件1使用shouldComponentUpdate对先前的状态和props数据与下一个props或状态相同,如果两次的结果一直,那么就returnfalse使用纯净组件,pureComponentPureComponents负责shouldComponentUpdate——它对状态和props数据进行浅层比较(shallowcomparison),如果先前......
  • react里面bind与箭头函数
    bind由于在类中,采用的是严格模式,所以事件回调的时候,会丢失this指向,指向undefined,需要使用bind来给函数绑定上当前实例的this指向;箭头函数的this指向上下文,所以永久能拿到当前组件实例,this指向,我们可以完美的使用箭头函数来替代传统事件处理函数的回调箭头函数class......
  • Blender动画与云渲染:创造高质量作品的未来路径
    Blender作为开源的3D图形软件,在多个领域广受欢迎。但随着项目复杂度提升,传统渲染方式受限。云渲染技术的兴起突破了这些限制,为创作者提供了更自由、高效的创作环境。 一、Blender动画项目的挑战传统上,Blender动画渲染需要依赖昂贵的硬件设施和大量计算资源,尤其是在处理复杂场......
  • react理论总结1
     1)对react的理解(特点)1,Jsxjs+xml,是对js语法的扩张,需要通过babel.js的编译转化成浏览器可以解析的普通js对象2,虚拟dom。相当于在js和真实dom之间的缓存,state改变调用render函数会重新生成新的虚拟dom树,通过diff算法计算出新旧dom差异 只能差异部分更新到真实的dom,减少......
  • react ts 项目如何配置路径别名?
    tsconfig.json{"compilerOptions":{"baseUrl":".",//路径配置"paths":{"@/*":["src/*"]},"target":"ES2020","lib":[......