Fatal编程技术网
  • javascript/
  • Javascript SVG动画：滚动条上沿路径的对象

Javascript SVG动画：滚动条上沿路径的对象

javascript html css svg

Javascript SVG动画：滚动条上沿路径的对象,javascript,html,css,svg,Javascript,Html,Css,Svg,我已经创建了一个SVG动画：沿着滚动路径的对象 <circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/> <circle r="2" id="dot" cy="-5" cx="0" fill="red" fill-opacity=".96" fill-rule="evenod

我已经创建了一个SVG动画：沿着滚动路径的对象

    <circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
    <circle r="2" id="dot" cy="-5" cx="0"  fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>

    <path id="c" d="M174.093 22.89a.384.384 0 0 0-.148.037l-.921.437-.002-.009a.113.113 0 0 0-.151-.054l-.978.463a.113.113 0 0 0-.054.151l.005.007-1.049.497a.384.384 0 0 0-.183.512l2.25 4.747c.066.14.205.22.35.219-.056.058-.101.15-.04.28l1.395 2.942-.498-.03a.134.134 0 0 0-.016.267l.644.04.602 1.27c.25.527.874.75 1.4.5l.346-.164a.113.113 0 0 0 .155.14l.978-.463a.113.113 0 0 0-.01-.209l.346-.164c.527-.249.75-.874.5-1.4l-.68-1.437.439-.45a.133.133 0 0 0-.003-.189.133.133 0 0 0-.19.002l-.369.379-1.306-2.757c-.069-.155-.164-.195-.25-.193a.382.382 0 0 0 .048-.404l-2.248-4.747a.384.384 0 0 0-.363-.22z" fill="#1a1a1a" fill-rule="evenodd"/>
</svg>
请检查下面的代码和代码笔演示

    <circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
    <circle r="2" id="dot" cy="-5" cx="0"  fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>

    <path id="c" d="M174.093 22.89a.384.384 0 0 0-.148.037l-.921.437-.002-.009a.113.113 0 0 0-.151-.054l-.978.463a.113.113 0 0 0-.054.151l.005.007-1.049.497a.384.384 0 0 0-.183.512l2.25 4.747c.066.14.205.22.35.219-.056.058-.101.15-.04.28l1.395 2.942-.498-.03a.134.134 0 0 0-.016.267l.644.04.602 1.27c.25.527.874.75 1.4.5l.346-.164a.113.113 0 0 0 .155.14l.978-.463a.113.113 0 0 0-.01-.209l.346-.164c.527-.249.75-.874.5-1.4l-.68-1.437.439-.45a.133.133 0 0 0-.003-.189.133.133 0 0 0-.19.002l-.369.379-1.306-2.757c-.069-.155-.164-.195-.25-.193a.382.382 0 0 0 .048-.404l-2.248-4.747a.384.384 0 0 0-.363-.22z" fill="#1a1a1a" fill-rule="evenodd"/>
</svg>
HTML

    <circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
    <circle r="2" id="dot" cy="-5" cx="0"  fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>

    <path id="c" d="M174.093 22.89a.384.384 0 0 0-.148.037l-.921.437-.002-.009a.113.113 0 0 0-.151-.054l-.978.463a.113.113 0 0 0-.054.151l.005.007-1.049.497a.384.384 0 0 0-.183.512l2.25 4.747c.066.14.205.22.35.219-.056.058-.101.15-.04.28l1.395 2.942-.498-.03a.134.134 0 0 0-.016.267l.644.04.602 1.27c.25.527.874.75 1.4.5l.346-.164a.113.113 0 0 0 .155.14l.978-.463a.113.113 0 0 0-.01-.209l.346-.164c.527-.249.75-.874.5-1.4l-.68-1.437.439-.45a.133.133 0 0 0-.003-.189.133.133 0 0 0-.19.002l-.369.379-1.306-2.757c-.069-.155-.164-.195-.25-.193a.382.382 0 0 0 .048-.404l-2.248-4.747a.384.384 0 0 0-.363-.22z" fill="#1a1a1a" fill-rule="evenodd"/>
</svg>


    <circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
    <circle r="2" id="dot" cy="-5" cx="0"  fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>

    <path id="c" d="M174.093 22.89a.384.384 0 0 0-.148.037l-.921.437-.002-.009a.113.113 0 0 0-.151-.054l-.978.463a.113.113 0 0 0-.054.151l.005.007-1.049.497a.384.384 0 0 0-.183.512l2.25 4.747c.066.14.205.22.35.219-.056.058-.101.15-.04.28l1.395 2.942-.498-.03a.134.134 0 0 0-.016.267l.644.04.602 1.27c.25.527.874.75 1.4.5l.346-.164a.113.113 0 0 0 .155.14l.978-.463a.113.113 0 0 0-.01-.209l.346-.164c.527-.249.75-.874.5-1.4l-.68-1.437.439-.45a.133.133 0 0 0-.003-.189.133.133 0 0 0-.19.002l-.369.379-1.306-2.757c-.069-.155-.164-.195-.25-.193a.382.382 0 0 0 .048-.404l-2.248-4.747a.384.384 0 0 0-.363-.22z" fill="#1a1a1a" fill-rule="evenodd"/>
