Story of a designer trying to code animations instead of asking a dev to figure it out.

一位設計師嘗試編寫動畫代碼而不是要求開發人員弄清楚動畫的故事。

編碼動畫是Webdesign的未來 (Coded animations are the future of Webdesign)

Because we have access to great tools like Principle, After effect, and others, we tend to imagine and make animations as gifs or videos. They are great because we have visual control over them.

因為我們可以使用諸如Principles，After Effects之類的出色工具，所以我們傾向于將動畫想象成gif或視頻。 它們很棒，因為我們可以對其進行視覺控制。

The challenge of Webdesign and web-based applications is that we need the content to be lightweight to get a faster loading.

Web設計和基于Web的應用程序所面臨的挑戰是，我們需要內容輕巧才能更快地加載。

Just like we started to convert our static illustrations into SVG code we can convert our gifs into SVG code! And this saves a tremendous amount of space.

就像我們開始將靜態插圖轉換為SVG代碼一樣，我們也可以將gif轉換為SVG代碼！ 這樣可以節省大量空間。

If you don’t want to code they are already tools out there for you

如果您不想編碼，那么它們已經為您提供了工具

Some of the most popular products today are the combination of After effect and Lottie or SVGator. These are really powerful and if you want to do complex animation I would definitely recommend them.

今天，一些最受歡迎的產品是After effect和Lottie或SVGator的組合。 這些功能真的很強大，如果您想進行復雜的動畫，我絕對會推薦它們。

Their only downside is that they cost money and could be somewhat hard to understand.

他們唯一的缺點是他們要花錢，可能有點難以理解。

But it’s possible to animate stuff without fancy expensive software, you can do it only armed with your strength of problem-solving and determination. Learning the code in the back-end will help you make better animation as you will understand what is happening on a deeper level.

但是，可以在沒有花哨的昂貴軟件的情況下對事物進行動畫處理，而只有憑借解決問題的能力和確定性，您才能做到。 學習后端的代碼將幫助您制作更好的動畫，因為您將更深入地了解正在發生的事情。

Here are 2 free tools you can use today to make your SVG animations:_Figma, to make the illustration._Visual Studio Code, to make the animation.

以下是您今天可以使用的2個免費工具來制作SVG動畫：_ Figma ，來制作插圖。_Visual Studio Code ，來制作動畫。

Yes, I always go for the free stuff ;-)

是的，我總是去買免費的東西；-)

SVG和動畫簡介 (Introduction to SVG and animation)

An SVG is a file that contains code as an instruction about how something should be displayed on a screen. Because an SVG is only made of code you could have it done directly inside your HTML page, we tend to avoid that because your file would quickly become messy.

SVG是一個文件，其中包含代碼，用于指示如何在屏幕上顯示某些內容。 由于SVG僅由代碼組成，因此您可以直接在HTML頁面中完成它，因此我們傾向于避免這種情況，因為您的文件很快就會變得混亂。

This is the general structure of an SVG:

這是SVG的一般結構：

<svg><object1 "definition of this object" /><object2 "definition of this object" /></svg>

Important to notice is that an SVG is created by reading from top to bottom which means the object 1 is going to be built first and the object 2 is going to be built after on top of object 1.

需要注意的重要一點是，SVG是通過從上至下讀取來創建的，這意味著將首先構建對象1，然后在對象1之上構建對象2。

As designers, we have to think objects are in the reverse order of what we are used to seeing.

作為設計師，我們必須認為對象與我們過去所看到的相反。

This is what we are going to do:

這是我們要做的：

<svg><object "definition of this object" ><animate "do a bunch of cool stuff please" /></object></svg>

The easiest way to get started is to open the object and code the animation we want directly inside of it.

最簡單的入門方法是打開對象并將代碼直接編碼在其中。

An experienced developer would separate animation and object and use the reference link to target what they want. A more modern way to think animation in SVG is to think about all the elements that will behave the same way inside the website and code the animation directly in the CSS spreadsheet and target multiple objects in multiple SVG files.

有經驗的開發人員可以將動畫和對象分開，并使用參考鏈接來定位他們想要的對象。 在SVG中思考動畫的一種更現代的方法是考慮網站內所有行為相同的元素，并直接在CSS電子表格中編碼動畫，并針對多個SVG文件中的多個對象。

Today we just want to get started

今天我們只想開始

充分利用Figma的技巧 (A tip to get the best of Figma)

After trying sketch and what Adobe illustrator I went to the conclusion that Figma what the best to extract a clean SVG code.

在嘗試了草圖和Adobe illustrator之后，我得出了這樣的結論：Figma最好是提取干凈的SVG代碼。

