DEV Community: Danjiro Daiwa

9VAe Beginner Tutorial 4 - Time Curve, Copy Pages, GIF

Danjiro Daiwa — Sun, 15 Aug 2021 11:46:10 +0000

This tutorial is a continuation of the tutorial "9VAe Beginner Tutorial 3". This tutorial describes 'Time Curve' and 'Copy Page'.

Time Curve, Copy Pages

This tutorial is a continuation. It may be better to get started with "9VAe Beginner Tutorial 1".

Now, let's learn how to add complex movement to the animation by using 'Time Curve' , and the make the animation repeating smoothly by copying pages.

The steps we'll take are:

Jump to the third page of the parent animation.
Select AnimeCast.
Register the AnimeCast to the Time Control Box .
Add 'Random Time Curve' to the AnimeCast.
Click [Play] button to see the animation.
Make the fifth page by copying the second page.
Make the sixth page by copying the first page.
Change the time duration of the fifth page to 1 sec.
Change the time duration of the fourth page to 0 sec.
Click [Play] button to see the animation.
Export animated GIF.

1. Add 'Time Curve'

Click the third page (A) shown above. Now the third page will appear.
Click the AnimeCast (B) and select it.
Click [+] button of the Time Control panel (C). Now the AnimeCast will be registered to the box (D).
Click on the registered box (D) > Click 'Random Time Curve'. Now the Random Time Curve will appear as follows.
Click [Play] button(F) to see the animation.

Time Curve (E)is a time vs. progress graph. The horizontal axis represents time, the left side is the current page and the right side is the next page. The vertical axis represents progress , the bottom is the current page and the top is the next page. You can drag and move the points on the graph freely.

Click [Play] button (F) to see the animation after changing the shape of the graph.

2. Copy pages

Let's make the animation repeating smoothly by copying pages.

Click the second page number (G) shown above. > Click 'Copy Page'. Now the second page will be copied to the Clip memory.
Click [+] button on the right side of the end page(H). > Click 'Add Clip Page'. Now the second page will be copied to the fifth page.
Click the first page number (I). > Click 'Copy Page'. Now the first page will be copied to the Clip memory.
Click [+] button on the right side of the end page(H). > Click 'Add Clip Page'. Now the first page will be copied to the sixth page.

3. Adjust time duration

Click the time duration of the fifth page(A). > Click '+1 second' to change the duration to 1 sec.
Click the time duration of the fourth page(B). > Click '-1 second' to change the duration to 0 sec.
Click [Play] button (C) to see the animation. Try to adjust the time duration and the shape of the 'Time Curve' on the third page if you want.

4. Make animated GIF

Let's export an animated GIF.

Click [File] on the menu bar > Click 'Animated GIF Export'.
Enter the name of GIF file. Click [Save]. Now the GIF setting panel will appear. Input setting as follows and click [OK] button.

Picture Size : You can change the GIF picture size here.
Frame/sec : You can define frames per second here.
Time Length : Input time duration as 1 second.
Transparent GIF : Check here, if you want transparent GIF.
Smoothing : Don't check here, if you want transparent GIF.

Final Words

This is the final article of '9VAe Beginner Tutorials'. The basic operation of 9VAe were explained such as Input figures, Resize, Move, Change shape, AnimeCast. Adjust time duration, Time Curve, Copy pages... You can redo this tutorial again from here.

Please enjoy making animation by using 9VAe.

9VAe Introduction

9VAe Beginner Tutorials

9VAe Beginner Tutorial 3 - Edit AnimeCast, Loop

Danjiro Daiwa — Sun, 15 Aug 2021 11:22:30 +0000

This tutorial is a continuation of the tutorial " 9VAe Beginner Tutorial 2". This tutorial shows how to edit the objects inside AnimeCast.

Edit AnimeCast

This tutorial is a continuation. It may be better to get started with "9VAe Beginner Tutorial 1".

Now, let's make the animation that the red circle change the shape to a triangle and the blue circle change the shape to a square.

The steps we'll take are:

Open the content of the AnimeCast.
Add the second page.
Change the shape of the red circle to a triangle.
Change the shape of the blue circle to a square.
Add 'TURN' command to the first page.
Change the time duration of the first page to 0.5 sec.
Return to the parent animation from AnimeCast.
Click [Play] button to see the animation.

1. Open content of AnimeCast

Click on the bold text file name (A). Now the list of AnimeCasts will appear. You will see the name of AnimeCast inputted in '9VAe Beginner Tutorial 3'.
Click the name of the AnimeCast. Now the content of the AnimeCast will appear as follows.

You can change the AnimeCast's name by clicking it (D).

2. Change shape

Click the [+] button at the end of the page bar (A) > Click 'Add Next Page'. Now the second page will appear in the page bar.
Drag a rectangle around the red and blue (B1 to B2) to select them.
Click on the [Edit points] button (C). > The Control points of circles will appear as follows.
Move the control points of the red circle to the points E1, E2 or E3 to make triangle shown above. Of course, you can drag the points. But try to click the point and move mouse after that. Move the point and hit Ctrl key then the point will move to the nearest point. You can make triangle precisely.
Move the control points of the blue circle to the points F1, F2, F3 or F4 to make square shown above.

Click [Play] button. You will see the animation as the conrol points on the first page will move to the control points on the second page.
You can align the points by using Alt key + Arrow Key(Upper/ Lower/ Right/ Left). Select multiple points and hit Alt key + Arrow Key then you can make vertical line or horizontal line.

3. Add 'Turn' Command

Click the first page (A) shown above. Now the first page will appear.
Click the left upper side of the first page(B). > The menu including 'Turn', 'Repeat', 'Pause button'... will appear.
Click 'Turn'. Now the Turn command will appear.
Click the time duration of the first page(C). > Click '-0.1 second' five times to change the duration to 0.5 sec.
Click [Play] button (D) to see the animation. Click the right hand side [Stop] button to stop the animation.

When you click the left upper side of the page, the two types of menu will appear. When you click the left upper side of the current page, the play control menu including 'Turn', 'Repeat', 'Pause button'... will appear. When you click the left upper side of the other pages, the menu including label lists will appear.
Remember 'Turn' command should be inputted on the first page of the loop.

4. Return to parent

Click on the bold file name (A) > Click 'Return' on the menu. Now the parent animation will appear.
Click [Play] button(B) to see the animation.

5. Adjust animation

Now you became to be able to edit the AnimeCast by clicking the bold file name (A).
Adjust animation so that the red ball and the blue ball are jumping and changing the shape to triangle or square.

Final Words

This article explained how to edit AnimeCast. AnimeCast is very powerful function to make complex animation. You can input some AnimeCasts into the other AnimeCast hierarchically.

The next article '9VAe Beginner Tutorial 4' describes 'Time Curve' and 'Copy Page'.

9VAe Introduction

9VAe Beginner Tutorials

9VAe Beginner Tutorial 2 - AnimeCast, Time

