bindingx-web-polyfill/demo/timing.js

The web polyfill for BindingX.

'use strict';

import {parse} from 'bindingx-parser';
import bindingx from '../src/';

const easings = [
  'easeInQuad', 'easeOutQuad', 'easeInCubic', 'easeOutCubic',
  'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart',
  'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine',
  'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo',
  'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc',
  'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack',
  'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce',
  'easeInOutBounce', 'cubicBezier'
];

const block = document.getElementById('block');
const easing = document.getElementById('easing');

let options = '';
easings.forEach((v) => {
  options += `<option>${v}</option>`;
});

easing.innerHTML = options;

easing.addEventListener('change', (e) => {
  animate(e.target.value);
});

animate('easeInQuad');

// animate('linear');
function animate(timingFunc) {

  const begin = 0;
  const offset = 90;
  const duration = 500;
  const delay = 1000;
  let expression = `t>${delay}?${timingFunc}(t-1000,${begin},${offset},${duration}):0`;
  // expression = `${timingFunc}(t,${begin},${offset},${duration})`;
  const exitExpression = `t>${duration + delay}`;
  const x1 = 0.1;
  const y1 = 0.57;
  const x2 = 0.1;
  const y2 = 1;
  // expression = `t>${delay}?cubicBezier(t-1000, ${begin}, ${offset}, ${duration}, ${x1}, ${y1}, ${x2}, ${y2}):0`


  const borderExpression = 'linear(t,0,187.5,2000)';

  bindingx.bind({
    eventType: 'timing',
    exitExpression: {
      origin: exitExpression,
      transformed: parse(exitExpression)
    },
    props: [
      // {
      //   element: block,
      //   property: 'border-radius',
      //   expression: {
      //     origin: borderExpression,
      //     transformed: parse(borderExpression)
      //   }
      // },
      // {
      //   element: block,
      //   property: 'border-top-left-radius',
      //   expression: {
      //     origin: borderExpression,
      //     transformed: parse(borderExpression)
      //   }
      // },
      // {
      //   element: block,
      //   property: 'border-top-right-radius',
      //   expression: {
      //     origin: borderExpression,
      //     transformed: parse(borderExpression)
      //   }
      // },
      // {
      //   element: block,
      //   property: 'border-bottom-right-radius',
      //   expression: {
      //     origin: borderExpression,
      //     transformed: parse(borderExpression)
      //   }
      // },
      // {
      //   element: block,
      //   property: 'border-bottom-left-radius',
      //   expression: {
      //     origin: borderExpression,
      //     transformed: parse(borderExpression)
      //   }
      // },
      {
        element: block,
        property: 'transform.translateX',
        expression: {
          origin: expression,
          transformed: parse(expression)
        }
      },
      {
        element: block,
        property: 'transform.rotate',
        expression: {
          origin: expression,
          transformed: parse(expression)
        }
      },
      {
        element: block,
        property: 'transform.scale',
        expression: {
          // origin: expression,
          transformed: parse(`max(0,min(1,t/${duration})) + 1`)
        }
      }
    ]
  }, (e) => {
    // console.log(e);
    console.log(getComputedStyle(block).transform);


    console.log(bindingx.getComputedStyle(block));
  });

}

// setInterval(() => {
  // console.log(bindingx.getComputedStyle(block).rotate);
// }, 10);