SHARE
TWEET

Untitled

a guest Dec 11th, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function main() {
  2.   let anim;
  3.  
  4.   document.getElementById('fadeInPlay')
  5.     .addEventListener('click', function () {
  6.       const block = document.getElementById('fadeInBlock');
  7.       animaster().fadeIn(block, 5000);
  8.     });
  9.   document.getElementById('fadeInReset')
  10.     .addEventListener('click', function () {
  11.       const block = document.getElementById('fadeInBlock');
  12.       resetFadeIn(block);
  13.     });
  14.  
  15.   document.getElementById('movePlay')
  16.     .addEventListener('click', function () {
  17.       const block = document.getElementById('moveBlock');
  18.       animaster().move(block, 1000, {x: 100, y: 10});
  19.     });
  20.   document.getElementById('moveReset')
  21.     .addEventListener('click', function () {
  22.       const block = document.getElementById('moveBlock');
  23.       resetMoveAndScale(block);
  24.     });
  25.  
  26.   document.getElementById('scalePlay')
  27.     .addEventListener('click', function () {
  28.       const block = document.getElementById('scaleBlock');
  29.       animaster().scale(block, 1000, 1.25);
  30.     });
  31.   document.getElementById('scaleReset')
  32.     .addEventListener('click', function () {
  33.       const block = document.getElementById('scaleBlock');
  34.       resetMoveAndScale(block);
  35.     });
  36.  
  37.   document.getElementById('fadeOutPlay')
  38.     .addEventListener('click', function () {
  39.       const block = document.getElementById('fadeOutBlock');
  40.       animaster().fadeOut(block, 5000);
  41.     });
  42.   document.getElementById('fadeOutReset')
  43.     .addEventListener('click', function () {
  44.       const block = document.getElementById('fadeOutBlock');
  45.       resetFadeOut(block);
  46.     });
  47.  
  48.   document.getElementById('heartBeatingPlay')
  49.     .addEventListener('click', function () {
  50.       const block = document.getElementById('heartBeatingBlock');
  51.       anim = animaster().heartBeating(block);
  52.       document.getElementById('heartBeatingStop')
  53.         .addEventListener('click', function () {
  54.           anim.stop();
  55.         });
  56.     });
  57.  
  58.   document.getElementById('shakingPlay')
  59.     .addEventListener('click', function () {
  60.       const block = document.getElementById('shakingBlock');
  61.       anim = animaster().shaking(block);
  62.       document.getElementById('shakingStop')
  63.         .addEventListener('click', function () {
  64.           anim.stop();
  65.         });
  66.     });
  67.  
  68.   document.getElementById('moveAndHidePlay')
  69.     .addEventListener('click', function () {
  70.       const block = document.getElementById('moveAndHideBlock');
  71.       animaster().moveAndHide(block, 5000, {x: 100, y: 20});
  72.     });
  73.   document.getElementById('moveAndHideReset')
  74.     .addEventListener('click', function () {
  75.       const block = document.getElementById('moveAndHideBlock');
  76.       resetFadeOut(block);
  77.       resetMoveAndScale(block);
  78.     });
  79.  
  80.   document.getElementById('showAndHidePlay')
  81.     .addEventListener('click', function () {
  82.       const block = document.getElementById('showAndHideBlock');
  83.       animaster().showAndHide(block, 5000);
  84.     });
  85.  
  86. })();
  87.  
  88. function animaster() {
  89.  
  90.   return {
  91.     _steps: [],
  92.     _translation: {x: 0, y: 0},
  93.     _ratio: 1,
  94.     _run: function (element, steps) {
  95.       const anim = steps.shift();
  96.       console.log(anim);
  97.       switch (anim.name) {
  98.         case "move":
  99.           animaster().move.call(this, element, anim.duration, anim.translation);
  100.           break;
  101.         case "scale":
  102.           animaster().scale.call(this, element, anim.duration, anim.ratio);
  103.           break;
  104.         case "fadeIn":
  105.           animaster().fadeIn.call(this, element, anim.duration);
  106.           break;
  107.         case "fadeOut":
  108.           animaster().fadeOut.call(this, element, anim.duration);
  109.           break;
  110.         case "delay":
  111.           animaster().move(element, anim.duration, null);
  112.           break;
  113.         case "moveAndHide":
  114.           animaster().move(element, anim.duration *3/5, anim.translation)
  115.           setTimeout(function () {
  116.             animaster().fadeOut(element, anim.duration * 2 / 5);
  117.           }, anim.duration * 3 / 5);
  118.           break;
  119.         case "showAndHide":
  120.             animaster().fadeIn(element, anim.duration * 1 / 3);
  121.             animaster().addDelay(anim.duration * 2 / 3)
  122.             animaster().fadeOut(element, anim.duration * 1 / 3);
  123.             break;
  124.         case "beating":
  125.             animaster().heartBeating(element);
  126.       }
  127.       if(steps.length!==0)
  128.         setTimeout(()=> this._run(element, steps), anim.duration);
  129.     },
  130.     scale:  function (element, duration, ratio) {
  131.       this._ratio *= ratio;
  132.       element.style.transitionDuration = `${duration}ms`;
  133.       element.style.transform = getTransform(this._translation, this._ratio);
  134.       console.log(element.style.transform);
  135.     },
  136.     move:  function (element, duration, translation) {
  137.       this._translation.x += translation.x;
  138.       this._translation.y += translation.y;
  139.       element.style.transitionDuration = `${duration}ms`;
  140.       element.style.transform = getTransform(this._translation, this._ratio);
  141.       console.log(element.style.transform);
  142.     },
  143.     fadeIn: function (element, duration) {
  144.       element.style.transitionDuration = `${duration}ms`;
  145.       element.classList.remove('hide');
  146.       element.classList.add('show');
  147.     },
  148.     fadeOut: function (element, duration) {
  149.       element.style.transitionDuration = `${duration}ms`;
  150.       element.classList.remove("show");
  151.       element.classList.add("hide");
  152.     },
  153.     moveAndHide: function (element, duration, translation) {
  154.       element.style.transitionDuration = `${duration}ms`;
  155.       animaster().move(element, duration * 3 / 5, translation);
  156.       setTimeout(function () {
  157.         animaster().fadeOut(element, duration * 2 / 5);
  158.       }, duration * 3 / 5);
  159.     },
  160.     showAndHide: function (element, duration) {
  161.       console.log(element);
  162.       animaster().fadeIn(element, duration * 1 / 3);
  163.       setTimeout(() => {
  164.         animaster().fadeOut(element, duration * 1 / 3);
  165.       }, duration * 2 / 3);
  166.     },
  167.     heartBeating: function (element) {
  168.       element.style.transitionDuration = `500ms`;
  169.       let beatCounter = 0;
  170.      
  171.       let beating = setInterval(() => {
  172.         animaster().scale(element, 500, beatCounter % 2 === 0 ? 1.4 : 1.0);
  173.         beatCounter++;
  174.       }, 500);
  175.      
  176.       return {
  177.         stop: () => {
  178.           clearInterval(beating);
  179.           animaster().scale(element, 0, 1);
  180.         }
  181.       };
  182.     },
  183.     shaking: function (element) {
  184.       element.style.transitionDuration = `250ms`;
  185.       let shakeCounter = 0;
  186.      
  187.       let shaking = setInterval(() => {
  188.         animaster().move(element, 250, shakeCounter % 2 === 0 ? {x: -20, y: 0} : {x: 20, y: 0});
  189.         shakeCounter++;
  190.       }, 500);
  191.      
  192.       return {
  193.         stop: () => {
  194.           clearInterval(shaking);
  195.           animaster().move(element, 0, {x: 0, y: 0});
  196.         }
  197.       };
  198.     },
  199.     addMove: function (duration, translation) {
  200.       const anim = {name: "move", duration: duration, translation: translation, ratio: null};
  201.       this._steps.push(anim);
  202.       return this;
  203.     },
  204.     addScale: function (duration, ratio) {
  205.       const anim = {name: "scale", duration: duration, translation: null, ratio: ratio};
  206.       this._steps.push(anim);
  207.       return this;
  208.     },
  209.     addFadeIn: function (duration) {
  210.       const anim = {name: "fadeIn", duration: duration, translation: null, ratio: null};
  211.       this._steps.push(anim);
  212.       return this;
  213.     },
  214.     addFadeOut: function (duration) {
  215.       const anim = {name: "fadeOut", duration: duration, translation: null, ratio: null};
  216.       this._steps.push(anim);
  217.       return this;
  218.     },
  219.     addDelay: function (duration){
  220.       const anim = {name: "delay", duration: duration, translation: null, ratio: null};
  221.       this._steps.push(anim);
  222.       return this;
  223.     },
  224.     addMoveAndHide: function(duration, translation){
  225.       const anim = {name: "moveAndHide", duration: duration, translation: null, ratio: null};
  226.       this._steps.push(anim);
  227.       return this;
  228.     },
  229.     addShowAndHide: function(duration){
  230.       const anim = {name: "showAndHide", duration: duration, translation: null, ratio: null};
  231.       this._steps.push(anim);
  232.       return this;
  233.     },
  234.     addHeartBeating: function(){
  235.       const anim = {name: "beating", duration: duration, translation: null, ratio: null};
  236.       this._steps.push(anim);
  237.       return this;
  238.     },
  239.     buildHandler: function(cycled){
  240.       that = this;
  241.       return function () {
  242.       that.play(this, cycled);
  243.       }
  244.     },
  245.     play: function (element, cycled = false) {
  246.       while (cycled)
  247.       {
  248.       this._run(element, this._steps);
  249.       }
  250.     }
  251.   };
  252. }
  253.  
  254. const customAnimation = animaster()
  255.   .addMove(200, {x: 40, y: 40})
  256.   .addScale(800, 1.3)
  257.   .addMove(200, {x: 80, y: 0})
  258.   .addScale(800, 1)
  259.   .addMove(200, {x: 40, y: -40})
  260.   .addScale(800, 0.7)
  261.   .addMove(200, {x: 0, y: 0})
  262.   .addScale(800, 1);
  263.  
  264.  
  265. const element = document.getElementById('moveBlock');
  266. customAnimation.play(element);
  267.  
  268. function getTransform(translation, ratio) {
  269.   const result = [];
  270.   if (translation) {
  271.     result.push(`translate(${translation.x}px,${translation.y}px)`);
  272.   }
  273.   if (ratio) {
  274.     result.push(`scale(${ratio})`);
  275.   }
  276.   return result.join(' ');
  277. }
  278.  
  279. function resetFadeIn(element) {
  280.   element.style.transitionDuration = null;
  281.   element.classList.remove("show");
  282.   element.classList.add("hide");
  283. }
  284.  
  285. function resetFadeOut(element) {
  286.   element.style.transitionDuration = null;
  287.   element.classList.remove("hide");
  288.   element.classList.add("show");
  289. }
  290.  
  291. function resetMoveAndScale(element) {
  292.   element.style.transitionDuration = null;
  293.   element.style.transform = null;
  294. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top