专栏首页前端皮小蛋分享一个动画制作网站

分享一个动画制作网站

cat

今天看到一个不错的动画网站:

https://lottiefiles.com/

可以自己编辑生成动画,并且能十分方便的引入到你的项目中。

比如上图的猫咪动画:

import Lottie from "react-lottie";
import * as catData from "./cat.json";

const defaultOptions = {
  loop: true,
  autoplay: true,
  animationData: catData.default,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice"
  }
};

//...
<Lottie options={defaultOptions} height={120} width={120} />

借用这个能力, 我们可以让 loading 效果更有趣味:

加载完毕的动画

<FadeIn>
  <div class="d-flex justify-content-center align-items-center">
    <h1>fetching pizza</h1>
    <Lottie options={defaultOptions} height={120} width={120} />                      
  </div>
</FadeIn>

带有动画的列表

网站中还有大量的素材可以免费使用:

素材样例

另外, 编辑之后的json文件,也可以托管起来,直接在代码中引入, 十分方便:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json" mode="bounce" background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

还有游戏模式供你把玩, 十分有意思:

感兴趣的可以去看一下 :)

本文分享自微信公众号 - 前端皮小蛋(gh_e69260c16440),作者:南山皮小蛋

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 常用的做网站软件、网站制作软件分享

    网站制作中用到的软件很多,针对前端开发人员的有Dreamweaver,图片软件有Firework和photoshop,正对后端的开发软件更多,不同的开发语言用到...

    用户4831957
  • 分享一个爬取网站的小技巧

    你也许听说过,抓取手机 App 端数据就需要搭建手机抓包环境。那么我们就要屁颠屁颠去抓包搭建?哈哈,显然不用。我给大家分享一个小技巧,可以节省搭建环境的时间。

    sergiojune
  • 分享一个爬取网站的小技巧

    有时候,我们很想爬取一个网站的数据。如果 PC 端的网页的反爬机制太强,我们可以换个思路。现在很多网站为了满足手机浏览器能正常访问的需求,都会推出手机版的网页。...

    猴哥yuri
  • 分享一个扁平化UI风格网站

    「网址」:https://www.runoob.com/manual/Flat-UI/

    Qt君
  • 网站制作费用明细,建一个网站需要多少钱

    很多公司都想做企业网站,为了更好地宣传自己的产品和服务,同时也可以让用户更方便地了解自己的企业,但在建立一个网站时,我们会考虑成本方面的问题。网站制作需要多少钱...

    用户4831957
  • 网站制作教程:新手如何用PageAdmin建立一个网站

    PageAdmin是国内很知名的建站系统,国内超过30%的网站都是由PageAdmin搭建而成,现在很多公司或单位都没有自己的独立网站,利于pageadmin建...

    用户4831957
  • 分享个装机神器 Ventoy 多合一启动盘制作工具

    Ventoy 是一款国人开发的免费开源 多镜像(ISO/WIM/IMG/VHD(x)/EFI)启动引导程序,这款工具最大的优点就是无需格式化优盘,用户只需要将所...

    zeruns
  • R分享|CRAN中竟然有这么一个网站

    每次遇到这种情况的时候,只要和我专业不大相关的,我真的回答不来,隔行如隔山!所以我就只能回答:

    庄闪闪
  • pageadmin CMS网站制作教程:实例:如何制作一个报名表?

    pageadmin CMS网站建设教程:实例:如何制作一个报名表? 有时我们根据需求需要制作一些自定义表,该如何去制作呢?

    Almost Lover
  • 科研分享|一个论文关系网络可视化网站

    四月开始啦!每个月开头都会逛一逛“统计之都[1]“,因为每月的统计月读[2]更新啦!三月的统计月读有一个内容真的让人心动,而且非常实用!推荐人是:孔令仁,网址链...

    庄闪闪
  • 分享一个免费SSL证书申请网站,给网站开启https协议

    这些天,由于公司的业务需求,接触到了 ssl 证书和 https 协议。博客前几篇文章也分享了在 WEB 服务器上安装 SSL 证书,为网站开启 https 协...

    张戈
  • 分享一个免费托管静态资源的网站

    前几天有个同事分享了一个免费的静态资源托管网站http://surge.sh,非常的好用,好东西怎么能独自使用呢,今天就分享给大家,在使用之前先要全局安装一个n...

    挥刀北上
  • 30个最优CSS动画案例分享,轻松让网页用户随心而“动”

    CSS或CSS3动画,包括常见的鼠标悬停动画,网页加载动画,页面切换动画,文本动画以及背景动画等等,能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/C...

    奔跑的小鹿
  • 个人常用设计类网站汇总分享

    由于自己偶尔会写一些微信公众号的文章,同时在学习ps的过程中也遇到一些不错的网站。这里总结下来,希望对大家有帮助。推荐的只是网站,有大量优秀的客户端设计工具,后...

    A梦多啦A
  • 分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

    今天我要给大家分享一个用WebGL开发的网站,感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。

    Jerry Wang
  • 分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 渗透实战 | 拿下一个智能交易网站经验分享

    然后,顺手就是启动sqlmap --tamper space2comment.py

    HACK学习
  • 那些有趣的网站系列(四)

    之前分享过 那些有趣的网站 ,那些有趣的网站(二),那些有趣的网站系列(三),这是系列第4篇,更多有意思的网站在文章开头的专辑里。

    苏生不惑
  • 「Web Animation API 专题」用原生JS制作一个图片随机移动的动画

    当我们谈及网页动画时,自然联想到的是 CSS3 动画、JS 动画、SVG 动画 等技术以及 jQuery.animate() 等动画封装库,根据实际动画内容设计...

    前端达人

扫码关注云+社区

领取腾讯云代金券