时间戳

首页 > 解决方案 > 带有 json 数据的香蕉精灵 js 动画（正向/反向和淡入淡出）

javascript - 带有 json 数据的香蕉精灵 js 动画（正向/反向和淡入淡出）

问题描述

我正在开发一个自定义滚动动画框架。我可以通过一团 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>

标签： javascriptjqueryanimation

解决方案

恕我直言，存在一些概念性问题：您拥有移动对象fadein的fadeout动画。并不是说这是不可能的，而且我根据我对您想要实现的目标的理解做出了“修复”动画的更改，但这使得move动画操作有点多余。就 API 而言，将动画中的所有内容编码到单个转换描述符中似乎更有意义，例如第一个是：

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

我没有改变它，但为了在淡入时移动，我必须在两者之后应用 movefadein和fadeout。这使他们有效地fadeinandmove和fadeoutandmove。

我所做的另一个更改是设置的初始不透明度，否则，当不透明度达到 100% 时，您开始淡入。

这是您的代码段的一个分支：https ://jsfiddle.net/5hxg02d3/

祝你的框架好运！

编辑：正如您正确注意到的那样，快速来回移动会破坏序列。如果我慢慢拖动，而不是来回滚动，淡入淡出确实会达到零，所以我相信你指的是同样的效果。发生这种情况是由于我之前提出的 API 一致性问题。快速滚动移动允许动画从第 1 帧跳转到第 3 帧或 vv 从第 3 帧跳转到第 1 帧，甚至超出动画范围（低于 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。我建议尝试自己实现这一点，因为这是一个简单的练习，有助于提高你的理解。

推荐阅读