Home > Science and technology > Applications and software
Reading time estimate: 11 min

How to create animation with open source motion graphics tool?

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

There is an old saying in animation that says animation is easy, tweening is hard. In the traditional methods of animation established in the 1920s, key frames are drawn by the main artist, and artists and staff draw the middle frames. This condition is called "intermediate" and "tweening" for short. Making animation with motion graphics is one of the tasks that many people like to test in their lives. Today, computers are often used for intermediate work. In the words of Tony DeRose of Pixar:

Our animators do just that. They show body parts and facial expressions in "key" frames that they feel are important. Our animation system software then uses mathematical functions called splines to create intermediate gestures.

This is why animation is (relatively) easy to create with Synfig Studio. As an animator, you just have to count on one main element at the beginning and end of its movement. Synfig calculates everything else.

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

Synfig is a useful tool for single-team animators They do not have assistants to manage their middle frames. In fact, this tool is suitable for users who do not consider themselves illustrators, but still need to move to the graphics for the film or presentation, as well as users who are confident enough. It is also suitable for people who want to focus on the animation technique in their illustration skills. I was amazed at How quickly they came together in Synfig. I create some graphics and color scheme. I also set two keyframes and that's it. It's really that easy. That's why the subject of this article, BingMag, is How to make animation with motion graphics in simple language. So if you are interested in this topic, follow us to the end of this article.

Synfig interface

In the most basic case, the Synfig interface is divided into four parts. These four are:

  • Canvas, where your animation is displayed.
  • Timeline, where frames are recorded.
  • Tools Or the same Tools
  • Properties where you make settings for your animation components.

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

The basics of animation do not seem to have changed much. So no matter what application you use, be aware that the process is almost identical.

Use your assets

Designing in Synfig is an art in itself because How to design for entertainment and How to design for computer animation are different processes. Instead, you can paint in Inkscape or Krita (and you can also animate in Krita to get around it), but it's best to start with what Synfig gives you and see How Synfig uses the assets you provide. .

I know it as animation cutting paper, except that it is digital paper. So you have all the special effects that come with working with digital graphics. Imagine that you are creating a cover for a news program. The screen of the watch should be transparent so that the video editor can place it on the news reporters' photos for introduction. Let's get to the main tutorial.

To get started, draw a circle using the Circle tool. Activate the Circle tool by clicking on the icon in the left toolbox or press E on your keyboard. Click and drag on your screen to create a circle.

After you have drawn your circle, you must press S on your keyboard or select the Transform tool from the toolbar on the left. Since your circle is the only shape you have on your canvas, it becomes the selected item. You can now see that there are two ridges on the circle: one is the center ridge (called the origin) and one is the radius.

Your current selection is also highlighted in the Layers panel on the right side of the Synfig window. This is important because it is often easier to select an item from the Layers panel than to try to place it on the canvas.

Once selected (as it is now) you can enter the details of the circle in the panel See Parameters on the left. The protrusion of the origin determines the location of the circle and the radius is also recorded. Click on the color sample in the parameters panel and set the color of your circle to white or light gray.


