javascript - SVG 和 TweenLite - 在父级中选择类

Question

我有一个根据教程修改的脚本，当包含的 DIV 进入 View 时(使用 inview.js)，该脚本可以对 SVG 笔画进行动画处理。我添加了一个 TweenLite 动画，将 svg 填充不透明度从 0 更改为 1。问题是我的添加并不关心包含的 DIV 是否在 View 中(我使用 getElementsByClassName 来定位 SVG 元素)。

仅当包含的 DIV 位于 View 中时，如何才能通过类名定位元素？我想我需要在 TweenLite 行中使用“parentElement”，但我不知道如何使用。

我修改了 svglines.js 中的一个函数(drawSVGPaths 之后的所有内容):

function replaceRectsWithPaths(parentElement) {
var rects = $(parentElement).find('rect');
$.each(rects, function() {
    var rectX = $(this).attr('x');
    var rectY = $(this).attr('y');
    var rectX2 = parseFloat(rectX) + parseFloat($(this).attr('width'));
    var rectY2 = parseFloat(rectY) + parseFloat($(this).attr('height'));
    var convertedPath = 'M' + rectX + ',' + rectY + ' ' + rectX2 + ',' + rectY + ' ' + rectX2 + ',' + rectY2 + ' ' + rectX + ',' + rectY2 + ' ' + rectX + ',' + rectY;
    $(SVG('path'))
    .attr('d', convertedPath)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);
});
$(rects).remove();
}
function replaceLinesWithPaths(parentElement) {
var lines = $(parentElement).find('line');
$.each(lines, function() {
    var lineX1 = $(this).attr('x1');
    var lineY1 = $(this).attr('y1');
    var lineX2 = $(this).attr('x2');
    var lineY2 = $(this).attr('y2');
    var convertedPath = 'M' + lineX1 + ',' + lineY1 + ' ' + lineX2 + ',' + lineY2;
    $(SVG('path'))
    .attr('d', convertedPath)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);
});
$(lines).remove();
}
function replaceCirclesWithPaths(parentElement) {
var circles = $(parentElement).find('circle');
$.each(circles, function() {
    var cX = $(this).attr('cx');
    var cY = $(this).attr('cy');
    var r = $(this).attr('r');
    var r2 = parseFloat(r * 2);
    var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-r) + ', 0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + r2 + ',0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + (-r2) + ',0 ';
    $(SVG('path'))
    .attr('d', convertedPath)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);
});
$(circles).remove();
}
function replaceEllipsesWithPaths(parentElement) {
var ellipses = $(parentElement).find('ellipse');
$.each(ellipses, function() {
    var cX = $(this).attr('cx');
    var cY = $(this).attr('cy');
    var rX = $(this).attr('rx');
    var rY = $(this).attr('ry');
    var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-rX) + ', 0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + rX*2 + ',0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + (-rX*2) + ',0 ';
    $(SVG('path'))
    .attr('d', convertedPath)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);
});
$(ellipses).remove();
}
function replacePolygonsWithPaths(parentElement) {
var polygons = $(parentElement).find('polygon');
$.each(polygons, function() {
    var points = $(this).attr('points');
    var polyPoints = points.split(/[ ,]+/);
    var endPoint = polyPoints[0] + ', ' + polyPoints[1];
    $(SVG('path'))
    .attr('d', 'M' + points + ' ' + endPoint)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);
});
$(polygons).remove();
}
function replacePolylinesWithPaths(parentElement) {
var polylines = $(parentElement).find('polyline');
$.each(polylines, function() {
    var points = $(this).attr('points');
    $(SVG('path'))
    .attr('d', 'M' + points)
    .attr('fill', $(this).attr('fill'))
    .attr('stroke', $(this).attr('stroke'))
    .attr('stroke-width', $(this).attr('stroke-width'))
    .insertAfter(this);
});
$(polylines).remove();
}
function hideSVGPaths(parentElement) {
var paths = $(parentElement).find('path');
//for each PATH..
$.each( paths, function() {
    //get the total length
    var totalLength = this.getTotalLength();
    //set PATHs to invisible
    $(this).css({
        'stroke-dashoffset': totalLength,
        'stroke-dasharray': totalLength + ' ' + totalLength
    });
});
}
function drawSVGPaths(_parentElement, _timeMin, _timeMax, _timeDelay) {
var paths = $(_parentElement).find('path');
//for each PATH..
$.each( paths, function(i) {
    //get the total length
    var totalLength = this.getTotalLength();
    //set PATHs to invisible
    $(this).css({
        'stroke-dashoffset': totalLength,
        'stroke-dasharray': totalLength + ' ' + totalLength
    });
    //animate
    $(this).delay(_timeDelay*i).animate({
        'stroke-dashoffset': 0
    }, {
        duration: Math.floor(Math.random() * _timeMax) + _timeMin
        ,easing: 'easeInOutQuad'
    });
});
}
function replaceWithPaths(parentElement) {
replaceRectsWithPaths(parentElement);
replaceLinesWithPaths(parentElement);
replaceEllipsesWithPaths(parentElement);
replaceCirclesWithPaths(parentElement);
replacePolygonsWithPaths(parentElement);
replacePolylinesWithPaths(parentElement);    
}
function startSVGAnimation(parentElement) {
drawSVGPaths(parentElement, 500, 500, 300);
var svgWork = document.getElementsByClassName('svgWork');
TweenLite.to(svgWork, 1, {attr:{"fill-opacity":1}}).delay(1);
var svgServices = document.getElementsByClassName('svgServices');
TweenLite.to(svgServices, 1, {attr:{"fill-opacity":1}}).delay(2.5);
var svgCalc = document.getElementsByClassName('svgCalc');
TweenLite.to(svgCalc, 1, {attr:{"fill-opacity":1}}).delay(3);
var svgTeam = document.getElementsByClassName('svgTeam');
TweenLite.to(svgTeam, 1, {attr:{"fill-opacity":1}}).delay(1.5);
var svgWorkforus = document.getElementsByClassName('svgWorkforus');
TweenLite.to(svgWorkforus, 1, {attr:{"fill-opacity":1}}).delay(2);

}
$(function() {
//if (!Modernizr.touch) {
    var animated = $('.js-animate');
    replaceWithPaths(animated);
    hideSVGPaths(animated);
    $(document).scroll(function() {
        $(animated).each(function(i) {
            if( $(this).visible() ) {
                startSVGAnimation(this);
                animated.splice(i,1);
            };
        });
    });
    $(document).scroll();
//};
});

Answer 1

我认为一个非常快速的修复方法可以是在 startSVGAnimation 函数中用 parentElement 替换 document 的所有实例。

所以你的 startSVGAnimation 看起来像:

function startSVGAnimation(parentElement){
    drawSVGPaths(parentElement, 500, 500, 300);
    var svgWork = parentElement.getElementsByClassName('svgWork');
    TweenLite.to(svgWork, 1, {attr:{"fill-opacity":1}}).delay(1);
    var svgServices = parentElement.getElementsByClassName('svgServices');
    TweenLite.to(svgServices, 1, {attr:{"fill-opacity":1}}).delay(2.5);
    var svgCalc = parentElement.getElementsByClassName('svgCalc');
    TweenLite.to(svgCalc, 1, {attr:{"fill-opacity":1}}).delay(3);
    var svgTeam = parentElement.getElementsByClassName('svgTeam');
    TweenLite.to(svgTeam, 1, {attr:{"fill-opacity":1}}).delay(1.5);
    var svgWorkforus = parentElement.getElementsByClassName('svgWorkforus');
    TweenLite.to(svgWorkforus, 1, {attr:{"fill-opacity":1}}).delay(2);
}

希望这有帮助。