Danjiro Daiwa — Sun, 15 Aug 2021 10:50:15 +0000

This tutorial is a continuation of the tutorial "9VAe Beginner Tutorial 1". This tutorial shows how to create an 'AnimeCast'.

Make AnimeCast and Rotate

This tutorial is a continuation. It's easy to get started with " 9VAe Beginner Tutorial 1".

Now, let's make the red and blue circles rotating animation.

The steps we'll take are:

Add the third page.
Cut the red and blue circles to Clip Tool.
Make AnimeCast.
Add the fourth page.
Rotate AnimeCast 360 degree.
Click Play button to see the animation.
Change the time duration of the pages.
Click Play button to see the animation.

1. Add the third page

Click [+] button (A) on the right side of the last page in the Page Bar.
Click 'Add Next Page' on the menu. Now the second page will be copied to the third page .

2. Cut circles to Clip memory

Click the red circle (B) to select it.
Holding down the Shift key click the blue circle (C) to select it. > Now the red and blue circle will be selected together. Selection frame will appear around selected objects .
Click [x] button of the Clip memory (D). Now the red and blue circles will be removed and put into the Clip memory.

3. Make AnimeCast.

Click [9] button (E). > Now the window will be appear to input the AnimeCast's name.
Enter the Animecast's name “Red Blue” into the text field. > Click [OK]. Now the red and blue circles will appear. You can name AnimeCast freely.

After you make an AnimeCast, the bold text name will appear upper left of the stage(A). Click here to show the AnimeCast list.

4. Rotate AnimeCast

Click the [+] button at the end of the page bar (B) > Click 'Add Next Page'. Now the fourth page will appear in the page bar.
Click the AnimeCast(C) to select it. > Selection frame will appear.
Click the center handle + of the selection frame. > AnimeCast menu will appear.
Click 'Frame 0 degree(Clockwise)' > A dialog box for input 'Frame degree' will appear.
Enter 360 and Click [OK] button.
Click [Play] button (E). You will see red and blue circles rotating animation.

As you see the objects in AnimeCast can be rotate precisely.

5. Adjust time duration of the page

Click the time duration of the second page(A). > Click '-1 second' to change the duration to 0 sec. Now the red and blue circles will start rotating immediately after they touch the sky blue circle.
Click the time duration of the third page(B). > Click '+1 second' twice to change the duration to 3 sec. Now the red and blue circles will move arround the sky blue circle during 3 seconds.
Click [Play] button (C) to see the animation.

Final Words

This article explained how to make AnimeCast. AnimeCast is very powerful function to make complex animation.

The next article '9VAe Beginner Tutorial 3' shows how to edit the objects inside AnimeCast.

9VAe Introduction

9VAe Beginner Tutorials

9VAe Beginner Tutorial 1 - Input, Select, Move, Resize...

Danjiro Daiwa — Sun, 15 Aug 2021 10:32:19 +0000

Previous tutorial described an overview of the 9VAe interface. This tutorial shows how to create a quick example animation.

First Step

Let's make a simple animation shown above. The steps we'll take are:

Start 9VAe.
Draw three circles.
Add the second page.
Change the color of the left circle to red and change the color of the right circle to blue.
Select the red and blue circles together, resize them and move them to touch the center circle.
Click Play button to see the animation.

1. Start 9VAe.

9VAe will open a single window with a default page size.

2. Draw circles

Click 'Filled circle'(A) in the Tool Box on the upper left of the 9VAe window.
Click and drag the pointer from the center(A1) to the outside of the page area to draw the first circle.
Click and drag the pointer from the center(A2) to the outside of the page area to draw the second circle.
Click and drag the pointer from the center(A3) to the outside of the page area to draw the third circle.

3. Add the next page

Click '+' button (B) on the right side of the first page in the Page Bar shown above.
Click 'Add Next Page' on the menu. Now the first page will be copied to the second page . The second page will appear on the right side of the first page as follows.

Copy is important in 9VAe. Copied objects are connected to the original objects. Only connected objects can make in-between shapes or colors automatically.

4. Change color

Click 'Select Object' button (A) shown above to select objects.
Click the left circle (B) to select it.
Click Fill Color (C). Now the Color palette will appear. > Click 'red'.
Click the right circle (D) to select it.
Click Fill Color (C). Now the Color palette will appear. > Click 'blue'.

The button on the right side of the 'Fill Color'(C) is the 'Gradation' button. You can choose the second color of gradation by clicking the 'Second color' button on the right side of the 'Gradation' button. Please try to add color gradation to your center circle.

5. Multiple selections

Click the red circle (A) to select it.
Holding down the Shift key click the blue circle (B) to select it. > Now the red and blue circle will be selected together as shown above. Selection frame will appear around selected objects .

Shift+clicking on a selected object excludes it from the selection.

6. Resize, Move

You can Resize the red and blue circles by dragging the corner handle of the selection frame(C) shown above.
You can Move the red and blue circles by dragging the frame of the selection frame(D).

Move and resize the red and blue circle to touch the center circle as follows.

7. Play

Click 'Play' button(A) to see animation.

Final Words

This article explained 'Input figures', 'Select objects', 'Change Color', 'Move and Resize objects. You will understand it is very easy to make animation using keyframes in 9VAe.

The next article '9VAe Beginner Tutorial 2' shows how to create an ' AnimeCast'.

9VAe Introduction

9VAe Beginner Tutorials

9VAe Beginner Tutorial 0 - Overview

Danjiro Daiwa — Thu, 05 Aug 2021 07:27:00 +0000

This tutorial shows how to use 9VAe : Free SVG/GIF Animation editor for beginners.

User Interface

Here is an overview of the 9VAe interface.

Item	Explanation
1. Tool Box	Select, Left side is filled shape, Right side is unfilled shape, Text
2. Editing Tool	Point selection, Stacking order, Delete, Copy to previous / next page, Undo
3. Play / Stop	Play / Stop
4. Page Bar	Add a next page. Interpolate between pages
5. Palette	1. Fill Color, Line Color, Width, Line types..., 2. Text Color..., 3. Stamp
6. Input button	Animation / Sound / Photo
7. Clip memory	Copy / Cut / Paste / Animecast
8. Time Control / Layer	Register and attach a motion graph. Fix, Hide, Select

1.Tool Box

Contains Tools for selecting or drawing objects.
The buttons on the left side are the buttons to draw shapes with fill.
The buttons on the right side are the buttons to draw shapes without fill.
The top large button is the button to select objects.
'A' is the button to draw a text.

2. Editing Tool

Here are buttons as follows from top to bottom.

Edit anchor points of selected shapes (only move / move, add or delete points)
Change Stacking order of selected objects(Raise / Lower )
Delete selected objects or selected anchor points
Copy selected objects to the previous page / copy to the next page
Undo or Redo (+Shift Key)

3. Play / Stop button

Play animation / Stop animation.

4. Page Bar

