Today, with the help of Google Web Designer, we will learn how to transform one simple geometric shape into another, and then into a third. For example, a circle in a square with rounded corners, and then in a square.
If you don’t know how to create a square or circle in Google Web Designer, see this post.
1. Create a banner. As in the last lesson – I take as a basis the size of 300×600 pixels with a fast animation mode.
2. Using the “Work with Tags” tool, create a circle, and for clarity, fill it with yellow. The border is 10 pixels thick and black. Let me remind you that you can adjust the shape fill, as well as work with other parameters using the “Properties” panel, located on the right:
4. And now we begin to transform the circle into a square with rounded corners. To do this, on the first frame, select the starting position of our figure, and on the second – the ending position, and using the “Properties” panel (recall, it is on the right) – we transform the circle into a square with rounded corners. To adjust the angles, use the property responsible for drawing angles:
In the screenshot above – the properties of the drawn corners, thanks to which a circle is created. If we want to get a square with rounded corners – just change the parameter from 80 to (for example) 30. As a result, we get something similar:
As you can see – the circle that we created on the first slide is very simple, and most importantly – automatically – it transforms into a square with rounded corners, shown on the second slide (you can see how this happens on the frame below. I emphasize that in the example the transformation is looped for endless repetition , but we will discuss this issue a bit later :)) (upd: the demo for some reason does not work in the Chrome browser, but works great in Opera):
6. Now let’s try to transform a square with rounded corners into a simple square. For the interest of the experiment, we will also change the fill color of the figure from yellow to green. To do this, similarly to paragraph 3, add a keyframe on the timeline:
in which we indicate the parameters of our figure (in our case, these are the parameters for rounding the corners, as well as the fill color – for this, I remind you, use the “Properties” panel located on the right). Adjust the rounding to zero, and fill the shape with green:
After that, we start our animation, and enjoy: the yellow circle becomes a square with rounded corners, and after that it transforms into a green square.
And especially for you – a video tutorial 🙂
Thanks for your attention!
Repost to your page, and in case of questions – do not hesitate to ask !