欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

在线工具

犸良在线动画制作工具 阿里官方出品

在线工具 我的站长站 2020-07-10 共1403人阅读

犸良是神马

犸良来了!动效因此更简单!它积累了目前通用的动效素材,让不会动效的童鞋们也能基于动效库和素材库快速生成一个通用动效创意,你只需要简单编辑下图片、颜色或者文字即可;同时平台集成了以lottie为代表的动效技术,让曾经令人苦恼的包大小和性能问题一并解决。

犸良在线动画制作工具 阿里官方出品

犸良作用

犸良支持全平台iOS,Android,H5,小程序。无论是营销展位、活动页面、空状态还是产品icon。犸良编辑器对接投放平台,一站式完成动效创意制作和投放。

使用方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>lottie 极简Demo</title>
    <!-- 第一步: 引入CDN -->
    <script src="https://gw.alipayobjects.com/os/lib/lottie-web/5.5.6/build/player/lottie.min.js"></script>
  </head>
  <body>
    <!-- 第二步: 创建容器 -->
    <div id="container"></div>
    <div id="status">循环播放3次后停止</div>
    <div id="loop"></div>
  </body>
  <script>
    // 第三步: 实例化
    var anim = lottie.loadAnimation({
      container: document.getElementById("container"), // 容器
      renderer: "svg",
      loop: true,
      autoplay: true,
      // animationData: {}, //如果使用的是JSON
      path:
        "https://gw.alipayobjects.com/os/sage/10726a69-0e6a-484f-a784-d57a812af9a6/lottie.json" // the path to the animation json
    });
    var loopCount = 0;
    anim.onLoopComplete = function() {
      loopCount += 1;
      document.getElementById("loop").textContent = `播放了${loopCount}次`;
      if (loopCount >= 3) {
        anim.stop();
      }
    };
  </script>
</html>

体验感受

综合体验了一下犸良,相对于鹿班人工智能随意撸图。犸良其实是一款基于人工的动效模板网站。所有的动态效果都是设计师提前做好的。基于 Lottie 的特性,将可编辑的属性进行模块化。

相关链接

模板中心:https://lottiefiles.com/popular

操作指南:https://www.yuque.com/emotion/help/news

本站仅为大家推荐优秀网站 在线工具,但不保证推荐网站的安全性,合法性,准确性.同时,本站也不对任何内容承担任何责任.
标签 CSS3动画
相关推荐
  • CSS3动画
  • React.js新拟态CSS3动画生成网站源码
    React.js新拟态CSS3动画生成网站源码

    源码介绍一款国外搬运的CSS3动画生成网站源码,基于React.js框架开发,中文叫新拟态,英文原名叫Neumorphism/Soft UI。是一款助于设计人员和开发人员对其进行试验并可能对其进行调整的源码。源码截图...

    html模板 49 1年前
  • @keyframes实现CSS动画帧效果

    本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。新建一个DIV容器,放这里一帧图片<div></div>DIV的盒子属性div { position: absolute; width: 200px; ...

    css教程 68 2年前
  • 五彩loading动画效果html页面模板
    五彩loading动画效果html页面模板

    一款五彩的loading动画效果html页面模板,loading文字从右到左一顺弧形滚动,非常漂亮。<meta http-equiv="refresh" content="3;url=http://www.wdzzz.com">content为跳转延迟时间,url为跳转后的地址...

    html模板 153 3年前
  • 自适应动画轮播音乐培训织梦CMS网站模板
    自适应动画轮播音乐培训织梦CMS网站模板

    织梦CMS网站模板简介模板包含首页,音乐,课程,优势,视频,照片。在线报名,新闻资讯等页面,模板代码排序工整,兼容各大主流浏览器,利于后期网站SEO优化织梦CMS音乐培训模板截图...

    织梦cms模板 332 4年前
  • 超级酷炫的HTML动画效果引导页模板
    超级酷炫的HTML动画效果引导页模板

    超级酷炫的HTML动画效果引导页模板,各种3D视觉差动态效果非常666,而且带背景音乐播放器。还有酷炫的跳转翻页效果,用在个人网站上就是大神级人物。...

    html模板 551 3年前