阿里制造:“犸良”一站式动效制作平台

  • 文章介绍
  • 评价建议
  • 温馨提示:
    本站为源代码分享站,源码多为网友投稿 我们没有对源码进行测试,不保证可用性、安全性以及版权归属。 因源码具有可复制性,一经购买 ,不得以任何形式退款。
    如需商业用途 请点击商业源码栏目,购买商业源码.
    客服QQ:977439673

    犸良是什么?

    犸良” 是一款基于 Lottie 的动效设计平台。能够快速生成设计师想要的动态效果,并交付给开发,极大地提高了设计效率和设计还原度。作为一站式动效制作平台,通过海量的动效素材以及可视化编辑能力,帮助零基础的用户轻松完成动效制作。

    阿里制造:“犸良”一站式动效制作平台
    阿里制造:“犸良”一站式动效制作平台

    上面说到了 Lottie ,那 Lottie 你了解嘛?

    什么是Lottie ?

    能够解析渲染通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成的 json 文件
    (1)、数据源多样性—可从assets,sdcard,网络加载动画资源,动态更新
    (2)、跨平台—设计稿导出一份动画描述文件,android,ios,react native通用

    Lottie动画Json结构 分为4层:
    1. 结构层:可以读取到动画画布的宽高,帧数,背景色,时间,起始关键帧,结束帧等
    2. asset:图片资源信息集合,这里放置的是 制作动画时引用的图片资源
    3. layers:图层集合,这里可以获取到多少图层,每个图层的开始帧 结束帧等
    4. shapes:元素集合,可以获取到每个图层都包含多个动画元素。通过这样的层级去读取文件信息 然后映射成JavaBean对象,然后通过关键类LottieDrawable将JavaBean分层渲染绘制到Canvas的画布上去

    ok,回归正题。

    犸良的应用场景

    阿里制造:“犸良”一站式动效制作平台
    阿里制造:“犸良”一站式动效制作平台

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

    “我”就是这么强大!!!

    相信大家一定急于知道,犸良 如何使用?其实也简单。

    犸良怎么用?

    我们来到犸良 首页,有很多个按钮“创建动画”,可以点击,我们只需要登录支付宝账号即可。

    基于模版直接制作

    1、选择模版

    阿里制造:“犸良”一站式动效制作平台
    阿里制造:“犸良”一站式动效制作平台

    2、从动画仓库选择动画进行当前动画的替换

    阿里制造:“犸良”一站式动效制作平台
    阿里制造:“犸良”一站式动效制作平台

    3、通过替换图片或修改颜色来自定义动画
    4、自定义模板文字内容
    5、选择模板背景图片
    6、完成编辑选择是否带背景(banner模版默认带背景)
    7、导出成功下载 json

    阿里制造:“犸良”一站式动效制作平台
    阿里制造:“犸良”一站式动效制作平台

    有了这个JSON文件,我们如果使用?下面主要讲讲web前端如何使用,给出简单示例。

    Lottie 使用

    我们在需要的页面引用lottie.js文件。

    <script src="js/lottie.js" type="text/javascript"></script>
    
    <script>  
    lottie.loadAnimation({
      container: element, // 动画的dom元素
      renderer: 'svg', // 设置渲染器(svg/canvas/html)
      loop: true, // 是否循环播放
      autoplay: true, // 是否自动播放
      path: 'data.json' // 动画json文件路径
    });
    </script>
    
    HTML

    lottie.loadAnimation还提供,播放、暂停、停止等事件。

    然后对Vue钟情的小伙伴,也可以来试试vue中如果使用lottie?

    如上代码事件可以控制动画。

    阿里制造:“犸良”一站式动效制作平台
    阿里制造:“犸良”一站式动效制作平台

    npm install --save vue-lottie
    
    Bash
    <template>
      <div id="app">
        <lottie 
          :options="defaultOptions" 
          :height="400" :width="400" 
          v-on:animCreated="handleAnimation"
        />
      </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>
    
    HTML

    如上代码事件可以控制动画。

    阿里制造:“犸良”一站式动效制作平台
    阿里制造:“犸良”一站式动效制作平台

    总结

    有了lottie,前端再复杂的动画只需要有设计师也是可以搞定的,而且不用费时费力的写CSS了。设计师小伙伴们可以去好好学习一下,相信这也是未来的方向,毕竟阿里在做,前途应该还可以的。

    相关链接:
    Lottie Docs
    犸良
    lottie-web
    vue-lottie

    Leave a Reply

  • 如本资源侵犯了您的权益,[email protected]!我们将在收到邮件的1个小时内处理完毕。

  • 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用!

  • OKMG(芒果源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售!

  • OKMG(芒果源码)客服QQ:29139260

  • OKMG(芒果源码)商务电话(仅对企业客户/个人用户请联系QQ客服):010-86463891

  • 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
  • 免责声明 芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:29139260

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: [email protected]),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系客服
    开通VIP 享更多特权,建议使用 QQ 登录
    /** * 项目名称:用户离开标题切换 */