Even better, they added an extra feature to also extract the “name” you defined as “id” inside the SVG.

更好的是，他們添加了一項額外功能，也可以在SVG內部提取您定義為“ id”的“名稱”。

Here is how to do it:

這是操作方法：

獲取有關動畫的文檔的最佳位置 (The best place to get documentation about animation)

In this tutorial, I will mostly use the basic of what is called “SMIL” animation, you can always find more information on CSS-tricks.

在本教程中，我將主要使用所謂的“ SMIL”動畫的基礎，您始終可以找到有關CSS技巧的更多信息。

An interesting point is you will find the syntax can change because I am writing CSS animation directly inside of the HTML SVG file and it is possible to write the animation on a CSS file with the CSS syntax.

有趣的一點是，您會發現語法可以更改，因為我直接在HTML SVG文件內部編寫CSS動畫，并且可以使用CSS語法在CSS文件上編寫動畫。

最后一招，您可能想要使用面具并注意它不起作用。 (One last trick, you might want to use a mask and notice that it doesn’t work.)

In an SVG animation, the objects inside a mask property can’t be animated.You will have to use a feature called “clip-path”

在SVG動畫中，無法對mask屬性內的對象進行動畫處理。您將必須使用稱為“剪切路徑”的功能

In Figma, it’s pretty simple, instead of using the Mask feature you can use the “Clip content” feature for any group that you have created.

在Figma中，這非常簡單，您可以對創建的任何組使用“剪輯內容”功能，而不必使用“蒙版”功能。

Figma will them automatically write a nice SVG file that you can play with.

Figma將自動為他們編寫一個不錯的SVG文件，供您播放。

Alright, now that we have done this let’s get to it. ;-)

好吧，既然我們已經做到了，那就開始吧。 ;-)

步驟1：以線性運動加載 (Step 1: load with a linear movement)

The trick to making stuff move is to use a framework called “AnimateTransform” and an instruction called “Translate”.

使內容移動的技巧是使用一個名為“ AnimateTransform”的框架和一個名為“ Translate”的指令。

“translate” will indicate that we want an object to move.

“ 平移 ”將表示我們希望物體移動。

will assign to our object some “values” to indicate the coordinate of where the object should start and go to.

將為我們的對象分配一些“ 值 ”，以指示對象應開始和到達的位置的坐標。

We write the values as follow:0,0 = Top,Left ; = separator to the next coordinate-60,40 = go 60 pixel down, go 40 pixel right

我們寫的值如下： 0,0 = Top，Left; =下一個坐標的分隔符60,40 =向下移60像素，向右移40像素

We can also indicate a “dur” for the duration and “indefinite” “repeatCount” to control our animation.

我們還可以在持續時間內指定“ dur ”，并在動畫中指定 “ 不確定 ”“ repeatCount ”。

<object ><animateTransformattributeName="transform"attributeType="XML"type="translate"dur="1.5s"values="0,0;-60,0"repeatCount="indefinite"/></object>

You can make any shape and try to move them on the screen just like I did.

您可以制作任何形狀，然后像我一樣嘗試在屏幕上移動它們。

Step2：旋轉游泳的魚。 (Step2: the rotating swimming fish.)

They are different ways to create a swim but the quickest is to a command called “rotate” which is also supported by the “AnimateTransform” framework.

它們是創建泳姿的不同方法，但最快的方法是調用“旋轉”命令，“ AnimateTransform”框架也支持該命令。

“Rotate” in an instruction that takes into consideration an angle and a coordinate for the centre of the rotation.

一條指令中的“ 旋轉 ”，其中考慮了旋轉中心的角度和坐標。

Important: you will need to specify the centre of where your object must rotate from to get the right rotation.

重要提示：您需要指定對象必須旋轉的中心才能獲得正確的旋轉。

We write the values as follow:0 0 0 = “0 deg rotation” “rotate from top corner” “rotate from left corner”; = separate the values

我們將值寫為： 0 0 0 =“ 0度旋轉”“從上角旋轉”“從左角旋轉”； =分隔值

<object ><animateTransformattributeName="transform"attributeType="XML"type="rotate"dur="2s"values="-1.5 30 -10;1.5 30 -10;-1.5 30 -10"repeatCount="indefinite"/></object>

Note that here I indicated 3 coordinates as I would like my object to start with a -1.5 degree angle rotate to +1.5 and go back to -1.5.

請注意，在這里我指定了3個坐標，因為我希望我的對象從-1.5度角開始旋轉到+1.5，然后回到-1.5。