</svg>
JS

    <circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
    <circle r="2" id="dot" cy="-5" cx="0"  fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>

    <path id="c" d="M174.093 22.89a.384.384 0 0 0-.148.037l-.921.437-.002-.009a.113.113 0 0 0-.151-.054l-.978.463a.113.113 0 0 0-.054.151l.005.007-1.049.497a.384.384 0 0 0-.183.512l2.25 4.747c.066.14.205.22.35.219-.056.058-.101.15-.04.28l1.395 2.942-.498-.03a.134.134 0 0 0-.016.267l.644.04.602 1.27c.25.527.874.75 1.4.5l.346-.164a.113.113 0 0 0 .155.14l.978-.463a.113.113 0 0 0-.01-.209l.346-.164c.527-.249.75-.874.5-1.4l-.68-1.437.439-.45a.133.133 0 0 0-.003-.189.133.133 0 0 0-.19.002l-.369.379-1.306-2.757c-.069-.155-.164-.195-.25-.193a.382.382 0 0 0 .048-.404l-2.248-4.747a.384.384 0 0 0-.363-.22z" fill="#1a1a1a" fill-rule="evenodd"/>
</svg>

#route {
  margin-top: 200px;
}

.code {
  height:150px;
  width:250px;
  background:#000;
  color:#fff;
  margin:20px;
  width: 40%;
  clear: both;
  height: 200px;
  background: #000;
  border-radius: 2px;
  margin: 100vh 0;
  padding: 10px;
}

