图标动画效果-Icon Animations Powered by mo.js

Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the library.
It would be really great to be able to animate icons easily to look like Twitter’s heart animation, and after seeing this Dribbble shot by Daryl Ginn of a hybrid (this is “what Twitter’s like animation would look like if it were on Facebook”), we wanted to try to use mo.js together with Dave Gandy’s Font Awesome Web font and see what can be done.
The icons that we are animating are actions where it makes sense to have an active state, like for example the “favorite”, “like” or “upvote”. Although, theoretically, you could apply these kind of effects to anything, it really feels more sensible for these kind of actions.
Oleg’s library is really easy to use. With just one tutorial available until now, you can get an insight on how to exert precise timing function control on elements. This opens up many possibilities and allows for crafting complex, realistic-looking animations. Check out the GitHub repo and see more info and how you can contribute.
也许你已经发现了mo.js，为Oleg Solomka做的网站的一个非常强大的运动图形库。你可以用它做很多可怕的事情，今天我们想分享我们的一些图标动画使用图书馆。
这将是动画图标很容易像推特心动画真的很棒，在看这一个镜头的混合Daryl Ginn（这是什么推特就像动画的样子如果是在脸谱网”），我们想尝试用mo.js连同Dave Gandy的字体真棒Web字体，看看有什么能做的。
我们的动画图标的行动才有意义有一个活跃的状态，如“最喜欢的”，“喜欢”或“支持”。从理论上讲，你可以把这种效果应用到任何事情上，但这种行为确实更明智。
奥列格的图书馆真的很容易使用。只有一个教程，直到现在，你可以了解如何发挥精确定时功能控制的元素。这开辟了许多可能性，并允许制作复杂的，逼真的动画。查看GitHub的回购和看到更多的信息，你如何作出贡献。

查看演示 下载资源