Банановый спрайт js анимация (вперед / назад и исчезновение) с данными json

Question

Я работаю над пользовательским фреймворком прокрутки. Где я могу управлять последовательностью с помощью большого двоичного объекта json данных.

В этом коде используются некоторые подписчики - и хотя анимация прямого / обратного хода на месте - исчезновение / исчезновение не работает хорошо - там, где происходит сбой затухания.

Использование json - я хочу предоставить каркас для блока (имя класса, высота, ширина, фон), затем действия для начального / конечного фреймов, которые относятся к прокрутке значение.

как изменить код - чтобы исправить затухание.

Так в этом примере.

- когда прокрутка в 0 - или начало приложение - создать блок.

- если свиток находится в диапазоне 100-400 - свиток получает указание двигаться вправо.

- если свиток превысит 400 - уничтожить блок.

, поэтому анимация должна завладеть вперед, но я хочу переверните анимацию в противоположном направлении - чтобы временная шкала могла перемещаться вперед, назад - в зависимости от скорости прокрутки - чтобы эффект замедления или ускорения мог иметь место

--- это код первого поколения https://jsfiddle.net/d4053upt/1/

let data = [{
    "structure": {
      "name": "square",
      "height": 30,
      "width": 30,
      "x": 0,
      "y": 0,
      "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
    },
    "frames": [{
      "animation": "move",
      "start": 0,
      "stop": 300,
      "startPositionX": 0,
      "startPositionY": 0,
      "endPositionX": 90,
      "endPositionY": 0,
    }, {
      "animation": "move",
      "start": 301,
      "stop": 600,
      "startPositionX": 90,
      "startPositionY": 0,
      "endPositionX": 90,
      "endPositionY": 80,
    }, {
      "animation": "move",
      "start": 601,
      "stop": 900,
      "startPositionX": 90,
      "startPositionY": 80,
      "endPositionX": 0,
      "endPositionY": 0,
    }, {
      "animation": "show",
      "start": 601,
      "stop": 9999,
      "positionX": 0,
      "positionY": 0,
    }],
  },
  {
    "structure": {
      "name": "pear",
      "height": 30,
      "width": 30,
      "x": 90,
      "y": 80,
      "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
    },
    "frames": [{
      "animation": "move",
      "start": 0,
      "stop": 300,
      "startPositionX": 90,
      "startPositionY": 80,
      "endPositionX": 0,
      "endPositionY": 80,
    }, {
      "animation": "move",
      "start": 301,
      "stop": 600,
      "startPositionX": 0,
      "startPositionY": 80,
      "endPositionX": 0,
      "endPositionY": 0,
    }, {
      "animation": "move",
      "start": 601,
      "stop": 900,
      "startPositionX": 0,
      "startPositionY": 0,
      "endPositionX": 90,
      "endPositionY": 80,
    }, {
      "animation": "show",
      "start": 601,
      "stop": 9999,
      "positionX": 90,
      "positionY": 80,
    }],
  }
]

let animations = {
  setup: function($container) {
    this.$container = $container;
    this.viewportWidth = $container.width();
    this.viewportHeight = $container.height();
  },
  createBlock: function(blockSpec) {
    let $block = $('<div>');
    $block.addClass(blockSpec.name);
    $block.addClass("animatedblock");
    $block.css("height", blockSpec.height);
    $block.css("width", blockSpec.width);
    $block.css("background", blockSpec.background);
    $block.css("background-size", "cover");
    this.$container.append($block);
    this.setPosition($block, blockSpec.x, blockSpec.y)
    return $block;
  },
  setPosition($block, x, y) {
    $block.css({
      left: x / 100 * this.viewportWidth,
      top: y / 100 * this.viewportHeight,
    });
  },
  moveBlock($block, frame, scrollProgress) {
    let blockPositionX = frame.startPositionX + scrollProgress * (frame.endPositionX - frame.startPositionX);
    let blockPositionY = frame.startPositionY + scrollProgress * (frame.endPositionY - frame.startPositionY);
    this.setPosition($block, blockPositionX, blockPositionY);
  },
  showBlock: function($block, frame) {
    $block.show()
    this.setPosition($block, frame.positionX, frame.positionY);
  },
  hideBlock: function($block) {
    $block.hide()
  },
}

class ScrollObserver {
  constructor() {
    let $window = $(window);
    this.STOP_DISPATCH = 'STOP_DISPATCH';
    this.subscribers = [];
    $window.scroll(event => this.dispatch($window.scrollTop()));
  }
  subscribe(subscriberFn) {
    this.subscribers.push(subscriberFn);
  }
  dispatch(scrollPosition) {
    for (let subscriberFn of this.subscribers) {
      if (subscriberFn(scrollPosition) == this.STOP_DISPATCH) break;
    }
  }
}