$(document).ready(function(){           
    $(window).scroll(function() {
        drawLine( $('#bx_a'),document.getElementById('path') );
        positionTheDot();
        //positionCar();            
    });

    // init the line length
    drawLine( $('#bx_a'),document.getElementById('path') );
    positionTheDot();       
    //positionCar();

    function positionTheDot() {
    // What percentage down the page are we? 
    var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    // Get path length
    var path = document.getElementById("path");
    var pathLen = path.getTotalLength();
    // Get the position of a point at <scrollPercentage> along the path.
    var pt = path.getPointAtLength(scrollPercentage * pathLen);
    var  scrollY = window.scrollY || window.pageYOffset;
    var  maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
   var  path = document.getElementById("path");
   // Calculate distance along the path the car should be for the current scroll amount
   var  pathLen = path.getTotalLength();
   var  dist = pathLen * scrollY / maxScrollY;
   var  pos = path.getPointAtLength(dist);
   // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
   if (dist + 1 <= pathLen) {
    var  posAhead = path.getPointAtLength(dist + 1);
    var  angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
   } else {
    var  posBehind = path.getPointAtLength(dist - 1);
    var  angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
   }

   // Position the red dot at this point
   var dot = document.getElementById("dot");          
   dot.setAttribute("transform", "translate("+ pt.x + "," + (pt.y+5) + ")");        
   var  car = document.getElementById("c");
   car.setAttribute("transform", "translate(" + (pt.x-171) + "," + (pt.y-21) + ")");
   //car.setAttribute("transform", "translate(" + (pt.x-171) + "," + (pt.y) + ") rotate(" + (rad2deg(angle)) + ")");
   };

   //draw the line
   function drawLine(container, line) {
    var pathLength = line.getTotalLength(),
    maxScrollTop = $(document).height() - $(window).height(),
    percentDone = $(window).scrollTop() / maxScrollTop,
    length = percentDone * pathLength;
    line.style.strokeDasharray = [ length,pathLength].join(' ');
   }

   function positionCar() {
    var  scrollY = window.scrollY || window.pageYOffset;
    var  maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
    var  path = document.getElementById("path");
    // Calculate distance along the path the car should be for the current scroll amount
    var  pathLen = path.getTotalLength();
    var  dist = pathLen * scrollY / maxScrollY;
    var  pos = path.getPointAtLength(dist);
    // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
    if (dist + 1 <= pathLen) {
        var  posAhead = path.getPointAtLength(dist + 1);
        var  angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
    } else {
        var  posBehind = path.getPointAtLength(dist - 1);
        var  angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
    }
    // Position the car at "pos" totated by "angle"
    var  car = document.getElementById("c");
    car.setAttribute("transform", "translate(" + (pos.x) + "," + (pos.y) + ") rotate(" + (rad2deg(angle)) + ")");
    }

    function rad2deg(rad) {
        return 180 * rad / Math.PI;
    }    
});

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
绘图线（$（'#bx_a'），document.getElementById（'path'）；
定位点（）；
//定位卡（）；
});
//初始化行长度
绘图线（$（'#bx_a'），document.getElementById（'path'）；
定位点（）；
//定位卡（）；
函数positionTheDot（）{
//我们占页面的百分比是多少？
var scrollPercentage=（document.documentElement.scrollTop+document.body.scrollTop）/（document.documentElement.scrollHeight-document.documentElement.clientHeight）；
//获取路径长度
var path=document.getElementById（“路径”）；
var pathLen=path.getTotalLength（）；
//沿路径获取点的位置。
var pt=path.getPointAtLength（滚动百分比*路径长度）；
var scrollY=window.scrollY | | window.pageYOffset；
var maxScrollY=document.documentElement.scrollHeight-window.innerHeight；
var path=document.getElementById（“路径”）；
//根据当前滚动量计算车辆应沿路径行驶的距离
var pathLen=path.getTotalLength（）；
var dist=pathLen*scrollY/maxScrollY；
var pos=路径getPointAtLength（距离）；
//计算汽车前面一点的位置（如果我们在终点，则计算后面），以便计算汽车角度

如果（dist+1问题是旋转中心和初始角度。目前，汽车的初始位置应使其旋转中心位于（171,21）。您可以从将该点转换为（0,0）开始，然后将其旋转-65度，使其指向右侧。在这种情况下，更容易重写路径数据以合并这些转换：


    <circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
    <circle r="2" id="dot" cy="-5" cx="0"  fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>

    <path id="c" d="M174.093 22.89a.384.384 0 0 0-.148.037l-.921.437-.002-.009a.113.113 0 0 0-.151-.054l-.978.463a.113.113 0 0 0-.054.151l.005.007-1.049.497a.384.384 0 0 0-.183.512l2.25 4.747c.066.14.205.22.35.219-.056.058-.101.15-.04.28l1.395 2.942-.498-.03a.134.134 0 0 0-.016.267l.644.04.602 1.27c.25.527.874.75 1.4.5l.346-.164a.113.113 0 0 0 .155.14l.978-.463a.113.113 0 0 0-.01-.209l.346-.164c.527-.249.75-.874.5-1.4l-.68-1.437.439-.45a.133.133 0 0 0-.003-.189.133.133 0 0 0-.19.002l-.369.379-1.306-2.757c-.069-.155-.164-.195-.25-.193a.382.382 0 0 0 .048-.404l-2.248-4.747a.384.384 0 0 0-.363-.22z" fill="#1a1a1a" fill-rule="evenodd"/>
</svg>



d="M 3.02008,-2.00446 A 0.384,0.384 0 0 0 2.99106,-1.85469 L 2.99789,-0.835296 2.98889,-0.837286 A 0.113,0.113 0 0 0 2.87613,-0.723255 L 2.88243,0.358786 A 0.113,0.113 0 0 0 2.99646,0.471542 L 3.00492,0.469969 3.01203,1.63073 A 0.384,0.384 0 0 0 3.39872,2.01296 L 8.65185,1.97994 C 8.80663,1.97929 8.93788,1.88712 8.99825,1.75528 9.02715,1.83055 9.09151,1.91021 9.23511,1.90987 L 12.491,1.88891 12.2534,2.32758 A 0.134,0.134 0 0 0 12.4886,2.45492 L 12.797,1.88816 14.2024,1.87929 C 14.7857,1.87543 15.2515,1.40414 15.2473,0.821764 L 15.2448,0.438872 A 0.113,0.113 0 0 0 15.4372,0.357561 L 15.4309,-0.72448 A 0.113,0.113 0 0 0 15.2373,-0.803744 L 15.2349,-1.18664 C 15.2319,-1.76949 14.7597,-2.23574 14.1774,-2.23146 L 12.5876,-2.22247 12.3653,-2.81052 A 0.133,0.133 0 0 0 12.1927,-2.88767 0.133,0.133 0 0 0 12.1143,-2.71463 L 12.3018,-2.22003 9.25118,-2.20155 C 9.08154,-2.20452 9.00514,-2.13533 8.9706,-2.05654 A 0.382,0.382 45 0 0 8.62474,-2.27078 L 3.37245,-2.23957 A 0.384,0.384 0 0 0 3.01965,-2.00355 Z"




$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
绘图线（$（'#bx_a'），document.getElementById（'path'）；
定位点（）；
定位卡（）；
});
//初始化行长度
绘图线（$（'#bx_a'），document.getElementById（'path'）；
定位点（）；
定位卡（）；
函数positionTheDot（）{
//我们占页面的百分比是多少？
var scrollPercentage=（document.documentElement.scrollTop+document.body.scrollTop）/（document.documentElement.scrollHeight-document.documentElement.clientHeight）；
//获取路径长度
var path=document.getElementById（“路径”）；
var pathLen=path.getTotalLength（）；
//沿路径获取点的位置。
var pt=path.getPointAtLength（滚动百分比*路径长度）；
var scrollY=window.scrollY | | window.pageYOffset；
var maxScrollY=document.documentElement.scrollHeight-window.innerHeight；
var path=document.getElementById（“路径”）；
//根据当前滚动量计算车辆应沿路径行驶的距离
var pathLen=path.getTotalLength（）；
var dist=pathLen*scrollY/maxScrollY；
var pos=路径getPointAtLength（距离）；
//计算汽车前面一点的位置（如果我们在终点，则计算后面），以便计算汽车角度

如果（dist+1）工作正常……非常感谢您的时间和解决方案。+1同样如此