我有一个从教程修改的脚本，当包含DIV出现时（使用inview.js），该脚本可以对SVG笔画进行动画处理。我添加了一个TweenLite动画，将svg填充不透明度从0更改为1。问题是我的添加并不关心是否在视图中包含了DIV（我正在使用getElementsByClassName定位SVG元素）。
仅在查看包含DIV的情况下，如何才能通过类名称定位元素？我猜我需要在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();
//};
});
最佳答案
我认为一个非常快速的解决方案可能是在document函数中用parentElement替换startSVGAnimation的所有实例。
因此，您的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);
}
希望这可以帮助。
关于javascript - SVG和TweenLite-在父级中选择类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31409657/