強大的JavaScript動畫圖形庫mo.js

時間 2020-03-17

標籤強大 javascript 動畫圖形 mo.js 欄目 JavaScript 简体版

原文原文鏈接

最近在學習前端動畫方面知識時發現了挺有趣的一個動畫的圖形庫mo.js，頁面效果然是酷炫，有興趣的同窗能夠研究下：）。javascript

酷炫的效果：

如下是官方的demo效果，更多詳情請查看 mo.js
http://codepen.io/sol0mka/full/ogOYJj/
http://codepen.io/sol0mka/full/yNOage/
http://codepen.io/sol0mka/full/OyzBXRcss

一個簡單例子

如今咱們使用mo.js來實現一個簡單的效果html

HTML結構

<div class="demo">一個簡單例子</div>

CSS

body{
       text-align: center;
            padding: 300px;
    }
    .demo{
      width: 100px;
      height: 100px;
          position:relative;
          margin: 0 auto;
          background: #ddd;
    }

JavaScript

// 首先引入mo.js文件
    <script src="js/mo.min.js"></script>

// 效果實現相關代碼
    <script>
    var molinkEl = document.querySelector('.demo'),
            moTimeline = new mojs.Timeline(),
            moburst1 = new mojs.Burst({
                parent: molinkEl,
                duration: 1300,
                shape : 'circle',
                fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
                x: '0%',
                y: '-50%',
                radius: {0:60},
                count: 6,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            }),
            moburst2 = new mojs.Burst({
                parent: molinkEl,
                duration: 1600,
                delay: 100,
                shape : 'circle',
                fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
                x: '-400%',
                y: '-420%',
                radius: {0:120},
                count: 14,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            }),
            moburst3 = new mojs.Burst({
                parent: molinkEl,
                duration: 1500,
                delay: 200,
                shape : 'circle',
                fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
                x: '130%',
                y: '-70%',
                radius: {0:90},
                count: 8,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            }),
            moburst4 = new mojs.Burst({
                parent: molinkEl,
                duration: 2000,
                delay: 300,
                shape : 'circle',
                fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
                x: '-20%',
                y: '-150%',
                radius: {0:60},
                count: 14,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            }),
            moburst5 = new mojs.Burst({
                parent: molinkEl,
                duration: 1400,
                delay: 400,
                shape : 'circle',
                fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
                x: '30%',
                y: '-100%',
                radius: {0:60},
                count: 12,
                isRunLess: true,
                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
            });

        moTimeline.add(moburst1, moburst2, moburst3, moburst4, moburst5);
        molinkEl.addEventListener('mouseenter', function() {
            moTimeline.start();
        });
    </script>