使用Mo.js动画引擎实现的新年快乐动画

使用MoJS可以实现动画的播放控制功能，类似视频播放一样。

html5, mo

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2641
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const DURATION = 2000;
const COLORS = {
  RED: '#FF0000',
  CYAN: '#46bffe',
  BLUE: '#0000FF',
  GREEN: '#00FF00',
  WHITE: 'white',
  BROWN: '#ee7600',
  YELLOW: '#FFFF00',
  ORANGE: '#ffd700',
  MAGENTA: '#ff00a8'

}

// Adding custom shapes

class Two extends mojs.CustomShape {
  getShape() {
    return '<path  d="M4.69,15.84H1.76a0.47,0.47,0,0,1-.45-0.6l4.09-12A2.13,2.13,0,0,0,3.92.64h0A2.13,2.13,0,0,0,1.28,2.11" transform="translate(-1.23 -0.45)"></path>';
  }
}
mojs.addShape('two', Two);

class Zero extends mojs.CustomShape {
  getShape() {
    return '<path  d="M5.75,15.16L6.56,5.72a2.27,2.27,0,0,1,2.22-2h0a1.84,1.84,0,0,1,1.86,2l-1,11.57a2.27,2.27,0,0,1-2.22,2h0a1.84,1.84,0,0,1-1.86-2l0.06-.71" transform="translate(-1.23 -0.45)"></path>';
  }
}
mojs.addShape('zero', Zero);

class One extends mojs.CustomShape {
  getShape() {
    return '<path d="M12.18,15.84L13.49,0.73A0.22,0.22,0,0,0,13.1.57L10.65,2.85" transform="translate(-1.23 -0.45)"></path>';
  }
}
mojs.addShape('one', One);

class Seven extends mojs.CustomShape {
  getShape() {
    return '<path  d="M13.33,19.5L18.19,4.23a0.3,0.3,0,0,0-.29-0.39H14.48" transform="translate(-1.23 -0.45)"></path>';
  }
}
mojs.addShape('seven', Seven);

//
const burstOne = new mojs.Burst({
  radius: {
    4: 60
  },
  x: -100,
  angle: 45,
  count: 14,
  children: {
    degreeShift: 'rand(-360, 360)',
    shape: 'line',
    radius: 3,
    scale: 1,
    stroke: {
      'magenta': 'red'
    },
    strokeDasharray: '100%',
    strokeDashoffset: {
      '-100%': '100%'
    },
    delay: 1.7 * DURATION,
    duration: 1000,
    easing: 'quad.out',
  }

});

const burstTwo = new mojs.Burst({
  radius: {
    4: 60
  },
  x: 140,
  y: -100,
  angle: 45,
  count: 14,
  children: {
    shape: 'line',
    radius: 3,
    scale: 1,
    stroke: {
      'yellow': 'green'
    },
    strokeDasharray: '100%',
    strokeDashoffset: {
      '-100%': '100%'
    },
    delay: 1.9 * DURATION,
    duration: 1000,
    easing: 'quad.out',
  }

});

const burstThree = new mojs.Burst({
  radius: {
    4: 60
  },
  x: 150,
  y: 90,
  angle: 45,
  count: 28,
  children: {
    shape: 'line',
    radius: 4,
    scale: 2,
    isForce3d: true,
    stroke: {
      'colour': 'orange'
    },
    strokeDasharray: '100%',
    strokeDashoffset: {
      '-100%': '100%'
    },
    delay: 2 * DURATION,
    duration: 1000,
    easing: 'quad.out',
  }

});

const burstFour = new mojs.Burst({
  radius: {
    4: 50
  },
  x: 100,
  y: 60,
  count: 21,
  children: {
    shape: 'line',
    degreeShift: 'rand(-360, 360)',
    radius: 3,
    scale: 1,
    isForce3d: true,
    stroke: {
      '#8bf5ff': 'blue'
    },
    strokeDasharray: '100%',
    strokeDashoffset: {
      '-100%': '100%'
    },
    delay: 2.1 * DURATION,
    duration: 1000,
    easing: 'quad.out',
  }

});

const burstFive = new mojs.Burst({
  radius: {
    0: 70
  },
  x: -100,
  y: 50,
  angle: 45,
  count: 21,
  children: {
    shape: 'line',
    stroke: ['#FF00FF', '#00FF00', '#00FFFF'],
    duration: 400,
    radius: 60,
    strokeWidth: 3,
    isForce3d: true,
    delay: 2.2 * DURATION,
    duration: 1000,
    easing: 'quad.out',
  }

});

const burstSix = new mojs.Burst({
  radius: {
    4: 70
  },
  x: 90,
  y: -100,
  angle: 45,
  count: 21,
  children: {
    shape: 'circle',
    radius: 3,
    scale: {
      1.2: 0
    },
    fill: {
      'white': 'orange'
    },
    strokeDasharray: '100%',

delay: 2.4 * DURATION,
    duration: 1000,
    easing: 'quad.out',
  }

});

