犸良在线动画制作工具 阿里官方出品
在线工具
我的站长站
2020-07-10
共人阅读
犸良是神马
犸良来了！动效因此更简单！它积累了目前通用的动效素材，让不会动效的童鞋们也能基于动效库和素材库快速生成一个通用动效创意，你只需要简单编辑下图片、颜色或者文字即可；同时平台集成了以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 的特性，将可编辑的属性进行模块化。