DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • How to Build a React Native Chat App for Android
  • Optimizing User Experience in React Native
  • A Guide To Eliminate Common Performance Issues in React Native App Development
  • Navigation in a React Native Web Application

Trending

  • Customer 360: Fraud Detection in Fintech With PySpark and ML
  • Teradata Performance and Skew Prevention Tips
  • Beyond Linguistics: Real-Time Domain Event Mapping with WebSocket and Spring Boot
  • How AI Agents Are Transforming Enterprise Automation Architecture
  1. DZone
  2. Coding
  3. JavaScript
  4. SVG-Path Animation in React Native

SVG-Path Animation in React Native

By 
Nitish Prasad user avatar
Nitish Prasad
·
Updated Jul. 06, 20 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
9.4K Views

Join the DZone community and get the full member experience.

Join For Free

Program Statement: Designing mesmerizing, interactive timeline for the user’s weight loss journey.

For the past few months, we are working on a health app that helps users in their weight loss journey. Here we call it more of a Wellness Journey. This app keeps track of your weight, your inches, water intake, and of course your calories. We are creating a platform that acts as a personal assistant in their journey. Lately, our users have been asking us for a feature in the app where they can view their entire journey i.e what was their weight when they started, and how things progressed along the weeks, their major achievements (things like the 1st pound lost, after a month and so on….). So we decided to give it a go. Read along to see what we came up with.

Solution: After brainstorming with UX designer, UI designer, and fellow developers, and discussing multiple approaches from a simple listing to complex timelines we finally settled on the one which had maximum opportunity for micro-interactions, animation, and user engagement.

The idea was to show the weight loss journey to a user, quite symbolic of the journey on the road which can have milestones in between based on the achievements the user has attained. A path that will be laid out in front of the user and then will be filled accordingly to the point where the user has reached a particular point in the duration of the program.

Below is the final implementation of the feature in our app.


 

I am only going to cover the animating path in this blog and other animation and interaction in the next one.

Step 1

Drawing leader line

Leader Line is the centerline (dotted line in the above video) which is equidistant from the inner and outer contour line.

This is the simplest part of this animation. We have to draw a series of connected horizontal lines and semicircles.

final path

The above illustration explains how we draw in SVG. You can read more about SVG paths here. The negative sign in horizontal lines means we want our lines drawn from right to left. Arcs in SVG require extra attention.

Arcs accept parameters as 'RX', 'ry', 'x-axis rotation', 'large arc flag', 'sweep flag', 'finalX', 'finalY'. As we are drawing a semicircle, we don’t need an 'x-axis rotation flag' and 'large arc flag'. 'Sweep flag' determines which side we want to draw. 1 means the positive side and 0 mean the negative side. To know more about SVG arc check this link.

Java
 




x
27


 
1
export function getPath(month, line) {
2
    let fullPath = 'M90 100';
3
    const forwardLine = 'l${line.width} 0';
4
    const backwardLine = 'l${-line.width} 0';
5
    const leftCurve = 'a${line.radius} ${line.radius} 0 0 0 0 ${line.radius * 2}';
6
    const rightCurve = 'a${line.radius} ${line.radius} 0 0 1 0 ${
7
    line.radius * 2
8
    }';
9
    
10
    for (let i = 0; i < month; ++i) {
11
        if (i % 2 == 0) {
12
            fullPath += '${forwardLine} ${rightCurve}';
13
        } else {
14
            fullPath += '${backwardLine} ${leftCurve}';
15
        }
16
    }
17

          
18
    return fullPath;
19
}
20
.
21
. App.js
22
.
23
this.granularity = 5;this.leaderLineProperty = {
24
     lineWidth: width - 180,
25
      radius: 50,
26
};
27
this.path = PathHelper.getPath(this.month, PathHelper.LeaderPathProperty);


From the above line of code, we have our leader line ready.

Step 2

squiggly linesFor this step, I want you to stop and have a look at the animation video above. Our ultimate goal is to animate the path. For smooth animation, we have to break down into smaller segments and then attach them piece by piece.

line segments

To divide the leader line into smaller chunks we will use the SVG-path-properties library.

Java
 