const burstSeven = new mojs.Burst({
  radius: {
    5: 240
  },
  x: 7,
  y: 0,
  angle: 45,
  count: 84,
  children: {
    shape: 'line',
    radius: 3,
    scale: 1,
    stroke: 'white',
    strokeDasharray: '100%',
    strokeDashoffset: {
      '-100%': '100%'
    },
    isForce3d: true,
    delay: 2.9 * DURATION,
    duration: 1000,
    easing: 'quad.out',
  }

});
const burstSevenplus = new mojs.Burst({
  radius: {
    5: 240
  },
  count: 30,
  timeline: {
    delay: 200
  },
  children: {
    stroke: ['#00FF00', '#FFFF00', '#00FFFF'],
    fill: 'none',
    scale: 1,
    strokeWidth: {
      8: 0
    },
    radius: {
      'rand(5, 1)': 0
    },
    degreeShift: 'rand(-50, 50)',
    duration: 450,
    delay: 'rand(0, 250)',
    isForce3d: true,
    delay: 3 * DURATION,
    duration: 800,
    easing: 'quad.out',
  }

});
const burstSevenplusPlus = new mojs.Burst({
  radius: {
    5: 240
  },
  count: 15,
  timeline: {
    delay: 200
  },
  children: {
    stroke: ['#00FF00', '#FFFF00', '#00FFFF'],
    fill: 'none',
    scale: 1,
    strokeWidth: {
      8: 0
    },
    radius: {
      'rand(5, 1)': 0
    },
    degreeShift: 'rand(-50, 50)',
    duration: 450,
    delay: 'rand(0, 250)',
    isForce3d: true,
    delay: 3.1 * DURATION,
    duration: 800,
    easing: 'quad.out',
  }

});

const twoBottom = new mojs.Shape({
  shape: 'two',
  fill: 'none',

stroke: COLORS.BROWN,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION / 1.15,
  y: 420,
  x: 420,
}).then({
  duration: DURATION * 2.5,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const twoMiddle = new mojs.Shape({
  shape: 'two',
  fill: 'none',

stroke: COLORS.ORANGE,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 1.05,

y: 420,
  x: 420,
}).then({
  duration: DURATION * 2.5,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const two = new mojs.Shape({
  shape: 'two',
  fill: 'none',

stroke: COLORS.WHITE,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 1.2,
  y: 420,
  x: 420,
}).then({
  duration: DURATION * 2.5,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const zeroBottom = new mojs.Shape({
  shape: 'zero',
  fill: 'none',
  stroke: COLORS.BLUE,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 1.8,
  y: 420,
  x: 420,
}).then({
  duration: DURATION * 1.8,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const zeroMiddle = new mojs.Shape({
  shape: 'zero',
  fill: 'none',
  stroke: COLORS.CYAN,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 1.9,
  y: 420,
  x: 420,
}).then({
  duration: DURATION * 1.8,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const zero = new mojs.Shape({
  shape: 'zero',
  fill: 'none',
  stroke: COLORS.WHITE,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 2,
  y: 420,
  x: 420,
}).then({
  duration: DURATION * 1.8,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const oneBottom = new mojs.Shape({
  shape: 'one',
  fill: 'none',
  stroke: COLORS.RED,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 2.75,
  y: 420,
  x: 420,
}).then({
  duration: DURATION,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const oneMiddle = new mojs.Shape({
  shape: 'one',
  fill: 'none',
  stroke: COLORS.MAGENTA,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 2.85,
  y: 420,
  x: 420,
}).then({
  duration: DURATION,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const one = new mojs.Shape({
  shape: 'one',
  fill: 'none',
  stroke: COLORS.WHITE,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 3,
  y: 420,
  x: 420,
}).then({
  duration: DURATION / 0.9,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const sevenBottom = new mojs.Shape({
  shape: 'seven',
  fill: 'none',
  stroke: COLORS.GREEN,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 3.5,
  y: 420,
  x: 420,
}).then({
  duration: DURATION / 3.5,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const sevenMiddle = new mojs.Shape({
  shape: 'seven',
  fill: 'none',
  stroke: COLORS.YELLOW,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 3.6,
  y: 420,
  x: 420,
}).then({
  duration: DURATION / 3.5,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const seven = new mojs.Shape({
  shape: 'seven',
  fill: 'none',
  stroke: COLORS.WHITE,
  scale: 10,
  strokeWidth: .2,
  strokeDasharray: '100%',
  strokeDashoffset: {
    '-100%': '50%'
  },
  duration: DURATION * 3.7,
  y: 420,
  x: 420,
}).then({
  duration: DURATION / 3.5,
  easing: 'cubic.out'
}).then({
  duration: DURATION / 2,
  strokeWidth: {
    .2: 0
  },
  easing: 'cubic.out'
});

const timeline = new mojs.Timeline;

timeline.add(burstOne, burstTwo, burstThree, burstFour, burstFive, burstSix, burstSeven, burstSevenplus, burstSevenplusPlus, two, twoBottom, twoMiddle, zero, zeroBottom, zeroMiddle, one, oneBottom, oneMiddle, seven, sevenBottom, sevenMiddle);

new MojsPlayer({
  add: timeline,
  isPlaying: true,
  isRepeat: true
});

编译

CSS

HTML

使用MoJS可以实现动画的播放控制功能，类似视频播放一样。

html5, mo

编辑器支持Emmet

快捷键

使用MoJS可以实现动画的播放控制功能，类似视频播放一样。

html5, mo

使用Mo.js实现的镭射枪动画（喷射出光圈）

使用Anime.js和SVG实现的Mozilla混合图标变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：