与mo.js，由奥列格Solomka一个强大的运动图形库进行的各种图标的动画。灵感来自于Dribbble射“喜欢动漫”的达里尔吉恩。
也许你已经偶然发现mo.js，对所取得的网络非常强大的运动图形库奥列格Solomka。你可以做吨真棒的东西与它今天我们想分享使用的一些图标动画我们拿图书馆。
这将是非常伟大的，是能够很容易地制作动画图标看起来像Twitter的心脏动画，看到这个后，Dribbble射门被混合的达里尔·吉恩（这是“什么Twitter的喜欢动漫会是什么样子，如果它是在Facebook上”），我们想尝试与戴维·甘迪的mo.js一起使用字体真棒 Web字体，看看有什么可以做的。
我们正在动画图标是它很有意义的活动状态，例如像“收藏夹”，“喜欢”或“给予好评”的行动。虽然，从理论上说，你可以申请这类效果的话，这真的感觉这些样的行动，更明智。
奥列格的图书馆是很容易使用。只需一个教程可到现在为止，你可以得到如何发挥上的元素精确的计时功能控制的洞察力。这开辟了许多可能性，并允许各具特色复杂，逼真的动画效果。退房的GitHub库，看到更多信息，以及如何作出贡献。
让我们来看一个例子。因此，我们使用的字体真棒的图标字体，并将其包含在这样的按钮：
<pre class="brush:html hljs xml"><code><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icobutton icobutton–thumbs-up"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa fa-thumbs-up"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"></<span class="hljs-title">button</span>></span></code></pre>
该款式包括按钮只是一些复位和大小的定义。
现在，您可以定义动画如下：
<pre class="brush:html hljs php"><code><span class="hljs-keyword">var</span> scaleCurve = mojs.easing.path(<span class="hljs-string">'M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0'</span>);
<span class="hljs-keyword">var</span> el = document.querySelector(<span class="hljs-string">'.icobutton'</span>),
elSpan = el.querySelector(<span class="hljs-string">'span'</span>),
<span class="hljs-comment">// mo.js timeline obj</span>
timeline = <span class="hljs-keyword">new</span> mojs.Timeline(),
<span class="hljs-comment">// tweens for the animation:</span>
<span class="hljs-comment">// burst animation</span>
tween1 = <span class="hljs-keyword">new</span> mojs.Burst({
<span class="hljs-keyword">parent</span>: el,
duration: <span class="hljs-number">1500</span>,
shape : <span class="hljs-string">'circle'</span>,
fill : [ <span class="hljs-string">'#988ADE'</span>, <span class="hljs-string">'#DE8AA0'</span>, <span class="hljs-string">'#8AAEDE'</span>, <span class="hljs-string">'#8ADEAD'</span>, <span class="hljs-string">'#DEC58A'</span>, <span class="hljs-string">'#8AD1DE'</span> ],
x: <span class="hljs-string">'50%'</span>,
y: <span class="hljs-string">'50%'</span>,
opacity: <span class="hljs-number">0.6</span>,
childOptions: { radius: {<span class="hljs-number">20</span>:<span class="hljs-number">0</span>} },
radius: {<span class="hljs-number">40</span>:<span class="hljs-number">120</span>},
count: <span class="hljs-number">6</span>,
isSwirl: <span class="hljs-keyword">true</span>,
isRunLess: <span class="hljs-keyword">true</span>,
easing: mojs.easing.bezier(<span class="hljs-number">0.1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0.3</span>, <span class="hljs-number">1</span>)
}),
<span class="hljs-comment">// ring animation</span>
tween2 = <span class="hljs-keyword">new</span> mojs.Transit({
<span class="hljs-keyword">parent</span>: el,
duration: <span class="hljs-number">750</span>,
type: <span class="hljs-string">'circle'</span>,
radius: {<span class="hljs-number">0</span>: <span class="hljs-number">50</span>},
fill: <span class="hljs-string">'transparent'</span>,
stroke: <span class="hljs-string">'#988ADE'</span>,
strokeWidth: {<span class="hljs-number">15</span>:<span class="hljs-number">0</span>},
opacity: <span class="hljs-number">0.6</span>,
x: <span class="hljs-string">'50%'</span>,
y: <span class="hljs-string">'50%'</span>,
isRunLess: <span class="hljs-keyword">true</span>,
easing: mojs.easing.bezier(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0.5</span>, <span class="hljs-number">1</span>)
}),
<span class="hljs-comment">// icon scale animation</span>
tween3 = <span class="hljs-keyword">new</span> mojs.Tween({
duration : <span class="hljs-number">900</span>,
onUpdate: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(progress)</span> </span>{
<span class="hljs-keyword">var</span> scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = <span class="hljs-string">'scale3d('</span> + scaleProgress + <span class="hljs-string">','</span> + scaleProgress + <span class="hljs-string">',1)'</span>;
}
});
<span class="hljs-comment">// add tweens to timeline:</span>
timeline.add(tween1, tween2, tween3);
<span class="hljs-comment">// when clicking the button start the timeline/animation:</span>
el.addEventListener(<span class="hljs-string">'mouseenter'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
timeline.start();
});</code></pre>
请注意，我们使用的是一个固定的大小为这里的影响。对于更灵活的方法，你可以动态地定义大小。
好了，现在就来试试自己的动画; 可能性是无止境的！
我们希望你能喜欢这些动画并找到它们鼓舞人心！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259246.html