使用不透明度在用户上滚动的SVG路径按顺序动画

Question

我已经构建了一个SVG，我想要动画，它有三个部分/图层，每个图层都有预定义的路径数量。

SVG是一个圆形标志类型的东西，在圆的顶部有单词，在剩余空间周围有破折号，然后键入圆的中间。

喜欢这一点，但更简单： http://pixelcurse.com/wp-content/uploads/2015/11/logo-badges-8.jpg

我想要做的是这样的：SVG的

1. 设置不透明度为0它进入视前
2. 检测时，SVG开始进入视口
3. 根据滚动位置（向下滚动）顺序更改前两个<g>块中每个路径的不透明度
4. 当向上滚动顺序颠倒

我一直在试图与什么，但未能做到这两天打开和关闭。我成功地使用简单的jquery动画和css动画（请参阅下面的代码），但无法使用滚动位置播放这些动画。

我有另一个想法，但后来意识到这将是非常繁琐的，而不是相反的工作是有多个if/else基于滚动位置，但我不希望这有一个明确的数字，由于不同的决议，这将必须努力。

HTML：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve"> 
    <g id="mainsvg"> 
     <g id="top-circle-words"> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
     </g> 

     <g id="bot-circle-dashes"> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
     </g> 

     <g id="middle-words"> 
      <path/> 
      <path/> 
     </g> 
    </g> 
</svg> 

CSS - 动画尝试 - 作品，但无法控制的 - 只是起到负载：

svg {width:100%;max-width:50%;margin:50% auto;display:block;} 

@-webkit-keyframes animIn { 0% { opacity: 0; } 100% { opacity:1; } } 
@-webkit-keyframes animOut { 0% { opacity: 1; } 100% { opacity:0; } } 

.animIn { -webkit-animation: animIn 500ms 1.5s normal backwards; -webkit-animation-fill-mode: both; } 
.animOut { -webkit-animation: animOut 500ms 3s reverse backwards; -webkit-animation-fill-mode: both; } 

g#top-circle-words path:nth-child(1) { -webkit-animation-delay: 50ms } 
g#top-circle-words path:nth-child(2) { -webkit-animation-delay: 100ms } 
g#top-circle-words path:nth-child(3) { -webkit-animation-delay: 150ms } 
g#top-circle-words path:nth-child(4) { -webkit-animation-delay: 200ms } 
g#top-circle-words path:nth-child(5) { -webkit-animation-delay: 250ms } 
g#top-circle-words path:nth-child(6) { -webkit-animation-delay: 300ms } 
g#top-circle-words path:nth-child(7) { -webkit-animation-delay: 350ms } 
g#top-circle-words path:nth-child(8) { -webkit-animation-delay: 400ms } 
g#top-circle-words path:nth-child(9) { -webkit-animation-delay: 450ms } 
g#top-circle-words path:nth-child(10) { -webkit-animation-delay: 500ms } 

g#bot-circle-dashes path:nth-child(1) {-webkit-animation-delay: 550ms } 
g#bot-circle-dashes path:nth-child(2) {-webkit-animation-delay: 600ms } 
g#bot-circle-dashes path:nth-child(3) {-webkit-animation-delay: 650ms } 
g#bot-circle-dashes path:nth-child(4) {-webkit-animation-delay: 700ms } 
g#bot-circle-dashes path:nth-child(5) {-webkit-animation-delay: 750ms } 
g#bot-circle-dashes path:nth-child(6) {-webkit-animation-delay: 800ms } 
g#bot-circle-dashes path:nth-child(7) {-webkit-animation-delay: 850ms } 
g#bot-circle-dashes path:nth-child(8) {-webkit-animation-delay: 900ms } 
g#bot-circle-dashes path:nth-child(9) {-webkit-animation-delay: 1s } 
g#bot-circle-dashes path:nth-child(10) {-webkit-animation-delay: 1.1s } 
g#bot-circle-dashes path:nth-child(11) {-webkit-animation-delay: 1.2s } 

g#middle-words {-webkit-animation-delay: 300ms; -webkit-animation-duration: 2s} 

JS - 期运用。每（）;

$("g#top-circle-words path, g#bot-circle-dashes path").each(function(index) { 
    $(this).delay(20*index).animate({opacity: 1}, 50); 
}); 

$("g#middle-words").delay(50).animate({opacity: 1}, 500); 

所以，如果你把上面的代码，它应该工作，这是它的控制，我不能得到正确的？您可以使用CSS查看，如果您将.animIn类手动添加到您想要在不使用JQ的情况下进行动画的所有元素，也可以使用。

我发现就在这里另一篇文章所述OP是具有类似的问题（有点）作为我，我努力去适应这是标记为正确的代码，但无法得到，要么工作？

$(function() { 
    var prevRange = -1; 
    var range = -1; 

    $(document).on('scroll', function() { 
     var top = $(document).scrollTop();  
     if (top >= 2200 && top < 2401) { 
      range = Math.floor(top/10)-220; 
     } else { 
      range = -1; 
     } 

     if(range != prevRange) { 
      prevRange = range; 
      var leftPx = (826 - range*5) + "px"; 
      $('path').stop().animate({left: leftPx}, 300, "easeOutQuad"); 
     } 
    }); 
}); 

另外这是我写的，但我可以看到这是有，如果我使用多个IF语句工作疼痛：

// $(document).ready(function() { 
// $(window).scroll(function() { 
//  if ($(this).scrollTop() > 100){ 
//   $('g#top-circle-words path:nth-child(1)').css({ 'opacity': '.5' }); 
//  } 
//  else { 
//   $('path').css({ 
//    'opacity': '.9', 
//    "border": "0" 
//   }); 
//  } 
//  console.log($(document).scrollTop()); 
// }); 
// }); 

任何人都可以请帮我这 - 在做我的大脑在 - 道歉，因为我还在学习JS和JQ，所以如果有人可以建议我采取正确的方向或提供一些解释的见解，我会很感激。

Answer 1

如果您有需要，我建议您使用ScrollMagic和GSAP。

这应该是正确的设置，但可能需要进行调整取决你的具体SVG：

var tween = TweenMax.fromTo("path", 1, { opacity: 0 }, { opacity: 1 }); 
var scene = new ScrollMagic.Scene({triggerElement: "#mySvg" }) 
       .setTween(tween) 
       .addIndicators({name: "tween css class"}) // add indicators (requires plugin) 
       .addTo(controller);