javascript - 带有 json 数据的香蕉 Sprite js 动画(前进/后退和淡入淡出)

Question

我正在开发一个自定义滚动动画框架。我可以通过 json 数据 blob 控制序列。

这里的代码使用了一些订阅者 - 尽管前进/后退动画已经到位 - 淡入/淡出效果不佳 - 淡入淡出出现故障。

使用 json - 我想提供 block 的骨架(类名、高度、宽度、背景)，然后提供与滚动值相关的每个开始/结束帧的操作。

如何修改代码——修复褪色问题。

所以在这个例子中。

-- 当滚动位于 0 时 -- 或应用程序开始时 -- 创建 block 。

-- 如果滚动范围在 100-400 之间 - 则指示滚动向右移动。

-- 如果滚动超过 400 - 销毁该方 block 。

所以动画是向前移动的，但我想以相反的方向反转动画 - 这样时间轴可以向前、向后移动 - 取决于滚动的速度 - 所以是慢速或加速影响会发生

---这是第一代代码 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 Angular 来看，将所有动画内容编码到单个转换描述符中似乎更有意义，例如第一个是:

"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/

祝你的框架好运!

编辑:正如您正确注意到的那样，快速来回移动会破坏顺序。如果我缓慢拖动而不是来回滚动，淡入淡出对我来说确实会达到零，所以我相信您指的是相同的效果。发生这种情况是由于我之前提出的 API 一致性问题。快速滚动移动允许动画从第 1 帧跳到第 3 帧或 v.v.从 3 到 1，甚至超出动画范围(低于 0 或高于 900)，结果位置与您的预期不一致，因为更新未被调用。我根据我在这个 fiddle 中的最初建议更新了代码片段:https://jsfiddle.net/twkq9jyf/1/并将用它更新下面的代码片段。我的初始片段位于上面的 fiddle 中，供您引用。

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
}, ... ]

确保后续帧具有匹配的开始和结束状态(关键帧)。 关键帧的数量将等于您的帧+1的数量。我建议您尝试自己实现这一点，因为这是一个简单的练习，有助于提高您的理解。