2016-10-26 27 views
1

我已经构建了一个SVG,我想要动画,它有三个部分/图层,每个图层都有预定义的路径数量。使用不透明度在用户上滚动的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,所以如果有人可以建议我采取正确的方向或提供一些解释的见解,我会很感激。

回答

0

如果您有需要,我建议您使用ScrollMagicGSAP

这应该是正确的设置,但可能需要进行调整取决你的具体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); 
+1

感谢松弛聊天和上述回复@shshaw! 我得到它的工作使用以下代码: \t \t \t \t \t //建立吐温 \t \t \t \t \t变种吐温= TweenMax.staggerFromTo( “路径”,2,{ \t \t \t \t \t \t不透明度:0 \t \t \t \t \t},{ \t \t \t \t \t \t不透明度:1, \t \t \t \t \t \t易于:Back.easeOut \t \t \t \t \t},1); \t \t \t \t \t //建立场景 \t \t \t \t \t VAR场景=新ScrollMagic.Scene({ \t \t \t \t \t \t \t triggerElement: “#mainsvg”, \t \t \t \t \t \t \t持续时间:400 \t \t \t \t \t \t}) \t \t \t \t \t \t .setTween(吐温) \t \t \t \t \t \t .addIndicators({ \t \t \t \t \t \t \t名: “惊人” \t \t \t \t \t \t})//添加指标(需要插件) \t \t \t \t \t \t .addTo(controller); – PixelsPencil