Special trick: you can rotate an object with some property and then rotate a group with different properties.

特殊技巧 ：可以旋轉具有某些屬性的對象，然后旋轉具有不同屬性的組。

You can also learn more about rotation and how to make a rotating loading with this tutorial:

您還可以通過本教程進一步了解旋轉以及如何進行旋轉加載：

第三步：燈塔背后的秘密 (Step3: the secret behind the lighthouse)

There is a secret behind the lighthouse. In this example, this is not the light that is moving (something we could also do with a path change) but it’s the sky who is rotating around the light source.

燈塔后面有一個秘密。 在此示例中，這不是正在移動的燈光(我們也可以通過更改路徑來做到這一點)，而是圍繞光源旋轉的天空。

Trying things that are not straight forward really provide a chance to learn new techniques of animations.

嘗試一些并非直截了當的事情確實可以提供學習動畫新技術的機會。

This is how the scene is staged:

這是場景的上演方式：

It’s okay if your animation is not perfect, mine is struggling too…This is really where we see the limits of animating directly in code, I had to slowly move might rotating values to get something somewhat acceptable.

如果您的動畫不完美也可以，我的也很掙扎……這確實是我們看到直接在代碼中設置動畫的局限性的地方，我不得不慢慢移動可能旋轉的值以獲得某種可以接受的效果。

I would be curious to see how you solved this problem ;-)

我很想知道你是如何解決這個問題的;-)

步驟4：通過SVG路徑進入太空 (Step4: go in space with SVG path)

Alright, now that we know the trick of the “AnimateTransform” framework it’s time you learn about the new cool stuff of “AnimateMotion”.

好了，現在我們知道了“ AnimateTransform”框架的訣竅，是時候學習“ AnimateMotion”的新功能了。

To get started we will do something simple, moving a circle along a path.

首先，我們將做一些簡單的事情，沿著路徑移動一個圓。

A circle is an object composed of a location coordinate “cx” and “cy” for the x and y axis and “r” for the size of its rayon.

圓是一個對象，由x和y軸的位置坐標“ cx”和“ cy”以及其人造絲的大小的“ r”組成。

<circle id="Venus" cx="10" cy="20" r="3" fill="#FC5FAB">

To animate this element we will indicate a “begin” time, state that the “fill” should be “freeze” to be maintained and a “path” along wich it should move.

動畫這個元素，我們將指示“ 開始 ”的時候，國家的“ 填充 ”應該是“ 凍結 ”，以維持并沿至極應該移動“ 路徑 ”。

<circle id="Venus" cx="0" cy="0" r="3" fill="#FC5FAB"><animateMotiondur="3s"begin="0"repeatCount="indefinite"fill="freeze"path="M-6 84.5C-6 84.5 7.5 65 30.5 65C53.5 65 66.5 84.5 66.5 84.5" /></circle>

notice that because I am asking a circle to move along a path in an animation I need to set up it’s coordinate (cx and cy) to “0” as they will be attached to the path coordinate.

請注意，因為我要讓圓沿著動畫中的路徑移動，所以我需要將其坐標(cx和cy)設置為“ 0”，因為它們將附加到路徑坐標上。

“AnimateMotion” is a different framework than “AnimateTransform” unfortunately if you try to combine them both you will run a jigsaw of almost uncontrollable animation.

不幸的是，“ AnimateMotion”和“ AnimateTransform”是一個不同的框架，如果您嘗試將兩者結合起來，則會運行幾乎無法控制的動畫拼圖。

Fortunately, you can do all sorts of cool stuff with “AnimateMotion” too, you can learn about them here:

幸運的是，您也可以使用“ AnimateMotion”來做各種很酷的事情，您可以在這里了解它們：

This is pretty advanced stuff (that I don’t think I can even do), so you might want to take your time with this ;-)

這是相當高級的東西 (我什至認為我做不到)， 所以您可能想花點時間;-)

你真棒！ (You are AWESOME!)

You made it to here and hopefully tried some of these exercises, I bet you animation skills are getting to the rooftop. I can’t wait to see how you will integrate this new skill to your websites and solutions.

您到了這里，并希望嘗試了其中的一些練習，我敢打賭，動畫技能已經達到了頂峰。 我等不及要看您如何將這項新技能整合到您的網站和解決方案中。

Perhaps you will go even further and design complex animation with one of those programs I talked about in the beginning but if you do I hope you learn something useful about how it works in the back end.

也許您會更進一步，并使用我在開始時提到的其中一個程序來設計復雜的動畫，但是如果您愿意的話，我希望您能學到一些有關動畫在后端如何工作的有用信息。