Morphing SVG With react-spring

I have been attracted by the deformation effect since I was a child. Animation of shape changes always grabs my attention. The first time I saw the deformation effect made me wonder “Wow, how did they do it?” Since then, I have created a demo program and written an article about this effect.

There are many options when it comes to different animation libraries that support deformation. Many of them are good and offer a lot of features. Recently, I've been fascinated by react-spring. React-spring is a concise physical animation library built on React. Adam Rackis recently released a nice overview. This library has many features, including (and many others) SVG deformation. In fact, the beauty of react-spring is how it supports deformation. It allows you to deform directly in the tag that defines the SVG path descriptor. From a bookkeeping standpoint, this is great. SVG path descriptors are usually located where you expect them to be.

The following is a video of the content discussed in this article:

This is a deformation effect in an onboarding sequence. Here, it is used as a background effect. It is designed to complement the foreground animation; make it stand out more, rather than occupying the scene.

Create an SVG document

The first thing we have to do is create the underlying model. Usually, once I have a clear understanding of what I want to do, I create some kind of design. Most of my explorations start with the model and end with a demo. In most cases, this means creating an SVG document in my vector editor. I'm using Inkscape to draw my SVG.

When creating an SVG document, I use exact scale. I found it better to be precise. For me, it helps me perceive what I want to create when I use the same coordinate system as in the browser and code editor. For example, suppose you are about to create a 24px ✕ 30px SVG icon, including padding. The best way is to use the exact same size – a 24 pixel wide and 30 pixels tall SVG document. If the proportional result is incorrect, you can adjust it later at any time. In this sense, SVG is tolerant. It is scalable no matter what you do.

The SVG document we created is 256 pixels in width and 464 pixels in height.

Draw a model

When creating a model, we need to consider where the nodes are placed and how many nodes are used. This is very important. This is where we lay the foundation for animation. Modeling is the whole content of deformation. We have one set of nodes converted into another set of nodes. These node sets must have exactly the same number of nodes. Second, these sets should be associated in some way.

If the relationship between vector shapes is not carefully considered, the animation will be imperfect. Each node affects the animation. Their position and curvature must be just right. For more details on how nodes are constructed in SVG paths, see the explanation of the Bezier curve on MDN.

Secondly, we need to consider both shapes at the same time. One of the vectors may contain parts that cannot be found in the other vector. Alternatively, there may be other differences between the two models. For these cases, it is best to insert additional nodes in some places. It is best to develop a strategy. For example, this angle is there, this straight line expands into a curve, etc.

I have compiled a pen to illustrate the situation when the set is poorly correlated with accurate design. In the following example, the nodes in the deformation effect on the left are randomly placed. There is no relationship between the nodes that constitute numbers one and two. In the correct example, the placement of the nodes is planned more carefully. This brings a more coherent experience.

The first model

The Line Tool is the tool we use to draw the first vector shape. Since the model we created is more abstract, it is a little bit forgiving. We still need to consider position and curvature, but this allows for greater arbitraryness.

As for vectors and sizes, the same is true for creating deformation models. This is an iterative process. If the first time is incorrect, we can always go back and make adjustments. It usually takes one or two iterations to make the animation shine. Here is the finished model look.

The result is a smooth abstract SVG shape with eight nodes.

The second and third models

Once the first model is finished, the second model can be drawn (we can also treat it as a state ). This is the first set of shapes to which it will be deformed. This may be the final state, i.e. a single deformation effect. Or it could be a step along the way, like a keyframe. In the case we are looking at, there are three steps. Likewise, each model must be associated with the previous model. One way to ensure that the model matches is to create the second vector as a copy of the first vector. This way, we know that the model has the same number of nodes and the same appearance and feel.

Be careful with the editor. Vector editors are usually optimized for file size and format. When saving changes, it is likely to make the model incompatible. I have developed the habit of checking SVG code after saving the file. This can also help if you are familiar with the path descriptor format. If you are not used to it, it is a little mysterious. It is also a good idea to disable optimization in the preferences of the vector editor.

Repeat the above process for the third shape. Copy, reposition all nodes and set a third color.

Lights, cameras... actions!

After creating the model, we did most of the work. Now it's time to check out the animation section. React-spring comes with a set of hooks that we can use for animations and deformations. useSpring is ideal for the effect in this example. It is intended for use with a single animation like the one we are creating. Here is how to start animation using the useSpring hook.

 <code>const [{ x }, set] = useSpring(() => ({ x: 0, }));</code>

The above provides us with an animation property x, which builds our deformation effect around it. One of the great advantages of these animation properties is that we can change them to create almost any type of animation. If the value is incorrect, we can change it by interpolation.

The second parameter, the set function, allows us to trigger an update. Below is a code snippet showing its usage. It updates the animation value x using the gesture handler from the react-use-gesture library. There are many ways we can trigger animations in react-spring.

 <code>const bind = useDrag( ({ movement: [x] }) => {  // ...  set({ x }); }, );</code>

We are now ready to combine our model (path descriptor) with tags. By adding the animated keyword to the JSX code, we activated the react-spring animation system. By making an interpolate call to the previously named interpolate, we convert the drag distance to a deformed shape. The output array contains the models discussed earlier. To put them in place, we simply copy the path descriptor from the SVG file into the tag. Now, three different descriptors d, from three different path elements, are copied from three different SVG files, and combined into one. Here is how JSX nodes are looking for driven using react-spring animation.

<code><svg ...="">
<animated.path c="" d="{x.to({" first="" model="" output:="" range:="" second="" third="" z=""></animated.path></svg></code>

Let's look at the difference between a standard JSX path element and the one we currently have. To get the deformation animation, we have:

• Added animated keyword to make JSX path elements animate with React spring,
• Change descriptor d from string to React spring interpolation, and
• Convert distance x to a keyframe animation between three path descriptors.

Development Environment

I haven't found a perfect development environment for handling SVG. Currently, I'm switching back and forth between vector editor, IDE, and browser. Some replication and some redundancy involved. It's not perfect, but it works. I've tried parsing scripts for SVG in the past. I still haven't found anything that can be applied to all scenarios. Maybe it's just that I did something wrong. If not, it would be great if web development using SVG can be more seamless.

Let's start!

Last but not least, the demo!

Thank you for reading!

The above is the detailed content of Morphing SVG With react-spring. For more information, please follow other related articles on the PHP Chinese website!