Teach you. Use the Circle tool to drag another circle on top of your current circle. Select your new circle using the Transform tool or the Layers panel. If it is not already filled with white, you must use a color sample in the parameters panel to prove it white. Filling a digital asset with white (#ffffff in hex) means that All pixels are bright (because digital color is an additive that is different from physical media and is where mixing all colors turns black). The default state of the shapes you draw in Synfig is Composite. This means that anything that is filled with any color (white, black, blue, or anything else) is drawn on what you have already drawn. Everything is given a layer. So the two do not actually merge, but they seem to overlap by default. However, you can change the way a layer is combined to affect the layer below it.

The second circle you just drew is a solid object. Therefore, change the Blend Method value in the Parameters panel to Alpha Over as shown below.

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

This time draw the third figure using the Rectangle tool (R on the keyboard). Place the origin in the center of your two circles. Now fill it with red and set the Blend Method to Multiply. This acts as a clock. You can no longer see the hand because it multiplies in alpha (and any number multiplied by 0 is 0), but I do this because I find it embarrassing to put objects on people's faces in the video. p>

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

Finally, use the Rectangle tool to draw the background where the fictional headlines of the fake news program are displayed to be given. A rectangle appears on your layers. So drag it to the bottom of the layer panel.

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

Now try to add some text and other elements Add layers alone.

Layers and group effects

Layers in Synfig are not just a convenience, they are a way to limit composition and effects. To animate the clock that rotates around the clock, you need to add the Rotate animation effect to your canvas. However, if you do this without grouping the layers, everything on your canvas will rotate clockwise. In addition to the above, this is a group layer that allows you to make a change to multiple layers at a given time. A simple example of this is resizing or moving your clock graphic.

Select the clock layer layer and click on the folder icon at the bottom of the Layers panel to send it to a new group layer.


BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

In this section you have to select all the layers (including your new group layer) And send them to another group layer. Group layers do not cost extra. So I tend to use them freely to organize my workspace visually and keep assets together so that I can move and change them as objects.

Right-click on the clock layer and go to New Layer at the top of the text menu. Find the Transform submenu and select Rotate to add a new spin layer.

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?


Now that you are a little familiar with making animation with motion graphics, we need to raise the level of training a bit. Since you have the effect of rotating in a group layer with your clock, now the only thing that matters is exactly the clock. However, nothing is spinning at the moment because you have not moved anything yet.

In this step, select the Rotate layer which has two protrusions: one green origin and one blue amount. Drag the green origin to the approximate origin of the clock and release. For maximum accuracy, you can instead get the exact origin position of the clock face and enter the same number at the origin of the rotation.

Now is the time to enter animation mode. Click the animation mode button in the lower right corner of the canvas.

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

When is it active, because your entire canvas gets a bright red border and the animation mode button turns red. In animation mode, everything you do on the canvas is recorded. You are now on your first animation frame. So whatever you set now will return to the starting position.

Drag the blue bulge of the spin layer to the 12 o'clock position. When you do this, a golden key frame icon will appear in your timeline. This indicates that a parameter has changed. You can see which parameter has changed by looking at the parameters panel on the left side of the timeline. There is also a keyframe icon in the main parameter line.

Click on frame 48 in the frame counter bar above. Rotate the blue protrusion of the rotating layer clockwise to the 11 o'clock position. This time a new key frame appears below frame 48. Synfig tells it that you need 47 middle frames to turn your clock from 12 to 11 o'clock.

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?

Now click on the animation mode button to exit the animation mode. Then click the Play button at the bottom of the canvas or screen to preview your animation.


Go to the File menu and select Render to export your animation. The Render menu can be complicated, as there are many different purposes for an animation. Animations are generally taken as output image sequences, as most workflows bring the animation to another program so that they can edit separate scenes and combine them with the final audio combination and more. Since this project is an example and is intended as a cover, the workflow works logically here.

Now you have to choose to have your files as news-overlay Save .png to a dedicated directory. To maintain the alpha channel, select PNG as the target. In the Time tab of the Render window, set the end time to just 64f. This ensures that all 48 animation frames are output. In real life I expect an introduction sequence to be more than three seconds, but for this example it is good enough. Click the Render button to get the output.

If you do not have any video to overlay your motion graphics, you can instead render a video file by selecting the ffmpeg target and save your file as an MP4 file. do. Easy!

Using overlay

Most professional-grade video editors can import their image as if it were a video file. If you are using Kdenlive, use the Add Image Sequence option in the Project menu. Set the image type to PNG and redirect Kdenlive to your image sequence folder. By placing the image sequence in video track 2 (V2) and the video in video track 1 (V1), you can view part of the video below through your animated cover.

BingMag.com <b>How</b> to <b>create</b> <b>animation</b> with <b>open</b> <b>source</b> <b>motion</b> <b>graphics</b> tool?


Synfig does a lot for you. Gives you easy shortcuts to combine, not just frames, but produces full seconds of animation. This project, mentioned above, was a simple example that also gives you an idea of some of the features you can set up in Synfig. Nearly a hundred animation effects are ready for you to use, and most of them are a lot more fun than rotating a layer.

With Synfig you don't have to just animate shapes. You can also animate effects. It's all about parameters, composition and movement. Explore layer effects, try some animation and add some Saul Bass-inspired motion graphics to your next project. We tried to teach you How to make animation with motion graphics in simple language and starting from the most basic points. I hope this article has taken a small step to help you create animation with motion graphics.

Have you ever made animation this way? Share your comments and experiences with us and other BingMag users below.

Source: opensource

Tags: how, create, animation, open, source, motion, graphics, tool?

READ NEXT IN: science and technology / applications and software

BingMag.com Apple's iOS 16 revelations announce great interactive widgets applications and software

It seems that the home screen widgets of the Apple iPhone are not very old yet. We first saw these widgets in iOS 14 in 2020, and they entered the iPadOS operating system in 2021. We think Apple inten

BingMag.com Instagram announced the ability to inform users' live applications and software

The company announced on Wednesday that the Instagram team is working on a new feature that shows the user's upcoming live schedule. Instagram manager Adam Mousri explained the new feature in a video

BingMag.com Android apps in Windows 11 will be available to the public soon applications and software

Microsoft surprised the world in 2021 with a very interesting feature of Windows 11. The company announced that Windows 11 users can access Android apps on their system through the computer version of

BingMag.com YouTube will likely offer NFT-based capabilities applications and software

"Suzanne Wojciech", CEO of YouTube, considers video streaming platforms as one of the priorities of 2022, in which users can earn much more money than before. . He announced that the largest video sha