简单易用的开源 JavaScript 动画图标库 -- Titanic
如果你用过 Font Awesome 等图标，你可能会觉得它们很好看，用起来很很方便。但是，在用户点击这些图标的时候，它们是不会有反应的。如果有这些图标会动的话，那就更加好。 Titanic 提供一系列的动画图标，以及以 JavaScript 的调用图标动画的方法。
如果你想要看 Hello, World 的版本的话，你可以到我的 Codepen 里面，测试一下。
安装方法
你可以使用 CDN 或者 npm 来安装 Titanic。
CDN
直接在 HTML head 里面加进下面的字符。
<script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>然后在 body 的部分初始化 Titanic。
<script>
var titanic = new Titanic();
</script>你可以透过这种标签来加上 Titanic 图标。
<div class='titanic titanic_chat'></div>
你可以透过 这里查找 Titanic 所支持的图标，把 chat 换成以下的字词：
* caps * chat * checkbox * expand * cheap * expensive * idea * mailbox * mic * no-mic * online * pause * power * shopping * smile * stop * unlock * zoom
npm
npm install titanic-icons --save链接： titanic-icons - npmjs
使用你自己的备份
如果你喜欢在自己的伺服器，而不是 rawgit 去使用 Titanic 的话，你只需要把 base URL 传进 init() 里面。
titanic.begin('/my/base/directory/');
然后，当你有一个div，id="chat" 的时候，Titanic 会自动检测所有在 /my/base/directory/chat.json 里面的图标。
API
* `titanic.isInitialized()` -- 返回 true / false
* `titanic.items` -- 返回包含所有 titanic 图标的一个 Array
* `titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()` -- 调整动画 by index
* `titanic.on(token), titanic.off(token), titanic.play(token)` -- 调整动画 by token (name)
例子
<head>
<!--Inserting the scripts once for the whole page-->
<script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
<!--Inserting an icon-->
<div class='titanic titanic-checkbox'></div>
<!--Initializing-->
<script>
var titanic = new Titanic({
hover: true, // auto animated on hover (default true)
click: true // auto animated on click/tap (default false)
});
</script>
<!--Clicking turns this icon on-->
<button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>感想
我觉得这个很炫酷，我应该可以用在现有的前端开发项目，比如说博客，还有在做的一个在线学习编程平台上。如果你希望看到我如何应用 Titanic 的话，你可以打个星，关注一下我的博客。
原文链接
我的博客文章： 簡單易用的開源 JavaScript 動畫圖標庫 -- Titanic
Titanic 代码: icons8/titanic
文章被以下专栏收录