xxxxxxxxxx
1
40


 
1
// path is our leader line svg, totalDays is the no of segments we have divided our lines into radius is distance between leader line and outer, inner line
2
getPathProperty(path, totalDays, radius) {
3
      const pathProperty = new svgPathProperties(path);
4
      const pathSegmentArray = [];
5

          
6
    let {
7
        x:
8
        previousX, y:previousY
9
    } = pathProperty.getPropertiesAtLength(0);
10

          
11
    for (let i = 1; i <= totalDays; ++i) {
12
         const leaderSegment = (i / totalDays) *  
13
                                pathProperty.getTotalLength();
14

          
15
      const{ x:lx, y:ly
16
           } =pathProperty.getPropertiesAtLength(leaderSegment);
17

          
18
      const diffX = lx - previousX;
19
      const diffY = ly - previousY;
20
      previousX = lx;
21
      previousY = ly;
22

          
23
      const angleForOuterContourLine = Math.atan2(diffY, diffX);
24
      const angleForInnerContourLine = Math.PI - 
25
                                       angleForOuterContourLine;
26

          
27
      const ox = lx + radius * Math.sin(angleForOuterContourLine);
28
      const oy = ly - radius * Math.cos(angleForOuterContourLine);
29
      const ix = lx - radius * Math.sin(angleForInnerContourLine);
30
      const iy = ly - radius * Math.cos(angleForInnerContourLine);
31

          
32
      const point = {
33
           outer: {x:  ox, y:oy },
34
           leader:{x:  lx, y:ly },
35
           inner: {x:  ix, y:iy },
36
        };        pathSegmentArray.push(point);
37
    }
38

          
39
    return pathSegmentArray;
40
}



Suppose the height of the road is 20pt. Then to make a close path from a single line we need an outer and inner line having 10 points distance from the leader line each. In the above lines of codes, we get points for the leader line directly. Now we have to calculate the same for the inner and outer line.

Another point of significance that I would like to mention here is that we just can’t subtract or add 10 to the leader lines to get our outer and the inner path without considering direction.

trig

Just like vectors, we will also use direction here and for this, we will use our old friend ‘Trigonometry’. We will get two points on the leader line and find the angle between the line formed by the last two points and the x-axis.

If you have two points, (x0, y0) and (x1, y1), then the angle of the line joining them (relative to the X-axis) is given by:

theta = atan2((y1 – y0), (x1 – x0)) 

We know tanθ = Perpendicular / Base = (Difference in height)/(Difference in width). We can calculate θ by using the formula for the tan inverse. After calculating angle we calculate x and y position as:

Δx = radius * sin(θ)

Δy = radius * cos(θ)

radius

Step 3

Now since we have coordinates for the inner and outer path, we need to translate them into a closed SVG path to form our road. Here D3 library comes to our rescue. We use the d3-shapes’ “area” method to get our path.

Java
 




xxxxxxxxxx
1
45


 
1
// progress is a no. between 0 to totalDays and 'pathSegment' is an object containing our inner and outer path segmentsexport const calculateProgressArea = (progress, pathSegment) => {
2
        const forwardArray = [];
3
        const backwardArray = [];
4

          
5
        let point = pathSegment[0];
6
        forwardArray.push(point.outer);
7
        backwardArray.push(point.inner);
8

          
9
        for (let i = 1; i < progress; ++i) {
10
         point = pathSegment[i];
11
         forwardArray.push(point.outer);
12
         backwardArray.push(point.inner);
13
        }
14

          
15
        backwardArray.reverse();
16
        const allPoint = [...forwardArray, ...backwardArray, forwardArray[0]];
17

          
18
        const area = d3
19
            .area()
20
            .x1((x) => {
21
            return x.x;
22
            })
23
            .y1((y) => {
24
            return y.y;
25
            })
26
            .y0(allPoint[0].y)
27
            .x0(allPoint[0].x);
28

          
29
        return area(allPoint);
30
};.
31
. In App.js
32
.this.area = PathHelper.calculateProgressArea(
33
                    this.totalDays,
34
                    this.pathSegmentArray,
35
                );.
36
. In render function
37
.<Svg style={{width: '100%', height: this.month * 100 + 120}}>       
38
      <Path
39
          d={this.area}
40
          stroke="none"
41
          strokeWidth={1}
42
          fill="#afafaf30"
43
          fillRule="evenodd"
44
        />
45
</Svg>



Please note that I am appending the Inner path point at the end of the Outer path point.

Step 4

Till now we have only laid down the solid block of the path. Now we have to animate the path as well. As I said earlier, for animating the path we will render pieces after pieces. By pieces, I meant we will take a small subset from the outer and inner path segment array and convert it into a path and render it.

arrays

Java
 




xxxxxxxxxx
1
15


 
1
addAnimationListener = () => {
2
    this.state.animation.addListener(({value}) => {
3
          const progress = value * this.totalDays;
4
          const path = PathHelper.calculateProgressArea(
5
          progress,
6
          this.pathSegmentArray,
7
          );
8

          
9
          if (this.progressPath) {
10
              this.progressPath.setNativeProps({
11
                d: path,
12
              });
13
          }
14
    });
15
};



Final output:-


React Native Arc (programming language) app React (JavaScript library) SVG Java (programming language) ANGLE (software) Data structure

Published at DZone with permission of Nitish Prasad. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • How to Build a React Native Chat App for Android
  • Optimizing User Experience in React Native
  • A Guide To Eliminate Common Performance Issues in React Native App Development
  • Navigation in a React Native Web Application

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!