Create an animated sequence of dots connecting together in a dotted path, with each

Question

Create an animated sequence of dots connecting together in a dotted path, with each

Currently, I am utilizing the most recent edition of Snap.svg to sketch and animate a path within an SVG:

var s = Snap('#svg');
var getPath = s.path('M15 15L115 115');
var pathLength = getPath.getTotalLength();
getPath.attr({
  stroke: '#000',
  strokeWidth: 5,
  strokeDasharray: pathLength + ' ' + pathLength,
  strokeDashoffset: pathLength,
  strokeLinecap: 'round'
}).animate({
  strokeDashoffset: 0
}, 1500);

Although it is functioning correctly (as evident in this demonstration), my objective is to transform it into a dotted line with each dot animated sequentially.

To illustrate the desired appearance, I created a simple prototype using circles (available for viewing here), but ideally, I would like to implement this effect using a custom path.

In essence, I am seeking a method to animate a complex dotted path; achieving a similar effect as dots along a path or custom attributes on a path.

javascript animation svg snap.svg

Answer 1

Answer №1

When working with stroke-dasharray as an array of values, it is possible to keep the stroke-dashoffset at 0 and continuously update the stroke-dasharray until reaching the end of the line. While the following example may not be perfectly smooth or optimized, it demonstrates this concept:

var s = Snap('#svg');
var getPath = s.path('M15 15L115 115');
var pathLength = getPath.getTotalLength();

var perc = 0;
var dotLength = 5;
var gapLength = 4;

getPath.attr({
    stroke: '#000',
    strokeWidth: 1,
    strokeDasharray: 0,
    strokeDashoffset: 0,
    strokeLinecap: 'round'
});

function updateLine(){
 perc +=1;
    if(perc>100){
        perc = 100;
    }
var visibleLength = pathLength*perc/100;
var drawnLength = 0;
    var cssValue = '';
    while(drawnLength < visibleLength){
     drawnLength += dotLength;
        if(drawnLength < visibleLength){
            cssValue += dotLength+ ' ';
            drawnLength += gapLength;
            if(drawnLength < visibleLength){
                cssValue += gapLength+ ' ';
            }
        }else{
            cssValue += (visibleLength + dotLength - drawnLength)+ ' ';
        }
    }
    cssValue += pathLength;
    if (perc<100){
     setTimeout(updateLine, 100);
    }
    getPath.attr({
        strokeDasharray: cssValue
    });
}

updateLine();

http://jsfiddle.net/EEe69/7/

If you prefer to exclude the gaps from the animation, simply subtract their lengths from the total path length.

Answer 2

When working with stroke-dasharray as an array of values, it is possible to keep the stroke-dashoffset at 0 and continuously update the stroke-dasharray until reaching the end of the line. While the following example may not be perfectly smooth or optimized, it demonstrates this concept:

var s = Snap('#svg');
var getPath = s.path('M15 15L115 115');
var pathLength = getPath.getTotalLength();

var perc = 0;
var dotLength = 5;
var gapLength = 4;

getPath.attr({
    stroke: '#000',
    strokeWidth: 1,
    strokeDasharray: 0,
    strokeDashoffset: 0,
    strokeLinecap: 'round'
});

function updateLine(){
 perc +=1;
    if(perc>100){
        perc = 100;
    }
var visibleLength = pathLength*perc/100;
var drawnLength = 0;
    var cssValue = '';
    while(drawnLength < visibleLength){
     drawnLength += dotLength;
        if(drawnLength < visibleLength){
            cssValue += dotLength+ ' ';
            drawnLength += gapLength;
            if(drawnLength < visibleLength){
                cssValue += gapLength+ ' ';
            }
        }else{
            cssValue += (visibleLength + dotLength - drawnLength)+ ' ';
        }
    }
    cssValue += pathLength;
    if (perc<100){
     setTimeout(updateLine, 100);
    }
    getPath.attr({
        strokeDasharray: cssValue
    });
}

updateLine();

http://jsfiddle.net/EEe69/7/

If you prefer to exclude the gaps from the animation, simply subtract their lengths from the total path length.

Answer 3

Answer №2

Have you considered utilizing d3 for this task?

I came across a similar example that involves a dotted line and responds to mouse movements. While I tried implementing a timed function to achieve your desired outcome, I believe with some tinkering, you'll be able to crack it yourself :)

Take a look at this section and try modifying it to create a specific path instead of relying on d3.mouse:

d3.timer(function(step) {
    var svgupdate = d3.select("body").select("svg")
        .on("mousemove", function() { var point = d3.mouse(this); customPath(point); });
});

Answer 4

Have you considered utilizing d3 for this task?

I came across a similar example that involves a dotted line and responds to mouse movements. While I tried implementing a timed function to achieve your desired outcome, I believe with some tinkering, you'll be able to crack it yourself :)

Take a look at this section and try modifying it to create a specific path instead of relying on d3.mouse:

d3.timer(function(step) {
    var svgupdate = d3.select("body").select("svg")
        .on("mousemove", function() { var point = d3.mouse(this); customPath(point); });
});

Create an animated sequence of dots connecting together in a dotted path, with each

Answer №1

Answer №2

Similar questions

The functionality of the bootstrap Dropdown multiple select feature is experiencing issues with the Onchange

Tips for fixing the error "TypeError: result.select is not a function" in a Node.JS, Express JS, and MongoDB application

Incrementing a textbox using Javascript/jQuery in ASP.Net

No matter the way I input the URL in the AJAX call, the response always comes back as successful

Grab the URL from React Router

Error: The method api.createContextKey is not defined while running the Next.js development server

Issue with receiving API response in AngularJS

How do I utilize Protractor to target a specific div element with a distinctive class and verify its visibility on the page?

Issues with login validation in HTML when utilizing JSON and PHP

Tips for binding to a single input box within an ngFor loop

Sizing of Info Windows for Google Map Markers

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Issue with data entry: unable to enter the letter 'S' in search field

Trouble connecting: MongoDB Node.js client hangs during connection attempt

The declaration file for the module 'react-tilt' was not located

Data retrieval issue with ng-table displaying information queried from HTTP request

Switch between class and slider photos

Selecting the right <select> option in Vue 2 once the data has been retrieved from the database

Issue with displaying dates correctly on Chart.js and axis labels not being rendered as expected

Overlap of columns within a nested flexbox arrangement