githubmirror/anime

documentation/examples/ease-visualizer.html
419 строк13 KB
Julian Garnier
remove prefix "anime-" of examples files
12 окт 2020, 17:56
12 окт 2020, 17:56ad4e588
<!DOCTYPE html>
<html>
<head>
  <title>Ease visualizer | anime.js</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:title" content="anime.js">
  <meta property="og:url" content="https://animejs.com">
  <meta property="og:description" content="Javascript Animation Engine">
  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="anime.js">
  <meta name="twitter:site" content="@juliangarnier">
  <meta name="twitter:description" content="Javascript Animation Engine">
  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
  <link href="../assets/css/animejs.css" rel="stylesheet">
  <link href="../assets/css/documentation.css" rel="stylesheet">
  <!-- <script src="../../lib/anime.min.js"></script> -->
  <style>
    .easings {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .output {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
      height: 400px;
    }
    .options {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      width: 100%;
      min-height: 300px;
      border-top: 1px solid #09090B;
    }
    .grid {
      border-top: 1px solid rgba(255,255,255,0.2);
      border-right: 1px solid rgba(255,255,255,0.2);
      background: linear-gradient(0deg, rgba(255,255,255,0.2) 1px, rgba(0,0,0,0) 1px),
                  linear-gradient(90deg, rgba(255,255,255,0.2) 1px, rgba(0,0,0,0) 1px),
                  linear-gradient(0deg, rgba(255,255,255,0.1) 1px, rgba(0,0,0,0) 1px),
                  linear-gradient(90deg, rgba(255,255,255,0.1) 1px, rgba(0,0,0,0) 1px);
      background-position: 0px -1px;
      background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    }
    .visualizer-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .visualizer {
      position: relative;
      width: 100%;
    }
    .value {
      position: relative;
      width: 20px;
      height: 100%;
      margin-left: 20px;
    }
    @media screen and (min-width: 980px) {
      .easings {
        flex-direction: row;
      }
      .output {
        width: 50%;
        height: 100%;
      }
      .options {
        width: 50%;
        height: 100%;
      }
      .visualizer-wrapper {
        width: 400px;
        height: 400px;
      }
      .value {
        width: 40px;
        height: 400px;
        margin-left: 40px;
      }
    }
    .axis {
      position: absolute;
      background: #5A87FF;
    }
    .axis.x {
      width: 1px;
      height: 100%;
      transform-origin: 0 0;
    }
    .axis.y {
      bottom: 0;
      width: 100%;
      height: 1px;
      transform-origin: 100% 0;
    }
    .graph {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .cursor {
      position: absolute;
      z-index: 2;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      background: #FF1461;
      border-radius: 50%;
      transform: translateY(100px);
    }
    .curve {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      overflow: visible;
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    .curve-dot {
      position: relative;
      width: 6px;
      height: 6px;
      margin-bottom: -3px;
      margin-left: -3px;
      border-radius: 50%;
      flex-shrink: 0;
      background-color: #18FF92;
    }
    .curve-dot:first-child {
      margin-left: -3px;
    }
    .curve-dot:last-child {
      margin-right: -4px;
    }
    button {
      opacity: 1;
      position: relative;
      color: currentColor;
      font-size: 16px;
      width: calc(50% + 1px);
      border: 1px solid #09090B;
      background: transparent;
      margin: -1px 0 0 -1px;
      letter-spacing: 1px;
    }
    label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(100% + 1px);
      margin: -1px 0 0 -1px;
      border-top: 0px;
      border-left: 1px solid #09090B;
      border-right: 1px solid #09090B;
      color: rgba(255,255,255,.3);
    }
    button.active {
      color: #18FF92;
      z-index: 1;
      opacity: 1;
      border: 1px solid currentColor;
      background: #222027;
    }
    button:focus {
      outline: none;
    }
    button:hover {
      background: #222027;
    }
  </style>
</head>
<body>
  <div class="easings">
    <div class="output">
      <div class="visualizer-wrapper grid">
        <div class="axis x"></div>
        <div class="axis y"></div>
        <div class="visualizer">
          <div class="curve">
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
            <div class="curve-dot"></div>
          </div>
        </div>
      </div>
      <div class="value grid">
        <div class="graph">
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
          <div class="cursor"></div>
        </div>
      </div>
    </div>
    <div class="options">
      <label>Ease In</label>
      <button class="active" value="easeInQuad" >Quad</button>
      <button value="easeInCubic" >Cubic</button>
      <button value="easeInQuart" >Quart</button>
      <button value="easeInQuint" >Quint</button>
      <button value="easeInSine" >Sine</button>
      <button value="easeInExpo" >Expo</button>
      <button value="easeInCirc" >Circ</button>
      <button value="easeInBack" >Back</button>
      <button value="easeInBounce" >Bounce</button>
      <button value="easeInElastic" >Elastic</button>
      <label>Ease Out</label>
      <button value="easeOutQuad" >Quad</button>
      <button value="easeOutCubic" >Cubic</button>
      <button value="easeOutQuart" >Quart</button>
      <button value="easeOutQuint" >Quint</button>
      <button value="easeOutSine" >Sine</button>
      <button value="easeOutExpo" >Expo</button>
      <button value="easeOutCirc" >Circ</button>
      <button value="easeOutBack" >Back</button>
      <button value="easeOutBounce" >Bounce</button>
      <button value="easeOutElastic" >Elastic</button>
      <label>Ease In Out</label>
      <button value="easeInOutQuad" >Quad</button>
      <button value="easeInOutCubic" >Cubic</button>
      <button value="easeInOutQuart" >Quart</button>
      <button value="easeInOutQuint" >Quint</button>
      <button value="easeInOutSine" >Sine</button>
      <button value="easeInOutExpo" >Expo</button>
      <button value="easeInOutCirc" >Circ</button>
      <button value="easeInOutBack" >Back</button>
      <button value="easeInOutBounce" >Bounce</button>
      <button value="easeInOutElastic" >Elastic</button>
      <label>Steps</label>
      <button value="steps(2)" >steps(2)</button>
      <button value="steps(5)" >steps(5)</button>
      <button value="steps(10)" >steps(10)</button>
      <button value="steps(20)" >steps(20)</button>
    </div>
  </div>
  <script type="module">

  import anime from '../../src/index.js';

  var pathEl = document.querySelector('.curve');
  var presetsEls = document.querySelectorAll('.options button');
  var duration = 1000;

  function animateProgress(easingName) {

    anime.remove(['.axis.x', '.axis.y', '.cursor']);

    var tl = anime.timeline({
      duration: duration,
      easing: 'linear',
      complete: function() {
        animateProgress(easingName);
      }
    })
    .add({
      targets: '.axis.x',
      translateX: [0, 399],
      translateZ: [0, 0]
     }, 0)
    .add({
      targets: '.axis.y',
      translateY: [0, -399],
      translateZ: [0, 0],
      easing: easingName,
      endDelay: 1000
    }, 0)
    .add({
      targets: '.cursor',
      translateY: [400, 0],
      translateZ: [0, 0],
      easing: easingName,
      update: function(anim) {
        var timeSegment = (100 / (anim.animatables.length - 2));
        var index = Math.round((anim.progress +.5) / timeSegment);
        var animatable = anim.animatables[index];
        if (animatable) {
          var target = animatable.target;
          anime.remove(target);
          target.style.opacity = .20;
        }
      }
    }, 0);

  }

  function changeEase(event) {
    for (var i = 0; i < presetsEls.length; i++) {
      presetsEls[i].classList.remove('active');
    }
    var buttonEl = event.target;
    var easingName = buttonEl.value;
    buttonEl.classList.add('active');
    animateProgress(easingName);
    anime({
      targets: '.curve-dot',
      translateY: anime.stagger([0, -400], {easing: easingName}),
      easing: 'easeInOutQuad',
      duration: 400
    });
  }

  for (var i = 0; i < presetsEls.length; i++) {
    presetsEls[i].onclick = changeEase;
  }

  presetsEls[0].click();

  </script>
</body>
</html>