jQuery(function($) {
  animations.setup($('.container'));
  $(window).resize(event => animations.setup($('.container')));
  for (let obj of data) {
    let scrollObserver = new ScrollObserver();
    let blockSpec = obj.structure;
    let $block = animations.createBlock(blockSpec);
    for (let frame of obj.frames) {
      scrollObserver.subscribe(scrollPosition => {
        if (scrollPosition >= frame.start && scrollPosition <= frame.stop) {
          let scrollProgress = (scrollPosition - frame.start) / (frame.stop - frame.start);
          switch (frame.animation) {
            case 'move':
              animations.moveBlock($block, frame, scrollProgress);
              break;
            case 'show':
              animations.showBlock($block, frame);
          }
          return scrollObserver.STOP_DISPATCH;
        }
      });
    }
  }
});

body {
  height: 1500px;
}

.container {
  background: grey;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: content-box;
}

.animatedblock {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

- это код второго поколения с текущей неисправностью замирания https://jsfiddle.net/26jkLnup/1/

let data = [{
"structure": {
  "name": "square",
  "height": 30,
  "width": 30,
  "x": 0,
  "y": 0,
  "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
},
"frames": [{
  "animation": "fadein",
  "start": 0,
  "stop": 300,
  "startPositionX": 0,
  "startPositionY": 0,
  "endPositionX": 90,
  "endPositionY": 0,
}, {
  "animation": "move",
  "start": 301,
  "stop": 600,
  "startPositionX": 90,
  "startPositionY": 0,
  "endPositionX": 90,
  "endPositionY": 80,
}, {
  "animation": "fadeout",
  "start": 601,
  "stop": 900,
  "positionX": 0,
  "positionY": 0,
}],
  }/*,
  {
"structure": {
  "name": "pear",
  "height": 30,
  "width": 30,
  "x": 90,
  "y": 80,
  "background": 'url("https://image.flaticon.com/icons/svg/272/272135.svg")'
},
"frames": [{
  "animation": "move",
  "start": 0,
  "stop": 300,
  "startPositionX": 90,
  "startPositionY": 80,
  "endPositionX": 0,
  "endPositionY": 80,
}, {
  "animation": "move",
  "start": 301,
  "stop": 600,
  "startPositionX": 0,
  "startPositionY": 80,
  "endPositionX": 0,
  "endPositionY": 0,
}, {
  "animation": "move",
  "start": 601,
  "stop": 900,
  "startPositionX": 0,
  "startPositionY": 0,
  "endPositionX": 90,
  "endPositionY": 80,
}, {
  "animation": "show",
  "start": 601,
  "stop": 9999,
  "positionX": 90,
  "positionY": 80,
}],
  }*/
]

let animations = {
  setup: function($container) {
this.$container = $container;
this.viewportWidth = $container.width();
this.viewportHeight = $container.height();
  },
  createBlock: function(blockSpec) {
let $block = $('<div>');
$block.addClass(blockSpec.name);
$block.addClass("animatedblock");
$block.css("height", blockSpec.height);
$block.css("width", blockSpec.width);
$block.css("background", blockSpec.background);
$block.css("background-size", "cover");
this.$container.append($block);
this.setPosition($block, blockSpec.x, blockSpec.y)
return $block;
  },
  setPosition($block, x, y) {
$block.css({
  left: x / 100 * this.viewportWidth,
  top: y / 100 * this.viewportHeight,
});
  },
  moveBlock($block, frame, scrollProgress) {
let blockPositionX = frame.startPositionX + scrollProgress * (frame.endPositionX - frame.startPositionX);
let blockPositionY = frame.startPositionY + scrollProgress * (frame.endPositionY - frame.startPositionY);
this.setPosition($block, blockPositionX, blockPositionY);
  },
  showBlock: function($block, frame) {
$block.show()
this.setPosition($block, frame.positionX, frame.positionY);
  },
  hideBlock: function($block) {
$block.hide()
  },
  fadeinBlock: function($block, frame, scrollProgress) {
 //console.log("scrollProgress", scrollProgress)

$block.css({
  opacity: 1 * scrollProgress
})
 
 
/*
$block.css({
	opacity: frame.startPositionY / 100 * this.viewportHeight
})*/
  },
  fadeoutBlock: function($block, frame, scrollProgress) {
//console.log("scrollProgress22222",scrollProgress)
/*
$block.css({
	opacity: frame.startPositionY / 100 * this.viewportHeight
})*/
$block.css({
  opacity: 1 * (1-scrollProgress)
})

  },
}

class ScrollObserver {
  constructor() {
let $window = $(window);
this.STOP_DISPATCH = 'STOP_DISPATCH';
this.subscribers = [];
$window.scroll(event => this.dispatch($window.scrollTop()));
  }
  subscribe(subscriberFn) {
this.subscribers.push(subscriberFn);
  }
  dispatch(scrollPosition) {
for (let subscriberFn of this.subscribers) {
  if (subscriberFn(scrollPosition) == this.STOP_DISPATCH) break;
}
  }
}

jQuery(function($) {
  animations.setup($('.animationcontainer'));
  $(window).resize(event => animations.setup($('.animationcontainer')));
  for (let obj of data) {
let scrollObserver = new ScrollObserver();
let blockSpec = obj.structure;
let $block = animations.createBlock(blockSpec);
for (let frame of obj.frames) {
  scrollObserver.subscribe(scrollPosition => {
    if (scrollPosition >= frame.start && scrollPosition <= frame.stop) {
      let scrollProgress = (scrollPosition - frame.start) / (frame.stop - frame.start);
      switch (frame.animation) {
        case 'move':
          animations.moveBlock($block, frame, scrollProgress);
          break;
        case 'show':
          animations.showBlock($block, frame);
          break;
        case 'fadein':
          animations.fadeinBlock($block, frame, scrollProgress);
          break;
        case 'fadeout':
          animations.fadeoutBlock($block, frame, scrollProgress);
          break;
      }
      return scrollObserver.STOP_DISPATCH;
    }
  });
}
  }
});

body {
  height: 1500px;
}

.animationcontainer {
  background: grey;
  border: 1px solid pink;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: content-box;
}

.animatedblock {
  position: absolute;
}

@media only screen and (min-width: 600px) {
  body {
background-color: lightblue;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
<div class="animationcontainer"></div>
<div class="animationcontainer"></div>
</body>

Answer 1

Есть небольшая концептуальная проблема ИМХО: у вас есть fadein и fadeout анимации, которые перемещают объект. Не то чтобы это невозможно, и я внес изменения, чтобы «исправить» анимацию, насколько я понимаю, чего именно вы хотели достичь, но это делает move операцию анимации излишней. В API-интерфейсе представляется более целесообразным закодировать все объекты, которые вы анимируете, в один дескриптор перехода, например, первым будет:

"frames": [{
  "start": 0,
  "stop": 300,
  "startPositionX": 0,
  "startPositionY": 0,
  "endPositionX": 90,
  "endPositionY": 0,
  "startOpacity": 0,
  "endOpacity": 1
}]

Я не изменил это, но для того, чтобы переместить постепенно я должен был применить ход после fadein и fadeout. Это делает их эффективно fadeinandmove и fadeoutandmove.

Еще одно изменение, которое я сделал, - это начальная непрозрачность для настройки, иначе вы начнете исчезать, когда уже на 100% непрозрачность.

Вот ответвление вашего фрагмента: https://jsfiddle.net/5hxg02d3/

Удачи в ваших рамках!

EDIT : как вы правильно заметили, быстрое движение вперед и назад нарушает последовательность. Fade для меня достигает нуля, если я перетаскиваю медленно, а не прокручиваю назад и вперед, поэтому я считаю, что вы имеете в виду тот же эффект. Это происходит из-за проблем с согласованностью API, о которых я говорил ранее. Быстрое движение прокрутки позволяет анимации переходить с кадра 1 на 3 или vv с 3 на 1 или даже go из области анимации (ниже 0 или выше 900), и в результате позиция не соответствует вашим ожиданиям, поскольку обновления не являются называется. Я обновил фрагмент в соответствии с моим первоначальным предложением в этой скрипте: https://jsfiddle.net/twkq9jyf/1/ и обновлю приведенный ниже фрагмент. Мой исходный фрагмент приведен в скрипте выше для справки.

let data = [{
"structure": {
  "name": "square",
  "height": 30,
  "width": 30,
  "x":0,
  "y":0,
  "opacity": 0,
  "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
},
"frames": [{
  "start": 0,
  "stop": 300,
  "startPositionX": 0,
  "startPositionY": 0,
  "endPositionX": 90,
  "endPositionY": 0,
  "startOpacity": 0,
  "endOpacity": 1
}, {
  "start": 301,
  "stop": 600,
  "startPositionX": 90,
  "startPositionY": 0,
  "endPositionX": 90,
  "endPositionY": 80,
  "startOpacity": 1,
  "endOpacity": 1
}, {
  "start": 601,
  "stop": 900,
  "startPositionX": 90,
  "startPositionY": 80,
  "endPositionX": 90,
  "endPositionY": 80,
  "startOpacity": 1,
  "endOpacity": 0
}],
  }
  ]

let animations = {
  setup: function($container) {
this.$container = $container;
this.viewportWidth = $container.width();
this.viewportHeight = $container.height();
  },
  createBlock: function(blockSpec) {
let $block = $('<div>');
$block.addClass(blockSpec.name);
$block.addClass("animatedblock");
$block.css("height", blockSpec.height);
$block.css("width", blockSpec.width);
$block.css("background", blockSpec.background);
$block.css("background-size", "cover");
$block.css("opacity", blockSpec.opacity);
this.$container.append($block);
return $block;
  },
  setPosition($block, x, y) {
$block.css({
  left: x / 100 * this.viewportWidth,
  top: y / 100 * this.viewportHeight,
});
  },
  updatePosition: function($block, frame, scrollProgress) {
let blockPositionX = frame.startPositionX + scrollProgress * (frame.endPositionX - frame.startPositionX);
let blockPositionY = frame.startPositionY + scrollProgress * (frame.endPositionY - frame.startPositionY);
this.setPosition($block, blockPositionX, blockPositionY);
  },
  updateOpacity: function($block, frame, scrollProgress) {
$block.css({
  opacity: frame.startOpacity + scrollProgress * (frame.endOpacity - frame.startOpacity)
})
  },
}

class ScrollObserver {
  constructor() {
let $window = $(window);
this.STOP_DISPATCH = 'STOP_DISPATCH';
this.subscribers = [];
$window.scroll(event => this.dispatch($window.scrollTop()));
  }
  subscribe(subscriberFn) {
this.subscribers.push(subscriberFn);
  }
  dispatch(scrollPosition) {
for (let subscriberFn of this.subscribers) {
  if (subscriberFn(scrollPosition) == this.STOP_DISPATCH) break;
}
  }
}

jQuery(function($) {
  animations.setup($('.animationcontainer'));
  $(window).resize(event => animations.setup($('.animationcontainer')));
  for (let obj of data) {
let scrollObserver = new ScrollObserver();
let blockSpec = obj.structure;
let $block = animations.createBlock(blockSpec);
for (let frame of obj.frames) {
  scrollObserver.subscribe(scrollPosition => {
    if ( (scrollPosition >= frame.start || frame.start == 0) &&
         (scrollPosition <= frame.stop || frame.stop == 900) ) {
      let scrollProgress = (scrollPosition - frame.start) / (frame.stop - frame.start);
      animations.updatePosition($block, frame, scrollProgress);
      animations.updateOpacity($block, frame, scrollProgress);
      return scrollObserver.STOP_DISPATCH;
    }
  });
}
  }
});

body {
  height: 1500px;
}

.animationcontainer {
  background: grey;
  border: 1px solid pink;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: content-box;
}

.animatedblock {
  position: absolute;
}

@media only screen and (min-width: 600px) {
  body {
background-color: lightblue;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
<div class="animationcontainer"></div>
<div class="animationcontainer"></div>
</body>

MORE : подписчик запускается при действии прокрутки с текущей позицией прокрутки, находит первый кадр, который соответствует позиции, вычисляет scrollProgress (параметр 0..1 в найденном кадре) и запускает обновления положения и непрозрачности. Помимо проблемы, которую я исправил, этот подход не гарантирует правильность данных (может быть несколько кадров, охватывающих одну и ту же позицию прокрутки, и последующие кадры могут иметь неравный конец кадра с началом следующего). Чтобы решить эту проблему, вы можете рассмотреть вместо сохранения фрейма с startPosition и stopPosition, чтобы сохранить ключевые кадры с описанием следующим образом:

"frames": [{
  "key": 0,
  "x": 0,
  "y": 90,
  "opacity": 0
},
{
  "key": 300,
  "x": 90,
  "y": 0,
  "opacity": 1
}, ...]

вместо фрейма

"frames": [{
  "start": 0,
  "stop": 300,
  "startPositionX": 0,
  "startPositionY": 0,
  "endPositionX": 90,
  "endPositionY": 0,
  "startOpacity": 0,
  "endOpacity": 1
}, ... ]

, который гарантирует, что последовательные кадры имеют совпадающие начальное и конечное состояния (ключевые кадры). Число keyframes будет равно вашему числу frames+1. Я предлагаю попробовать реализовать это самостоятельно, поскольку это простое упражнение, которое поможет улучшить ваше понимание.