A Real Madrid 2023/2024 beautiful Animation Concept SwiftUI
real-madrid-animation-SwiftUI-1080.mov
- Drawing a Real Madrid Logo
- Create a Sponsor Logo
- Create a Content Shirt
- Create a complete Shirt
- Create a Buy button
- Putting all the pieces together
The main idea is to use Bézier curves to draw the Real Madrid logo. We will follow the following process:
- Obtain the Real Madrid logo in SVG format.
- Convert the SVG to Bézier curves. For this, we will use the following website: https://swiftvg.mike-engel.com/
- Create shapes using the Bézier curves obtained in the previous step.
- In a
ZStack
, overlay all the shapes that form the Real Madrid logo. - Add animations to the shapes.
Pro tip: play with the modifiers trim
, stroke
, and fill
to achieve the desired effect.
To create the "Emirates Fly Better" sponsor logo, follow these steps:
- Obtain the appropriate typography for the logo.
- Create a view that includes a
VStack
container. - Inside the
VStack
, addText
elements with the required words.
Pro tip: By doing it this way, we will have greater flexibility if we want to modify the phrase or adjust its size.
Now, we will create a view that contains all the content for the t-shirt. It will have 3 main elements: the sponsor logo, the Real Madrid logo, and the Adidas logo. For the sponsor logo and the Real Madrid logo, we will use the previously created views. For the Adidas logo, we will use a PNG image.
To create the t-shirt view with the sponsor, Real Madrid, and Adidas logos, follow these steps:
- Create a
GeometryReader
container. - Place the Real Madrid logo in the center of the screen and wait for the drawing animation to complete.
- Use the
position
modifier and thescaleEffect
modifier to move the logo to the top-right corner of the screen and reduce its size. - Once the Real Madrid logo is in position, make the sponsor and Adidas logos visible using modifiers like
opacity
orhidden
.
Pro tip: By keeping the animation duration and transition values in variables, you can easily synchronize animations across multiple elements.
Pro tip: Create a structure that contains the mentioned values and pass them through the constructor. This enables you to experiment with different values more easily, whether in previews or higher-level views.
Pro tip: For the ZoomOut effect of the Real Madrid logo, utilize keyframeAnimator
to have finer control over the animation.
To create the complete t-shirt, we will use the previously created ShirtContentView view to represent the t-shirt's content. To display the t-shirt's border, we will use a PNG image.
The strategy will be similar to the previous views. Within a GeometryReader, we will instantiate a ShirtContentView and an Image representing the borders. Initially, the Image will be hidden.
- Create a
GeometryReader
container. - Instantiate a
ShirtContentView
within theGeometryReader
. - Add an
Image
representing the t-shirt's borders, initially hidden. - Allow the appear animation of the
ShirtContentView
to complete. - Apply a
scaleEffect
to theShirtContentView
and simultaneously apply the same effect to theImage
, making it visible.
By following these steps, you can create a dynamic t-shirt view with the desired animations and effects, including the ZoomOut effect for the content and the visibility of the t-shirt's borders.
Pro tip: To achieve a ZoomOut effect that you find appealing, experiment with adjusting different values using the scaleEffect
modifier.
To create the button view, follow these steps:
- Use
VStack
andHStack
to create the desired button layout. - Add a
Button
with the required content and style within the structure. - Add Animations.
Pro tip: Use the phaseAnimator
to achieve the desired effect on the button. Experiment with different configurations and adjustments until you achieve the visually appealing result you desire.
We will now put everything together.
- Within a
GeometryReader
, instantiate theShirtView
and theButtonView
, with theButtonView
initially hidden. - Allow the entrance animation of the
ShirtView
to complete. - Use the
offset
modifier to move theShirtView
slightly upward. - Simultaneously, make the
ButtonView
visible.
Pro tip: To add a final touch and enhance the visual appeal, activate the animation of the Real Madrid logo within the ShirtContentView
using the KeyframeAnimator
.
By enabling this animation, you can bring the Real Madrid logo to life, adding a dynamic element that further enhances the overall composition.