9VAe's Page is a keyframe of the animation.
A: The pages can be added by clicking '+' button on the right side of the end page. > Click 'Add Next page' on the menu.
B: Each page has time duration in seconds. You can change the value by clicking on it.
C: You can select multiple pages by clicking the page number.
D: In-Between page,Background page,Blank page and clipped page can be added by clicking between pages.

5. Palette(Color, Width, Line types...)

A: Click each buttons to set Fill Color,Stroke Color,Stroke Width,Line Type,Arrow Type... You can change objects color after selecting them.
Click the upper tabs to change the palette to B: Text Color palette and C: Input Figures palette.

6. Input button (Animation / Sound / Photo)

Input 9VAe animation file. Tne animation will appear on the current page. It is similar to 'movie clip'. The animation object is caled AnimeCast in 9VAe.
Input Sound, Music file. The sound or the music will start playing on the current page.
Input Photo image file. Tne image will appear on the current page.

7. Clip memory (Copy / Cut / Paste / Animecast)

Copy selected objects.
Cut selected objects.
Paste the clipped objects. Use Paste to the Stage normally. Use Duplicate, if you want to make multiple objects.
Make AnimeCast from clipped objects.
The objects in multiple pages can be clipped.

8. Time Control Panel (Time curve, Layer)

Click '+' to register selected objects to the box in the Time Control Panel.
Time curve can be added to the registered objects by clicking them.
Registered objects can be set as visible/hidden or selectable/unselectable by clicking them.
The right bottom 'Circle button' can reset the visible and selectable setting.

9. Select frame handle menu

A: Click the corner handle of the selection frame (A in the above figure) to resize or rotate objects.
B: Click the handle on the side of the selection frame (B in the above figure), you can bend, transform the perspective, invert, etc.
C: Click the center handle "+" of the selection frame. Various menu for each object will appear.

Final Words

This article explained overview of 9VAe. The interface is very simple because 9VAe doesn't have Timeline.

The next article '9VAe Beginner Tutorial 1' shows how to create a quick example animation.

9VAe Introduction

9VAe Beginner Tutorials

How to make a video with 9VAe

Danjiro Daiwa — Tue, 03 Nov 2020 16:15:20 +0000

This article shows how to make a video using 9VAe. It takes about 10 minutes to complete this process. You can also use the PC version or iPhone/iPad version of 9VAe.

To learn how to make other animations, click here.

Download 9VAe

Android / Chromebook : 9VAe for Android (Google Play)
Windows / Mac / Linux: 9vae for PC
iPhone / iPad : 9VAeDangla (Apple)
Amazon Fire : 9VAe (Amazon)

1. Open 9VAe > Help > Munch

Open 9VAe.
Click "Help" on the menu bar (A below). Click "Munch" from the menu. (PC version: Help > "Play with face(Training)" > "Munch")
Click "Play button" (B above). You can see the simple animation.

2. Deform shapes

Click on the blank below the right palette (C above). The palette will disappear.
Select some objects and change them.
Drag the center "+" (D below), then you can move them.
Drag the handle in the center of the side (E below), then you can tilt them.
Select some objects. Click "Select Points button" (F below). Drag some points (G below) to deform the shapes freely.

3. Change colors

Select some objects.
Click the right bottom corner (H above) to show the palette. 3, Click "Fill Color button" (I below) and select a color.
Change the objects as you like!

4. Export animated GIF

Click "File" on the menu bar. Click "Animated GIF Export" from the menu.
When creating the video material, the screen size should be blank for width, 720 for height and 30 for frames per second. Click “OK” button to export an animated GIF.
Please wait until the following result commes out. The longer the number of frames per second and the duration, the longer the export will take. Please wait.
In the smartphone version, the movie will be saved in the “9VAe folder” and “Camera Roll”. In the PC version, you choose the place to save the file first.

5.Creating an MP4 Video on ezgif.com

For Mac/ iPhone/ iPad, you can create a MP4 video from the “ Movie Export” in the “File” menu. Use this.
For Windows/Linux/Android/Chromebook/Amazon Fire, See Online GIF to MP4 Video converter— Ezgif.com.
Select an animated GIF file.
Click on “Upload!” > Click on “Convert GIF to MP4!”
Click on “Save” (floppy disk icon) or long press on MP4 to download the MP4.
The MP4 will be downloaded to your Download folder. (Depending on your browser settings)

How to make a lip-synching animation? : 9VAe

Danjiro Daiwa — Thu, 29 Oct 2020 11:02:29 +0000

What is a lip-synching animation?

The animation below is a lip-synching animation created from SVG illustrations in 9VAe.
Here's how to make it.

This article explains how to generate lip-synching animation.

6 key shapes of the mouth

9VAe has six mouth shapes in ".aiueo" to generate lip-synching animation.

.	a	i	u	e	o

Mouth movements are specified in Romaji

Romaji is Romanization of Japanese.

The animation above is set up as follows.

Duration(Second):Romaji
4:kyuubee can meik a tolking animeition with alphabet.

9VAe interprets the Roman letters in turn to create mouth movements.

Vowel to vowel

Vowel to vowel changes are created by keyframe interpolation of the mouth shape.

First half: the change from the front vowel to the back vowel
Second half: back vowel

Romaji	Romaji	Romaji	Romaji	Romaji
aa	ia	ua	ea	oa
ai	ii	ui	ei	oi
au	iu	uu	eu	ou
ae	ie	ue	ee	oe
ao	io	uo	eo	oo

Closed-mouthed consonant

The next letter has a "." shape that closes the mouth.

.	n	m	b	p

Romaji	mouth	Romaji	mouth	Romaji	mouth	Romaji	mouth	Romaji	mouth
ana		ami		abu		ape		ano

Consonants in the form of the letter "i"

The next letter has a "i" shape in between.

i	y	j	z

Romaji	mouth	Romaji	mouth	Romaji	mouth	Romaji	mouth	Romaji	mouth
aya		aji		ayu		aze		ayo

Consonants in the form of the letter "u"

The next letter has a "u" shape in between.

u	w	v	f

Romaji	mouth	Romaji	mouth	Romaji	mouth	Romaji	mouth	Romaji	mouth
awa		avi		afu		awe		avo

Ignore the other consonants.

I ignore all but the consonants above.

c	d	g	h	k	l	q	r	s	t	x	space

Romaji	mouth	Romaji	mouth	Romaji	mouth	Romaji	mouth	Romaji	mouth
ada		iga		uha		eka		ola
ari		ishi		uchi		eti		osi

It's a pretty lame rule for making mouth shapes, but since it doesn't matter how you pronounce it, and since it actually moves so fast that it's hard to follow it with your eyes, I'm using this rule as the first version for now. I'll improve it in the future.

Apply to French

