1. David Wu首页
  2. web前端
  3. HTML

图标动画技术mo.js

与mo.js,由奥列格Solomka一个强大的运动图形库进行的各种图标的动画。灵感来自于Dribbble射“喜欢动漫”的达里尔吉恩。 也许你已经偶然发现mo.js,对所取得的网络非常强大的运动图形库奥列格Solomka。你可以做吨真棒的东西与它今天我们想分享使用的一些图标动画我们拿图书馆。 这将是非常伟大的, WP网站建设

与mo.js,由奥列格Solomka一个强大的运动图形库进行的各种图标的动画。灵感来自于Dribbble射“喜欢动漫”的达里尔吉恩。

Animocons_Featured

也许你已经偶然发现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>

 

请注意,我们使用的是一个固定的大小为这里的影响。对于更灵活的方法,你可以动态地定义大小。

好了,现在就来试试自己的动画; 可能性是无止境的!

我们希望你能喜欢这些动画并找到它们鼓舞人心!

演示地址

下载源代码

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/7165

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注