mo实现一个关闭窗口动画效果代码-html代码-BFW代码库

mo实现一个关闭窗口动画效果代码

代码语言：html

所属分类：动画

代码描述：mo实现一个关闭窗口动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body, html {
  padding: 0;
  margin:  0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: rgba(241, 226, 215, 0.2);
  position: relative;
  // background: #FC2D79;
  background: #28143F;
}

.close-button {
  cursor: pointer;
}
</style>




</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mo.0.265.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mojs-player.0.43.15.js"></script>
      <script >
const DURATION = 400;

let tm = null;
const delayedShow = () => {
  clearTimeout( tm );
  tm = setTimeout(function () {
     openTimeline.replay();               
  }, 1000);
}

// OPEN
const openBackground = new mojs.Shape({
   fill: '#FC2D79', 
   scale: { 0: 4.5 },
   isForce3d: true,
   isTimelineLess: true,
   radius: 200,
   easing: 'cubic.out',
   backwardEasing: 'expo.in',
   duration: 2*DURATION,
   onStart (isForward) {
     !isForward && delayedShow();
   }
});

const V_OPTS = {
  fill:     'none',
  stroke:   'white',
  isTimelineLess: true
}

const circle = new mojs.Shape({
  ...V_OPTS,
  left: '75%', top: '25%',
  radius:       { 0 : 15 },
  easing:       'cubic.out',
  strokeWidth:  { 10 : 0 },
  duration:     1.5*DURATION,
  className:    'close-button'
});

const x = new mojs.Shape({
  ...V_OPTS,
  parent:       circle.el,
  shape:    'cross',
  radius:   { 0: 8 },
  angle:    45,
  // easing:   'cubic.out',
  duration: DURATION,
  delay:   .4*DURATION,
});

const burst = new mojs.Burst({
  parent: circle.el,
  radius:     { 0: 30 },
  children: {
    ...V_OPTS,
    shape: 'line',
    scaleY:  1,
  }
});

const BUBBLE_OPTS = {
  ...V_OPTS,
  parent:         circle.el,
  strokeWidth:    {5:0},
}

const bubbleTimeline = new mojs.Timeline({ delay: .7*DURATION });

const bubble1 = new mojs.Shape({
  ...BUBBLE_OPTS,
  rad.........完整代码请登录后点击上方下载按钮下载查看