IPA symbol		9VAe Romaji
/a ɑ/		a
/i y j ɥ/		i
/u w/		u
/ɔ̃/		un or on
/e ø ɛ œ/		e
/ɛ̃ œ̃/		en
/o ɔ/		o
/ɑ̃/		on or an
/p/		p
/b/		b
/t/		t
/d/		d
/k/		k
/g/		g
/c/		k
/ɟ/		g
/m/		m
/n ɲ/		n
/f/		f
/v/		v
/s/		s
/z/		z
/ʃ ʒ/		j
/ʁ/		r
/l/		l

French example

The pronunciation of French

IPA	Romaji	spelling	IPA	9VAe Romaji
Vowels
a	a	patte	/pat/	[1:pat]
ɑ	a	pâte	/pɑt/	[1:pat]
ɑ̃	on	clan	/klɑ̃/	[1:klon]
e	e	dé	/de/	[1:de]
ɛ	e	belle	/bɛl/	[1:bel]
ɛ̃	en	lin	/lɛ̃/	[1:len]
ə	e	demain	/dəmɛ̃/	[1:deme]
i	i	gris	/gʀi/	[1:gri]
o	o	gros	/gʀo/	[1:gro]
ɔ	o	corps	/kɔr/	[1:kor]
ɔ̃	un	long	/lɔ̃/	[1:lun
œ	e	leur	/lœʀ/	[1:ler]
œ̃	en	brun	/brœ̃/	[1:bren]
ø	e	deux	/dø/	[1:de]
u	u	fou	/fu/	[1:fu]
y	i	pur	/pyʀ/	[1:pir]
Semi-vowels
j	i	fille	/fij/	[1:fi]
ɥ	i	huit	/ɥit/	[1:it]
w	u	oui	/wi/	[1:wi]
Consonants
b	b	bal	/bal/	[1:bal]
d	d	dent	/dɑ̃/
f	f	foire	/fwaʀ/	[1:fwar]
g	g	gomme	/gɔm/	[1:gom]
k	k	clé	/kle/	[1:kle]
l	l	lien	/ljɛ̃/	[1:lien]
m	m	mer	/mɛʀ/	[1:mer]
n	n	nage	/naʒ/	[1:naj]
ɲ	n	gnon	/ɲɔ̃/	[1:nun]
ŋ	n	dancing	/dɑ̃siŋ/	[1:donsin]
p	p	porte	/pɔʀt/	[1:port]
ʀ	r	rire	/ʀiʀ/	[1:rir]
s	s	sang	/sɑ̃/	[1:son]
ʃ	j	chien	/ʃjɛ̃/	[1:jie]
t	t	train	/tʀɛ̃/	[1:tre]
v	v	voile	/vwal/	[1:vwal]
z	z	zèbre	/zɛbʀ/	[1:zebr]
ʒ	j	jeune	/ʒœn/	[1:jen]

spelling	IPA	9VAe Romaji
peinture	/pɛ̃tyʀ/	[2:petir]
rare	/ʀɑʀ/	[1:rar]
pendant	/pɑ̃dɑ̃/	[2:pandan]
pétard	/petaʀ/	[2:petar]
créateur	/kʀeatœʀ/	[2:kreater]
crapaud	/kʀapo/	[2:krapo]
donjon	/dɔ̃ʒɔ̃/	[2:donjon]
clémence	/klemɑ̃s/	[2:klemans]
trente	/tʀɑ̃t/	[1:trant]
plan	/plɑ̃ /	[1:plan]
palette	/palɛt/	[2:palet]
facile	/fasil/	[2:fasil]
tutu	/tyty/	[2:titi]
clan	/klɑ̃/	[1:klan]
charitable	/ʃaʀitabl/	[2:aritabl]
effacer	/efase/	[2:efase]
élève	/elɛv/	[2:elev]

IPA is from Collins French Dictionary

The Significance of the Romanized Lipstick

I think the main process of making a lip-synching animation is to recognize the audio data and make a mouth shape to match the sound.

However, if you don't need audio, as in the case of Twitter posts, there may be an easy way to make a lip-synching animation.

9VAe's method only requires you to create 6 mouth shapes, so you can easily create a lip-synching animation character from Openclipart's SVG illustrations.

Free lip-synching animation characters

How to make Barrel Fish animation from SVG : 9VAe

Danjiro Daiwa — Thu, 29 Oct 2020 04:59:50 +0000

This is an article which describes the process of making an animation from Openclipart's SVG.

Openclipart library is a collection of 100% license-free art that you can use for any purpose.

What is 9VAe ?

Free 2D animation software which can export SVG SMIL animation .
It can export alternative movie such as Animated GIF / APNG or QuickTime (9va-mac).
Based on 2D keyframe animation such as Synfig Studio.
Lightweight and stable. It can work well even on RaspberryPi a board computer.

Step1 Download '9VAe'

You can download 9VAe from the links as follows;

See 9VAe Download and Install.

Step2 Extract ZIP, Run '9VAe' '9va-win' or '9va-pi'

Macintosh: '9VAe.app' is not an App Store application. You have to regist it to Gatekeeper at first.
Click > System Preferences > Security & Privacy > General.
See "Allow applications download from:". Click [Open Anyway]. Then '9VAe.app' will be registed to Gatekeeper.
9VAe's screen is as follows

Step3 Download Openclipart (barrelFish.svg) to Desktop

Open https://openclipart.org/detail/217565/barrel-fish with your favorite browser.
Download "barrelFish.svg" to your desktop as follows. Click your right mouse button on [DOWNLOAD] button.
Click [Save Link As] in the right button menu. (The menu item will be different according to your browser.)
Select [Desktop]. Click [Save] button. Now SVG file "barrelFish.svg" will be saved on your desktop.

SVG (Scalable Vector Graphics) is the vector graphics format and you can modify the shape by using SVG editor like 'Inkscape'.

Step4 Open barrelFish.svg with '9VAe'

Click '9VAe' window and open the barrelFish.svg on the desktop as follows.

Click [File] on the menu bar > Click [Open]. Now Open File Dialog Box will appear.
Select [Desktop] > Click on [barrelFish.svg].
Click [Open].

Step5 The message "Data couldn't be converted"

The message "Some Data couldn't be converted. (Filter)" will appear.

This message occurs because '9va-pi' doesn't have a filter operation.

Click [OK] button.

Step6 Ungroup barrelFish 4 times

A dark brown plate of the barrelFish is a filter conversion error.

In order to get rid of it, click the barrelFish. Now the selection frame will appear around the barrelFish.
Click [Object] on the menu bar > Click [Ungroup]. This will ungroup the barrelFish. Do the same operation 4 times. Now we are ready to select the dark brown plate.

Step7 Select dark brown plate of the barrelFish by using hide option of Registered button

I will explain how to select a shape from the complex objects.

To deselect the objects, click anywhere on the page away from the shape.
Click on the dark brown plate of the barrelFish first. It may be difficult to select it correctly at once, but it's OK.
Click [+] button of the Time Control panel on the right side of the window. Now the selected object will be registered in one of the blank buttons of the time control panel.
Click on the registered button > Click [Hide]. Now the selected object will be hide.

Repeat the same operation until selecting the dark plate in the barrelFish.

If you failed to select the dark plate, click [+] > Click registered button > [Hide] again.

Step8 Select dark brown plate of the barrelFish and delete it

If you succeed to hide the dark brown plate, Click the registered button of the dark brown plate > Click [Select]. Now the dark brown plate of the barrelFish will be selected.
Click the [Eraser] button on the lower tool palette on the left side of the window. Now the filter conversion error will be deleted.

Step9 Add the second page

Click the [+] button at the end of the page bar on the top of the window. > Click [Add Next Page]. Now the second page will appear on the page bar.

Step10 Select the tail of the barrelFish

Drag a rectangle around the tail of the barrelFish and select the tail.
Click on the [Edit points] button on the lower tool palette on the left side of the window. Now control points will appear.
Drag a rectangle around the control points of the tail and select them.
Click on the [+] button on the lower left corner of the window several times. Now the tail will be zoomed in.

Step11 Transform the tail of the barrelFish

The transform menu places each handles (little squares) of the selection frame, one in each corner and one on the top, bottom, left, and right. We can modify the shape by clicking on any of the handles or dragging them.

Click the right side handle of the selection frame > Click [Stretch]. Now the shape will be changed according to your mouse movement.
Click the mouse button when the shape becomes desired shape.
Click the [Magnifying glass] button on the lower left corner of the window.

Step12 Register the side fin of the barrelFish

To deselect the control points, click several times anywhere on the page away from the shape.

Click on the side fin of the barrelFish.
Click [+] button of the Time Control panel on the right side of the window. Now the selected object will be registered in one of the button of the time control panel.
Click on the registered button > Click [Hide]. Now the registered object will be hide.
Click on another part of the side fin of the barrelFish.
Click on the registered button > Click [Add to Time Group]. Now the selected shape will be hide.
Repeat the same operation until selecting all parts of the side fin of the barrelFish.

Step13 Select and Transform the side fin of the barrelFish

Click on the registered button > Click [Select]. Now the side fin will be selected.
Click on the [Edit points] button on the lower tool palette on the left side of the window.
Drag a rectangle around the control points of the side fin.
Click the right side handle of the selection frame > Click [Stretch]. Now the shape will be changed according to your mouse movement.
Click the mouse button when the shape becomes desired shape.

Step14 Zoom in the anal fin of the barrelFish

To deselect the control points, click several times anywhere on the page away from the shape.
Drag a rectangle around the anal fin of the barrelFish and select the anal fin.
Click on the [Edit points] button on the lower tool palette on the left side of the window. Now control points will appear.
Drag a rectangle around the control points of the anal fin.
Click on the [+] button on the lower left corner of the window several times. Now the anal fin will be zoomed in.
Use the Lasso select tool to select the anal fin. Hold down the Ctrl key on the keyboard, drag and draw a blue line around the control points of the anal fin. (If you are a Macintosh user use Command key.) The selection frame will appear around the anal fin.

Step15 Transform the anal fin of the barrelFish by using soft pin

Click the right side handle of the selection frame > Click [Transform with pin] twice. The menu item will change to [Transform with soft pin].
Click [Stretch]. Now the shape will be changed according to your mouse movement. Click the mouse button when the shape becomes desired shape.

When the [Transform with pin] is active, the control points near the edge of selection won't move so much. The transformation result will be smooth.

Step16 Enlarge the mouth of the barrelFish

Click the [Magnifying glass] button on the lower left corner of the window.
To deselect the control points, click several times anywhere on the page away from the shape.
Click the mouth of the barrelFish. The selection frame will appear around the mouth.
Drag the center handle [+] of the selection frame toward the left.
Drag a rectangle around the head of the barrelFish and select the head.
Click on the [Edit points] button on the lower tool palette on the left side of the window. Now control points will appear.
Drag a rectangle around the control points of the mouth.
Drag the corner handle of the selection frame outward. Now the head will become larger by using Transform with soft pin.
Click and select the mouth of the barrelFish.
Drag the center handle [+] of the selection frame toward the mouth's original position.
Drag the corner handle of the selection frame outward. Now the mouth will become larger.

Step17 Group iron balls and iron rings in 2 registered buttons

In order to make iron balls' animation, we should group all iron balls together.

Click an iron ball or an iron ring and select it.
Click [+] button of the Time Control panel on the right side of the window. Now the selected object will be registered to a button of the time control panel.
Click on the registered button > Click [Hide]. Now the registered shape will be hide.
Click another iron ball or a ring and select it.
If the selected object is the same kind of the registered button , Click the same registered button > Click [Add to Time Group]. Now the selected shape will be hide.
If the selected object is not the same kind of the registered object, Click [+] button to make a new registered button. Click the new registered button > Click [Hide]. Now the new registered shape will be also hide.
Finally iron balls and iron rings will be hide. They are grouped in the iron ball or the iron ring.

Step18 Cut the iron balls of the first page and the second page into the Clip memory

Click on the iron ball's registered button > Click [Select]. Now the iron balls will be selected.
Click the center handle [+] of the selection frame > Click [Select Connected Objects]. Now the iron balls of the first page and the second page will be selected together. The line type of the selection frame will be changed to double-line.
Click the [Cut] button on the upper side of the Clipboard on the right side of the window. Now the iron balls of the first page and the second page will be cut into the Clip memory.

Step19 Go to the first page

Click on the first page and go to the first page.

Step20 Create Animecast from Clip memory

Click the [9] button on the lower side of the Clip memory on the right side of the window.
A dialog box will appear. Enter the Animecast's name, for example - “rotating ring”, into the text field.
Click [OK]. Animecast is a graphics object which includes iron balls in the Clip memory. The bold file name "barrelFish" will appear.

Step21 Open the content of AnimeCast

Click on the bold text "barrelFish" > Click [:rotating ring] Now the content of the animecast will appear.
Click the [Magnifying glass] button on the lower left corner of the window.

Step22 Add Background Page

Click the [<] button on the left end of the page bar > Click [Add Background Page]. The blank background page will be added.
Click on the second page and go to the second page.
Drag a rectangle around iron balls to select all of them.
Click on the [Copy to previous page] button on the lower tool palette on the left side of the window. Now the contents of the second page will be copied to the background page.

Step23 Delete the first ball on the top left

Click on the third page and go to the third page.
Drag a rectangle around the top 3 balls on the left balls.
Click the [+] button on the lower left corner of the window several times. Now 3 balls are displayed in the center of the window.
Drag a rectangle around the first ball to select it.
Click the [Eraser] button on the lower tool palette on the left side of the window. Now the first ball will be deleted but the first ball on the background page will still appear.

Step24 Select the second ball and snap the [+] handle to the bottom of it

Drag a rectangle around the second ball to select it.
Holding down Ctrl key (If you are a Macintosh user, holding down command key), drag the center handle [+] of the selection frame toward the bottom of the second ball.
Only the [+] handle will move. The [+] handle will be snapped to each control point of the ball.
Move and snap the [+] handle to the bottom of the second ball.
Release Ctrl key.
Drag the handle [+] of the selection frame toward the position of the first ball.
Hold down Ctrl key, then the handle [+] will be snapped to the control points of the background ball.
Snap it to the bottom of the first ball, then you can move the second ball to the position of the first ball precisely.

Step25 Move the other balls to the previous ball's position

Press space key, and drag the canvas toward the top. The area displayed can be changed.

Repeat as follows

Select the next ball.
Hold down Ctrl (or Command) Key
Drag [+] handle and snap it to the bottom of the ball.
Drag [+] handle without Ctrl Key to start dragging the ball upward.
Hold down Ctrl Key.
Drag and snap the ball to the position of the previous ball.

Step26 Duplicate the bottom ball and copy it to the second page

After you finish moving the bottom ball, Click the center handle [+] of the selection frame > Click [Duplicate]. Now the new ball will appear.
Drag the center handle [+] of the new ball and move it toward the lower left a little.
Click on the [Copy to previous page] button on the lower tool palette on the left side of the window. Now the new ball will be copied to the second page.
Drag the corner handle of the selection frame inward. Now the size of the ball will be small.

Step27 Move the bottom ball of the right balls and resize it

Click on the third page and go to the third page.
Drag a rectangle around the bottom ball of the right balls to select it.
Drag the center handle [+] of the bottom ball and move it toward the lower left a little.
Drag the corner handle of the selection frame inward. Now the size of the bottom ball will be small.

Step28 Move the other balls of the right balls to the previous ball's position

Press space key, and drag the canvas toward the bottom. The area displayed can be changed.

Move the right balls toward the lower as follows

Select the next ball.
Hold down Ctrl (or Command) Key
Drag [+] handle and snap it to the bottom of the ball.
Drag [+] handle without Ctrl Key to start dragging the ball toward the lower.
Hold down Ctrl Key. Drag and snap the ball to the previous ball's position.

Step29 Delete the background page and the top left ball of the first page

Click [<<] button on the bottom of the page bar and go to the first page.
Click on the page number [1] of the first page. > Click [Cut Page] Now the first background page will be deleted.
Drag a rectangle around the top left ball to select it.
Click the [Eraser] button on the lower tool palette on the left side of the window. Now the top left ball will be deleted.

Step30 Input Loop button on the first page

Click [Input] on the menu bar > Click [Loop] Now the Loop button will appear.

Step31 Play iron ball's animation

Click [Play] button on the bottom of the page bar. You will see the rotating iron ball's animation.
Click [Stop] button or ESC key to stop the animation.

Step32 Return to barrelFish

Click on the bold text "barrelFish" > Click [Return] Now the barrelFish will appear.

Step33 Input Turn button on the first page

Click [Input] on the menu bar > Click [Turn] Now the Turn button will appear.

Step34 Play barrelFish's animation

Click [Play] button on the bottom of the page bar. You will see the barrelFishl's animation.
Click [Stop] button or ESC key to stop the animation.

Step35 Modify animation

You can modify animation by selecting the shape and move the control point of it.

Edit your animation to feel better. In the case of the sample animation you saw first, the animation was modified as the eye is moving and all fins are moving.

Step36 Export animated SVG

Click [File] on the menu bar > Click [Save as]
Click the file type [9VA/EVA] > Click [SVG] Select the folder to export SVG.
Click [Save]. Now the animated SVG (SMIL（Synchronized Multimedia Integration Language）) file will be exported.

If you're a Macintosh user, Click [File] on the menu bar > Click [Export Animated SVG].

Step37 Export animated GIF

Click [File] on the menu bar > Click [Export Animated GIF].
Select the folder to export Animated GIF.
Enter the name of GIF file.
Click [Save]. Animated GIF setting dialog will appear.
Enter 2 (sec) into the [Time Limit] field.
Click [Start]. Now the animated GIF file will be exported.

Step38 Export APNG

Click [File] on the menu bar > Click 'Sequential images/APNG export'
Enter the name of APNG file. Click [Save]. Now the APNG setting panel will appear.
Enter 2 (sec) into the [Time Limit] field.
Click [Start]. Now the animated GIF file will be exported.
The question "Do you want to combine PNGs to an APNG file" will appear. Click [Yes]. The APNG file will be exported.
If you click [No], the sequential PNG images will be exported.

Final Words

This article shows how to make an animation from Openclipart's SVG by using '9VAe' a free 2D vector animation editor.

I hope this article will help you to make SVG / GIF / APNG animation. Thank you for reading!

Thanks for Openclipart and TheJChaps the writer of Barrel Fish.

9VAe Introduction

9VAe Beginner Tutorials

9VAe Next Step Tutorials

9VAe Animation Examples

9VAe's GIF/SVG Animation examples in Openclipart

9VAe Technical Information

Export Animated GIF in 9VAe

How to make APNG from SVG for LINE animated Stickers?

Danjiro Daiwa — Thu, 29 Oct 2020 04:51:45 +0000

This article shows how to make APNG from SVG for LINE animated Stickers with a free 2D vector animation editor '9VAe'.

What is 9VAe ?

9VAe is a free 2D animation editor which can export Animated GIF , APNG, Animated SVG or QuickTime (9va-mac).
9VAe can import SVG vector illustrations.
9VAe can create interpolated images. So you can make animation without drawing pictures.

Creation Guidelines - LINE animated Stickers

Creation Guidelines - LINE animated Stickers shows that you need to prepare 24 APNGs for Animated Sticker Images.

	Quantity	Resolution	File Format
Main Image	1	240 x 240	.png(APNG)
Animated Sticker Images	24	Up to 320 x 270 (*1)	.png(APNG)
Chat Thumbnail Icon	1	96 x 74	.png

(*1) It is also possible to create an image that is laterally long (ex: 270 x 100) or vertically long (ex: 100 x 270) as long as the longer side of the image is at least 270 pixels.

	Animated Sticker Images
Playback time	Up to 4 seconds
Frame limits	Between 5 and 20 frames(*2)
Color space	RGB
Backgrounds for graphics	Must be transparent
Maximum file size	300 KB for each image. ZIP file is less than 20 MB.

(*2)The first image of the APNG will be displayed as a static image on LINE STORE and the LINE Sticker Shop.
Use Firefox to test out your APNG files.

Until now you had to combine PNG images with an APNG creation tool such as APNG Assembler. Now you can generate APNG directly from animation by using 9VAe.

9VAe Download

You can download 9VAe from the links as follows;

Download (Click in the following links)	Download from Vector	how to
9va-win (Windows)	9va-win (Vector)	windows
9va-mac64 (macOS 10.10-) 9va-mac (Old Ver.10.4-10.9 is here)	9va-mac (Softnic)	mac
9va-pi (Raspberry Pi)	9va-pi (Vector)	pi
9va-pi (Ubuntu/Linux Mint/Xtra-PC (LinuxX86-32bit))		linux

If you can't run 9va-mac, see here.

Let's make APNG !

In this article the barrelFish animation is used as an example which is created from Openclipart's SVG illustration. (See Make Barrel Fish animation from Openclipart SVG )

If you want to try to make APNG, Click [help] on the 9VAe's menu > Click 'Play with face(Training)' > Click 'Transform'. Now you can get a sample animation.

The picture as follows shows the editor screen of 9VAe.

1. Move animation to upper left.

You have to get rid of mergin space around animation.

Click on the number of the first page.(A) > Click 'Select from This Page'.
Click on the number of the last page.(B) > Click 'Select to This Page'.
Now all the animation data is selected. The red sqare marks are shown on the selected pages. The double line selection frame will appear.
Drag the double line selection frame (C) toward upper left.
You can adjust the position by hitting Shift key and Up, down, left and right keys.

Change the page size

Click [Page] on the menu bar > Click 'Page Size...'
Enter smaller number of width and height in order to get rid of mergin space on the right and bottom side.

3.Export APNG

As the animation is laterally long , the Exporting APNG's width is 320.
As the Frame limits to 20 frames, Exporting Time length is 2 seconds and 10 Frames/sec.

Click [File] on the menu bar > Click 'Sequential images/APNG export'
Enter the name of APNG file. Click [Save]. Now the APNG setting panel will appear as follows.

Enter 320 to the width of Picture Size.(A) The height will be set automatically if you check [Keep Ratio].
Enter 10 to Frame/sec
Enter 2 sec to the Time Length.
You must check [Transparent Background]
You shold enter 1 to 'APNG loops'(B). The initial value 0 means infinite loop.
Click on the [Start] button(C).
The question "Do you want to combine PNGs to an APNG file" will appear. Click [Yes]. The APNG file will be exported.
If you click [No], the sequential 20 PNG images will be exported.

Final words

This article shows 9VAe can make APNG animation and LINE animated Stickers.

9VAe Introduction

9VAe Beginner Tutorials

9VAe Next Step Tutorials

9VAe Animation Examples

9VAe's GIF/SVG Animation examples in Openclipart

9VAe Technical Information

Export Animated GIF in 9VAe

Free SVG/GIF/MP4/APNG Animation editor : 9VAe

Danjiro Daiwa — Thu, 29 Oct 2020 02:31:27 +0000

What's 9VAe ?

9VAe is a powerful free software which can create 2D animation using vector graphics.

Use of shape tweening eliminates the need to create animation frame-by frame.
Export SVG / GIF / APNG animation easily.

iOS iPad	Android Chromebook	Win	Mac	Raspberry Pi	Ubuntu 32bit
9VAePro * 599 Page	Amazon Fire	If you can't download from above ↓	Old Mac 10.7-10.11		Ubuntu 64bit
	Android Chromebook	Win (Vector)	Mac (Vector)	RaspberryPi (Vector)	Safe?

Install	windows	Mac	Pi	Linux
How to make	Button	Menu Key	9VAe FAQ	Dangla
MP4 export	ffmpeg	〇	→	ffmpeg
Talk	SofTalk	〇	→	OpenJTalk

Related apps	PEAS motch!	9VAL
Windows / Mac	PEAS motch!	9VAL
iPhone / iPad		9VAL
Android / Chromebook	PEAS motch!one	9VAL
Amazon Fire	PEAS motch APK	9VAL

Runs on: Windows, Macintosh, Raspberry Pi, Ubuntu, Android, Chromebook, iPhone / iPad

Features

Stand-alone editor for 2D Vector Animation.
Export Animated GIF, APNG (LINE animated Stickers), Animated SVG (SMIL).
Smooth Tweens (Shape, Color, Position, Size, Width, Transparency...)
Path Animation. Time Curve.
Vector Effects (blur, drop shadow ...)
Import SVG (Scalable Vector Graphics).
Export Quicktime (9va-mac) , Sequential PNGs with alpha mask.
Wacom pen tablet (Ver.0.5.2-)

Simple and Powerful

Here is an overview of the 9VAe interface.

Tool Box
Editing Tool
Play / Stop button
Page Bar
Palette(Color, Width, Line types...)
Input button (Animation / Sound / Photo)
Clip memory (Copy / Cut / Paste / Animecast)
Time Control Panel (Time curve, Layer)

9VAe's Page means key-frames. Each page has time duration in seconds between the page and the next page. 9VAe doesn't have Timeline. You can create animations by changing shapes on the pages and changing duration of the pages.

Time curve , Path , Animecast (Movie clip) allow you to create complex movement between the pages.

Smooth Tweening

> SVG

How to add animation to SVG.

One Picture Animation

One picture animation made by only one picture.

> How to make this animation

SVG Animation

> How to make this animation

Add Animation to your software

Software	Combined Effect
PowerPoint, Keynote, LibreOffice	Make animated GIFs. Add them to the presentation.
Illustrator, Inkscape	Import SVGs. Make animations.
Movie Editor	Make Sequential PNGs animation. Superimpose them into the movie.
Scratch	Make Sequential PNGs animation. Make original costume width them.

Available in various Environments

OS	Type
Windows	10/8/7/Vista/XP, 64bit / 32bit
Macintosh	OSX 10.7 - (Intel)
Raspberry Pi	Raspbian-Buster/Stretch/Jessie-PIXEL/Jessie/Wheezy Linux
Ubuntu / Linux Mint / Xtra-PC	Ubuntu 14,16,18 / Linux Mint 17,18 (Linux x86 32bit)
Android / Chromebook	Android 5.0-
iOS (iPhone / iPad)	iOS 10.0-
Language	English, French, Japanese

License

Free software
9VAe Lab will improve and maintain 9VAe as we can with no responsibility.
9VAe Lab provides the right to distribute and trade 9VAe to anyone free of charge.
You can freely create content related to 9VAe.

Recent Version

Ver.1.3.8(230501)Added external file reading and writing to the Android version.

Ver.1.3.6(230401)Fixed a bug where semi-transparent lines became darker when drawing.

Ver.1.3.4(230123)All OS versions now have a speaking function. Changed to support from iOS11 and above.

Ver.1.0.1(220501) Added multiple page output to Picture Export

Ver.1.0.0 The maximum number of pages is now 99!

Ver.0.8.4(210606) Bug fix (Windows / Mac )

Ver.0.7.6(201001) (Octover 28, 2020)

Ver.0.7.0(200402) (April 19, 2020)

Ver.0.5.7b (June 16, 2017)

Ver.0.5.6

Ver.0.5.5

Ver.0.5.4 (9va-win)

9VAe Introduction

9VAe Beginner Tutorials

9VAe Next Step Tutorials

9VAe Animation Examples

9VAe's GIF/SVG Animation examples in Openclipart

9VAe Technical Information

Export Animated GIF in 9VAe

Other Languages

How to make SVG Loop Animation?

Danjiro Daiwa — Thu, 29 Oct 2020 01:33:16 +0000

How to make SVG Loop Animation?

Loop Animation is useful to make a bird flying or a man walking etc.

In this article I will explane how to make SVG Loop Animation without using Java Script.

SVG SMIL Animation

SVG stands for Scalable Vector Graphics.
Many people think SVG is a vector-based static graphics format. SVG supports the animation which is called SMIL, Synchronized Multimedia Integration Language.
SMILE animation works in all browsers except in Internet Explorer and Opera Mini. You can see the compatibility table on Can I Use.

Simple animation example

The following is an example of an orange circle that moves from left to right in front of the blue circle.

<svg>
  <circle fill="blue" cx="150" cy="100" r="50"  />
  <circle fill="orange" cy="100" r="20" >
    <animate attributeName="cx" from="50" to="250"
    dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<animate> element is used to animate cx. cx is the center position x of an orange circle.
The cx is moving from="50" to="250" during five seconds(dur="5s").
repeatCount="indefinite" means the animation will be repeated indefinitely.

Two circles moving around blue circle animation

In the next example, a new circle moving from right to left is added behind the blue circle.
You will see two circles are moving around the blue circle.

<svg>
  <circle fill="orange" cy="100" r="20">
    <animate attributeName="cx" from="250" to="50"
    dur="5s"　repeatCount="indefinite" />
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cy="100" r="20">
    <animate attributeName="cx" from="50" to="250"
    dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

How to repeat one circle moving around blue circle?

It was easy to make the animation that two circles are moving around the blue circle. But if you want to make the animation that one circle is moving around, you have to switch hide or display the circle alternately. You can't use repeatCount="indefinite".

You can switch hide or display circle by using ID as follows.

Add ID to the both circles such as id="o1", id="o2".
Add begin to each circle and define the start time of the animation.
Set the start time to the end time of the other circle animation(o1.end、o2.end).

<svg>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate id="o1" begin="0;o2.end"
    attributeName="cx" from="250" to="50" dur="5s" />
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate id="o2" begin="o1.end" 
    attributeName="cx" from="50" to="250" dur="5s" />
  </circle>
</svg>

The important point you have to think about is Stacking order.

If the stacking order of the shapes doesn't change during the animation, you can use repeatCount="indefinite" to make loop animation.
You can't use repeatCount="indefinite" if the stacking order will change during the animation. You have to use ID. But it will be complicated when the number of shapes becomes larger. You have to define many IDs when you change the stacking order of the shapes.

Loop animation using dummy loop and relative time

I recommend you to define dummy loop at first, and set each start time by using relative time from the dummy loop as follows.

<svg>
  <rect>
    <animate id="o1" begin="0;o1.end" dur="10s"
    attributeName="visibility" from="hide" to="hide"/>
  </rect>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin" 
    attributeName="cx" from="250" to="50" dur="5.05s"/>
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin+5s" 
    attributeName="cx" from="50" to="250" dur="5.05s"/>
  </circle>
</svg>

<rect> is a dummy object to define the loop time 10 seconds (dur="10s").
id="o1" begin="0;o1.end" means the rect 'o1' will start at 0 second and restart again at the end of animation.
attributeName="visibility" from="hide" to="hide" means the rect will be hidden everytime.
The start time of the orange circle is set relatively to o1.begin (as begin="o1.begin" and begin="o1.begin+5s").
In order to avoid blink in browser, the animation time is set to 5.05 seconds(dur="5.05s").

Example of SVG Loop Animation

The link on the left is an SVG animation (still image in IE). No matter how much you enlarge the screen, it will not be jagged.

SVG	APNG	GIF
01sharks
02ice
03octopus
04torpede
05crab

2D Keyframe animation editor 9VAe

You can make SVG Loop Animation easily by using Openclipart and free software 9VAe.

Download (Click in the following links)	Download from Other	How to Install
9va-win (Windows)	9va-win (Softnic)	windows
9va-mac64 (macOS 10.10-) 9va-mac (Old Ver.10.4-10.9 is here)	9va-mac (Softnic)	mac
9va-pi (Raspberry Pi)	9va-pi (Vector)	pi
9va-pi (Ubuntu/Linux Mint/Xtra-PC (LinuxX86-32bit))		linux
PEAS motch! (Windows / Macintosh) Kids version)

