基于mo.js制作的17种炫酷图标动画特效-H5 チュートリアル-php.cn

基于mo.js制作的17种炫酷图标动画特效

PHP中文网

リリース： 2016-05-17 09:07:00

オリジナル

3066 人が閲覧しました

　　基于mo.js制作的17种炫酷图标动画特效

简要教程

　　这是一款基于mo.js制作的一组炫酷图标动画特效。这组图标动画共有17种效果，它们使用font-awesome作为图标，采用SVG技术，在用户点击图标时产生各种炫酷的图标动画特效。

　　mo.js是Oleg Solomka开发的一款图形动画javascript库。通过它你可以制作出非常有趣的图形动画效果。

　　使用方法

　　HTML结构

　　图标的HTML结构使用一个按钮来包裹一个Font Awesome图标。

<button class="icobutton icobutton--thumbs-up">
  <span class="fa fa-thumbs-up"></span>
</button>

ログイン後にコピー

　　制作图标动画

　　然后你就可以通过mo.js提供的方法来制作动画特效。

var el = document.querySelector(&#39;.icobutton&#39;),
  elSpan = el.querySelector(&#39;span&#39;),
  // mo.js timeline obj
  timeline = new mojs.Timeline(),
 
  // tweens for the animation:
 
  // burst animation
  tween1 = new mojs.Burst({
    parent: el,
    duration: 1500,
    shape : &#39;circle&#39;,
    fill : [ &#39;#988ADE&#39;, &#39;#DE8AA0&#39;, &#39;#8AAEDE&#39;, &#39;#8ADEAD&#39;, &#39;#DEC58A&#39;, &#39;#8AD1DE&#39; ],
    x: &#39;50%&#39;,
    y: &#39;50%&#39;,
    opacity: 0.6,
    childOptions: { radius: {20:0} },
    radius: {40:120},
    count: 6,
    isSwirl: true,
    isRunLess: true,
    easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
  }),
  // ring animation
  tween2 = new mojs.Transit({
    parent: el,
    duration: 750,
    type: &#39;circle&#39;,
    radius: {0: 50},
    fill: &#39;transparent&#39;,
    stroke: &#39;#988ADE&#39;,
    strokeWidth: {15:0},
    opacity: 0.6,
    x: &#39;50%&#39;,     
    y: &#39;50%&#39;,
    isRunLess: true,
    easing: mojs.easing.bezier(0, 1, 0.5, 1)
  }),
  // icon scale animation
  tween3 = new mojs.Tween({
    duration : 900,
    onUpdate: function(progress) {
      var scaleProgress = scaleCurve4(progress);
      elSpan.style.WebkitTransform = elSpan.style.transform 
            = &#39;scale3d(&#39; + scaleProgress + &#39;,&#39; + scaleProgress + &#39;,1)&#39;;
    }
  });
 
// add tweens to timeline:
timeline.add(tween1, tween2, tween3);
 
// when clicking the button start the timeline/animation:
el.addEventListener(&#39;mouseenter&#39;, function() {
  timeline.start();
});

ログイン後にコピー

　　关于mo.js的详细使用方法，你可以参考它的官方网站：mo.js。

以上就是基于mo.js制作的17种炫酷图标动画特效的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！