Smartphone
Android / Chromebook	9VAe - Google Play	How to make
iPad	9VAe
iPhone	9VAeDangla
Amazon Fire	9VAe - Amazon

See the following articles if you want more information .

9VAe Lab

DEV Community: Danjiro Daiwa

9VAe Beginner Tutorial 4 - Time Curve, Copy Pages, GIF

Time Curve, Copy Pages

1. Add 'Time Curve'

2. Copy pages

3. Adjust time duration

4. Make animated GIF

Final Words

Related article

9VAe Introduction

9VAe Beginner Tutorials

9VAe Beginner Tutorial 3 - Edit AnimeCast, Loop

Edit AnimeCast

1. Open content of AnimeCast

2. Change shape

3. Add 'Turn' Command

4. Return to parent

5. Adjust animation

Final Words

Related article

9VAe Introduction

9VAe Beginner Tutorials

9VAe Beginner Tutorial 2 - AnimeCast, Time

Make AnimeCast and Rotate

1. Add the third page

2. Cut circles to Clip memory

3. Make AnimeCast.

4. Rotate AnimeCast

5. Adjust time duration of the page

Final Words

Related article

9VAe Introduction

9VAe Beginner Tutorials

9VAe Beginner Tutorial 1 - Input, Select, Move, Resize...

First Step

1. Start 9VAe.

2. Draw circles

3. Add the next page

4. Change color

5. Multiple selections

6. Resize, Move

7. Play

Final Words

Related article

9VAe Introduction

9VAe Beginner Tutorials

9VAe Beginner Tutorial 0 - Overview

User Interface

1.Tool Box

2. Editing Tool

3. Play / Stop button

4. Page Bar

5. Palette(Color, Width, Line types...)

6. Input button (Animation / Sound / Photo)

7. Clip memory (Copy / Cut / Paste / Animecast)

8. Time Control Panel (Time curve, Layer)

9. Select frame handle menu

Final Words

Related article

9VAe Introduction

9VAe Beginner Tutorials

How to make a video with 9VAe

Download 9VAe

1. Open 9VAe > Help > Munch

2. Deform shapes

3. Change colors

4. Export animated GIF

5.Creating an MP4 Video on ezgif.com

How to make a lip-synching animation? : 9VAe

What is a lip-synching animation?

6 key shapes of the mouth

Mouth movements are specified in Romaji

Vowel to vowel

Closed-mouthed consonant

Consonants in the form of the letter "i"

Consonants in the form of the letter "u"

Ignore the other consonants.

Apply to French

French example

The Significance of the Romanized Lipstick