DEV Community: Adam WaƘiƑ

Difference between Null and Blank in Django Model

Adam WaƘiƑ — Sat, 12 Mar 2022 12:16:44 +0000

In Django, many of us have some confusion between these two fields in a model Null and Blank, in short:

Null is related to a database.
Blank is related to an HTML form.

When we set:

null=True which means that we inform our database that we can store empty value as NULL, no-value, without any data, ( Default value of null is False ).
blank=True which means that our Form, our input will have a required attribute set to false ( by default is true ), then allow the user to enter an empty field, ( Default value of blank is False which means the required attribute is True ).

Question

You may ask yourself when we have string-based fields in a model such as CharField and TextField, Null and Blank fields are set to True, then Django stores an empty string (" ") in a database instead of Null, WHY 🤔🤔?

Answers

First because when our user submits an empty value, our input will return an empty string ( HTML inputs type="text" are always return string values ).
Second, and this important is Null in SQL world is treated as Falsy value and Blank ( empty string ) in Python world is also Falsy.

Therefore, it would be inefficient and redundant for Django to deal with two possible values that are treated as Falsy values ( No data & Empty String ).

Summary

Since the HTML input returns a string value at the end, Django preferred to use an empty string (" "), not Null.

Difference between Text-Align-Center and Margin-Auto

Adam WaƘiƑ — Tue, 08 Mar 2022 17:26:56 +0000

In CSS to center an element horizontally, you might think that Flex and Grid can solve your problem. BUT,

text-align: center or margin: auto can also do the trick 🪄

Therefore, knowing the difference between text-align: center and margin: auto will help a lot, it's also a bit tricky in CSS, let me explain their similarities:

Both properties are:

used ONLY in block elements.
used ONLY to specify horizontal alignment.

The difference:

margin: auto used to center an HTML element.
text-align: center used to center an element content.

By the way,

HTML Element is everything from the start tag to the end tag including HTML tags.
Element Content is everything between the tags.

It looks a bit overwhelming 😅, look at the picture.

#first-green-box {
    background: green;
    text-align: center;   
}

First green box we have a width of 100%, because by default a block element takes up the full width available of its parent, in our case, is the Body element, therefore, the element content, the text, will be centered horizontally within its container, opening and closing tag ( <p></p> ).

If we centered the element content to the right, will get this result:

#first-green-box {
    background: green;
    text-align: right;   
}

#second-green-box {
    width: 500px; // new
    background: green;
    text-align: center;   
}

Second green box is the same as the first, we are just showing and confirming that text-align: center depends on the width of its container, opening and closing tag, not on the Body element.

From it, we conclude that the text inside our <p> Tag will be centered horizontally within the width of opening and closing tag.

#third-green-box {
    width: 500px; 
    margin: auto; // new
    background: green;
    text-align: center;   
}

Third box, if we added a specific width to our HTML element, and we want to center it within its parent horizontally, I Emphasize here we want to center an element horizontally the HTML Element, not the Element Content, not within its opening and closing tag. we want to center the HTML Element itself within another HTML Element.

In other words, make a block element in the center of another block element.

In this case, we will use the power of margin: auto, no Flex, no Grid only auto, auto, can solve our problem. Therefore, left and right margins will be split equally.

Notice if we remove text-align, the element content will return to the default value of text-align, left, and will have no effect on the HTML element, to be in the center.

#third-green-box {
    width: 500px; 
    margin: auto;
    background: green;
}

We conclude that margin: auto has an effect on the HTML element, not on the element content, this is why when we apply margin: auto on HTML element that its full-width depends on Body element, will not work, nor will it have any effect.

Summary

In a nutshell, if you're trying to center an element horizontally and it doesn't work for you, ask yourself three things:

Is this element an HTML element or Element Content?
Does this element have a specific width or not?
What is its parent?

To be honest with you, the key to this is if you understand the difference between HTML Element and Element Content, you're good to go.

The full code for this image below is available on CodePen.

Explore Animation in SwiftUI - PART 2

Adam WaƘiƑ — Sat, 11 Sep 2021 11:39:47 +0000

Let's continue our journey.

In the PART 1, we talked about the type of animation, the difference between Implicit and Explicit animation, how animation works, and we said that animation changes over time from its initial state to its final state, and there are four steps to follow to animate an object in SwiftUI, we called them the dancing rhythm of animation. Which were:

Create a state variable for the object's property
Add the states variables to the properties we want to animate.
Define how we trigger the animation using user interaction.
Add animation modifier to the properties.

From the previous lesson, you may have some questions on your mind about:

What is .easeIn parameter?
How do we control the duration of our animation?
How do we delay the start of our animation work?
How do we repeat and reverse our animation?

Therefore, today we'll talk about other parameters that the .animation() modifier has.

So, fasten your seat belts, and let's sail our world.

Project

As usual, let's open Xcode then create a new project.

This is the pretty swanky animation that we're going to cook.

Now, without wasting more time on design, copy the following code snippet, then I will explain it to you.

var body: some View {

   HStack(spacing: 15){

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.02352941176, green: 0.8392156863, blue: 0.6274509804, alpha: 1)))
                .frame(width: 10, height: 60)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 1, green: 0.8196078431, blue: 0.4, alpha: 1)))
                .frame(width: 10, height: 40)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.937254902, green: 0.2784313725, blue: 0.4352941176, alpha: 1)))
                .frame(width: 10, height: 60)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 1, green: 0.8196078431, blue: 0.4, alpha: 1)))
                .frame(width: 10, height: 40)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.02352941176, green: 0.8392156863, blue: 0.6274509804, alpha: 1)))
                .frame(width: 10, height: 60)
        }
    }

Here we only have five Capsule shapes that have different heights with a spacing of 15, nothing complicated.

Before we continue, we'll switch our simulator from light to dark mode, by pressing Command + Shift + A, then this is the result, of course, without any animation.

The first thing we have to do to animate something by following the dancing rhythm of the animation steps is what? Yes, your answer, friend.

You are amazing, that's right, is:

1. Create a state variable for the object's property.

We want to animate the spacing within our HStack. Therefore, the property or parameter that needs to animate is spacing.

 @State private var spacingAnimation: CGFloat = 15

Afterward, the second step is what?.
Fantastic, yes it is.

2. Add the states variables to the properties we want to animate.

So, we'll add our state to spacing.

 HStack(spacing: spacingAnimation){
               .
               .
               .
}

If we understand the four steps to animate an object ( the dancing rhythm of animation ) well, we can animate anything, not only opacity or color.

Now, the third step is:

3. Define how we trigger the animation using user interaction.

As we learned from PART 1, we need something that can trigger our animation. we have onTap, onDrag, onAppear when loading the screen the first time, even when the user scrolls in our app.

This time we'll be using, onAppear modifier, and we'll define the final state of our animation in it.

So add it in HStack.

  HStack(spacing: spacingAnimation){
              .  
              .
              .

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.02352941176, green: 0.8392156863, blue: 0.6274509804, alpha: 1)))
                .frame(width: 10, height: 60)
        }
        .onAppear{
         spacingAnimation = 5
       }

I think we're now familiar with the steps. So the last step is:

4- Add animation modifier to the properties.

Where do you think we should add it?

Exactly, in HStack, It is the one that contains the property we want to animate.

  HStack(spacing: spacingAnimation){
              .  
              .
              .

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.02352941176, green: 0.8392156863, blue: 0.6274509804, alpha: 1)))
                .frame(width: 10, height: 60)
        }
        // Here
        .animation(.easeIn)
        .onAppear{
         spacingAnimation = 5
       }

Before we continue, this is the complete code we have so far.

struct LessonTwo: View {

    @State private var spacingAnimation: CGFloat = 15

    var body: some View {

        HStack(spacing: spacingAnimation){

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.02352941176, green: 0.8392156863, blue: 0.6274509804, alpha: 1)))
                .frame(width: 10, height: 60)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 1, green: 0.8196078431, blue: 0.4, alpha: 1)))
                .frame(width: 10, height: 40)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.937254902, green: 0.2784313725, blue: 0.4352941176, alpha: 1)))
                .frame(width: 10, height: 60)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 1, green: 0.8196078431, blue: 0.4, alpha: 1)))
                .frame(width: 10, height: 40)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.02352941176, green: 0.8392156863, blue: 0.6274509804, alpha: 1)))
                .frame(width: 10, height: 60)
        }
        .animation(.easeIn)
        .onAppear {
            spacingAnimation = 5
        }
    }
}

The result.

Answers

We still haven't achieved the desired end result, Therefore, let's answer the questions that were on our minds.

1. What is .easeIn parameter?

It's the animation Curve.

Curve: the speed of the animation. In other words, how does the animation move? Does it move at a constant speed, or whether it starts out slow and speeds up? or what?.

SwiftUI provides us the following basic animation curves:

linear: animation at a constant speed.

easeIn: animation starts slowly and ends at a quick speed.

easeOut: animation starts quickly and ends at a slow speed ( the opposite of easeIn ).

easeInOut: animation starts slowly, speeds up, and then ends at a slow speed.

BUT, why did we say basic animation?

Because we can create our own custom curve, which is not our topic today, we'll talk about it later in Advanced Animation, when we want more customization in our animations.

Therefore, these are the four curves that you'll use most of the time in your projects.

In our case, we'll use .easeInOut

    .animation(.easeInOut)

2. How do we control the duration of our animation?

The .easeInOut is a static property or variable which is of type Animation struct.

Animation struct has two names of .easeInOut, one is a static variable, the second is a static method. Which needs a required argument, it is duration. But what is this? Why do we need it?

Duration parameter: the length of the animation. In other words, how long will the animation take from its initial state to its final state?.

By default, the duration of the animation in SwiftUI is 0.35 seconds. So, temporarily we'll use 4 seconds.

    .animation(.easeInOut(duration: 4))

As you can see, we've got an animation that slowly changes its state.

Before move on. I'm sure you're a little confused between duration and curve.

You might think that if we had a quick-speed animation such as .easeOut ( starts quickly and ends at a slow speed ), our animation would finish before the time we set. NO, the time is fixed, and depending on the type of speed we chose, the animation speed will be evenly distributed during that time.

3. How do we delay the start of our animation work?

It's easy, just by adding a delay method next to .easeInOut.

We'll add a delay of 4 seconds.

    .animation(.easeInOut(duration: 4).delay(4))

4. How do we repeat and reverse our animation?

By adding another method which is repeatForever.

    // I changed the duration and delay to 1 second

    .animation(.easeInOut(duration: 1).delay(1).repeatForever())

By the way, These methods are called chained methods.

Now, our object animates from its initial state to its final state, afterward, our animation repeats from its final state to its initial state

IMPORTANT TO UNDERSTAND

When our object changes from the initial state to the final state, here the animation lifecycle ends, is what it's over, and when we ask SwiftUI to repeat the process, it creates a new lifecycle for our animation, a second or third lifecycle. It depends on how often the process will be repeated.

I hope you understand it well, because lots of developers have confusing about this concept.

Back to our project, if you notice that we have four methods repeatForever:

repeatForever(): ...

 From initial => final state. Going back, from final => initial state.

repeatForever(autoreverses: Bool): ...

 autoreverses = true : The result will be as mentioned above ( the default ).

 autoreverses = false : Here's the trick.

 From initial => final state. Going back, from initial again => final state.
 Our animations will always repeat from the starting point.

Did you noticed the difference between True and False, I don't think there are more words to explain, the GIF made your eyes understand this trick part, be careful about it.

repeatCount(repeatCount: Int): specify how many animation lifecycles, or repeats we want.
repeatCount(repeatCount: Int, autoreverses: Bool): specify the number of repeats with autoreverses, False or True.

Trick About Delay

The position in which we put the delay method is matters.

When we add it after easeInOut(), the delay will occur in the first lifecycle and second, third, and so on.

Therefore, when going back from the final state to the initial state, the delay will occur again.

    .animation(.easeInOut(duration: 1).delay(1).repeatForever())

But, when we add it after repeatForever(), the delay will only happen once, only at the beginning of the animation.

    .animation(.easeInOut(duration: 1)).repeatForever().delay(1))

Complete Code

Already I have created some SwiftUI Loading Animation, you can use them freely in your project. Also, you will find some things, we still haven't talked about it yet.

My Repository: https://github.com/adamkif/SwiftUI-Loading-Animation

struct LessonTwo: View {

    @State private var spacingAnimation: CGFloat = 15

    var body: some View {

        HStack(spacing: spacingAnimation){

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.02352941176, green: 0.8392156863, blue: 0.6274509804, alpha: 1)))
                .frame(width: 10, height: 60)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 1, green: 0.8196078431, blue: 0.4, alpha: 1)))
                .frame(width: 10, height: 40)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.937254902, green: 0.2784313725, blue: 0.4352941176, alpha: 1)))
                .frame(width: 10, height: 60)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 1, green: 0.8196078431, blue: 0.4, alpha: 1)))
                .frame(width: 10, height: 40)

            Capsule(style: .continuous)
                .fill(Color(#colorLiteral(red: 0.02352941176, green: 0.8392156863, blue: 0.6274509804, alpha: 1)))
                .frame(width: 10, height: 60)
        }
        .animation(.easeInOut(duration: 1).repeatForever().delay(1))
        .onAppear {
            spacingAnimation = 5
        }
    }
}

Summary

Today we became know almost 90% of the knowledge about how to animate an object, curves ( easeIn, ... ), delay, repeatForever, repeatCount and autoreverses.

In the next lesson, we'll figure out the other 10%, which will be about animating an object from one state with many points that need to go through before getting the final state ( sequence of animation ), creating our custom curve, and much more.

Explore Animation in Flutter - PART 1

Adam WaƘiƑ — Mon, 30 Aug 2021 18:28:06 +0000

In the last lesson, we took some theories about animation, therefore, today we're going to make our hands dirty, learn by doing. BUT, Hold on.

We need to understand important concepts of animation before jumping into the code, bring your own coffee and focus with me POR FAVOR.

In our life, if you have a glass of water and feel thirsty, what organism in your body would you use to drink water, of course, you would use your hand which in turn is part of the arm to hold a glass of water, naturally, you would not use your ear 😅😅.

We're not in Physiology classes on the human body. Do not panic.

Hence, The object is your arm, and the property is your hand, the initial state of your hand was close to you, then you moved your arm and specifically the property of your hand to the final state to hold a glass of water and drink it.

Animation works like this, we need to know the object whose state we want to change, and specify the property of the object we want to animate, such as opacity or color properties.

To jump into the code, you should know that there are two types of animations:

Code-based animations: animations implemented via code, such as animate the size of this object, scale, position, opacity, color, and rotation angle.
Drawing-based animations: these animations look like someone drew them, usually done using Custom Painter. Custom Painter.

Drawing-based animations are advanced animations, so don't worry, we'll learn them until we've mastered code-base animations and most of the time developers use external packages of this type of animation, like Lottiefiles or GIFs.

Therefore, our focus will be on Code-based animations which in turn has two types:

Implicit animations: programmed and designed within pre-existing constraints, like an Electric Car, we're out of control for this kind of animation.
Explicit animations: this is the opposite of implicit animations, we're more control, we can make any kind of animation in your imagination. You are the driver here, not the Tesla Car.

I know these definitions mean nothing to you now but it's the heart of animation if you understand it, you're halfway to animating anything. At the end of this lesson, I will explain the difference between implicit and explicit animation in more detail.

I'm going to explain the Implicit animations, the Explicit animations will be in PART 3 of this series, all right.

Implicit Animation

Let's get started,

If you visit the Flutter docs you'll find some built-in animations, all widgets that start with Animated... such as AnimatedOpacity are implicit animations, except for AnimatedBuilder we will use it for explicit animations. Other animations like ScaleTransition are explicit animations as well, which we'll talk more about in the next lesson.

Now, open Visual Studio Code or Android Studio, and create a new project, after that, create a StatefulWidget because the animation depends on the state that changes over time, then create the object we want to animate, the object is a Container.

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 140,
              height: 140,
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.zero,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Before continue, there are four steps to follow to animate an object in Flutter, they are the dancing rhythm of animation, these steps only apply to the implicit animations.

1. Create a state variable for the object's property.

In our case, we want to animate the Color and Border Radius property, therefore, we'll define the initial state of those properties.

 Color rectColor = Colors.green;
 double rectRadius = 0;

2. Add the state variable to the properties we want to animate.

To the color and borderRadius parameters.

 Container(
    width: 140,
    height: 140,
    decoration: BoxDecoration(
    color: rectColor,
    borderRadius: BorderRadius.circular(rectRadius),
   ),
 ),

3. Define how we trigger the animation using user interaction.

By onTap, onDrag, initState() method when loading the screen the first time, even when the user scrolls in our app. something can run out of our animation.

We'll use a button to trigger our animation, therefore, we'll define the final state of our properties, Color and Borde Radius.

Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
        Container(
            width: 140,
            height: 140,
            decoration: BoxDecoration(
              color: rectColor,
              borderRadius: BorderRadius.circular(rectRadius),
            ),
          ),
          SizedBox(
            height: 140,
          ),
          ElevatedButton(
            child: const Text(
              'Animate the Box',
              style: TextStyle(fontSize: 20),
            ),
            style: ElevatedButton.styleFrom(
              padding:
                const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                primary: Colors.blueAccent,
            ),
            onPressed: () {
                setState(() {
                // Here
                rectColor = Colors.pink;
                rectRadius = 50;
                });
           },
          ),
        ],
   ),

Our design will be like this:

If you click the button to trigger the animation, you'll notice that the state of the object will immediately change from 0 to 50 without any smooth animation. It's boring for your eyes, it's not realistic, in our life, things don't move like that, I'm right.

Therefore we will need to add one of the built-in animations to ask Flutter,

Please change the state of the object properties from square to circle in a smooth manner.

So, the fourth step is:

4- Add one of the built-in animations to the widget.

In our case, we'll use AnimatedContainer class. therefore, replace the Container with it.

AnimatedContainer(
    width: 140,
    height: 140,
    decoration: BoxDecoration(
    color: rectColor,
    borderRadius: BorderRadius.circular(rectRadius),
   ),
 ),

The AnimatedContainer needs a required argument, it is duration. But what is this? Why do we need it?

Duration parameter: the length of the animation. In other words, how long will the animation take from its initial state to its final state?.

The duration parameter is the type of Duration class, and you'll always use milliseconds or seconds argument. Therefore, our code will look like this.

AnimatedContainer(
    width: 140,
    height: 140,
    duration: Duration(seconds: 1),
    decoration: BoxDecoration(
    color: rectColor,
    borderRadius: BorderRadius.circular(rectRadius),
   ),
 ),

Now, build your app and run the animation, you'll get a smooth animation, the states gradually change from the initial state to the final state, and Flutter automatically computes and renders the animation, that's what I mean by state changes over time. Your eyes can see changes that happen gradually rather than immediately.

The second parameter we need to know is the curve.

Curve: the speed of the animation. In other words, how does the animation move?. Does it move at a constant speed, or whether it starts out slow and speeds up? or what?.

The curve parameter is the type of Curve class. By default, the curve has a constant speed, it's linear, what we mean by that. Open in a new tab Flutter docs, you'll find many types of speeds. Those who use a lot in animation are:

linear: animation at a constant speed.
easeIn: animation starts slowly and ends at a quick speed.
easeOut: animation starts quickly and ends at a slow speed ( the opposite of easeIn ).
easeInOut: animation starts slowly, speeds up, and then ends at a slow speed.

Therefore, our code will look like this.

AnimatedContainer(
    width: 140,
    height: 140,
    curve: Curves.easeIn,
    duration: Duration(seconds: 1),
    decoration: BoxDecoration(
    color: rectColor,
    borderRadius: BorderRadius.circular(rectRadius),
   ),
 ),

I'm sure you're a little confused between duration and curve.

You might think that if we had a quick-speed animation, our animation would finish before the time we set. NO, the time is fixed, and depending on the type of speed we chose, the animation speed will be evenly distributed during that time.

Perfect, if we want to delay one animation from another, I mean the Border Radius will start first and after a second the color will be animated. We can implement it using Future.delayed constructor. Try it like this:

ElevatedButton(
          child: const Text(
             'Animate the Box',
             style: TextStyle(fontSize: 20),
           ),
           style: ElevatedButton.styleFrom(
             padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),                
             primary: Colors.blueAccent,
           ),
           onPressed: () {
             setState(() {
               rectRadius = 50;
             });
             Future.delayed(const Duration(seconds: 1), () {
               setState(() {
                 rectColor = Colors.pink;
               });
             });
           },
        ),

The result:

The problem

So far, there is nothing wrong with this approach, our animation starts from the initial state to the final state, without any problem.

The question is what if we want to reverse our animation to bring it back from its final state to its initial state?.

One solution is to use the ternary operator syntax, and we'll use it in the ElevatedButton. So, our code will look like this.

Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
        AnimatedContainer(
           width: 140,
           height: 140,
           curve: Curves.easeIn,
           duration: Duration(seconds: 1),
           decoration: BoxDecoration(
             color: rectColor,
             borderRadius: BorderRadius.circular(rectRadius),
           ),
         ),
         SizedBox(
           height: 140,
         ),
         ElevatedButton(
           child: const Text(
             'Animate the Box',
             style: TextStyle(fontSize: 20),
           ),
           style: ElevatedButton.styleFrom(
             padding:
               const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
               primary: Colors.blueAccent,
           ),
           onPressed: () {
               setState(() {
               // I removed the Future.delayed constructor

               // The ternary operator 
               rectColor = rectColor == Colors.green ? Colors.pink : Colors.green;
               rectRadius = rectRadius == 0 ? 50 : 0;
               });
           },
          ),
        ],
   ),

We'll get this result, on the first press, our object or container, animating from its initial state to its final state, to bring it back to its initial state we need to press again. Excellent.

Another question. What if we want to animate several properties, and we want to delay all of them. We'll get a chain of Future.delayed constructors, so it's not clean code, and it can also glitch during this process.

The last question. What if we want our animation to be repeated forever?. Unfortunately, we don't have a solution for this.

Now, do you see the problems we're having with implicit animations?. It is not a good solution for complex animations.

Here, where explicit animations shine through, it answers all the questions we have in mind, even with the ability to pause the animation in the middle of changes and resume later, it's absolutely amazing.

In nutshell, only use implicit animation in simple animation, animation that will run once from the initial state to the final state.

And of course, feel free to play with other built-in animations, if you understand today's lesson you'll find it easy for you. Because, to be honest with you I want to focus more on explicit animation, which will make us have a solid knowledge of animation.

Summary

This is how the animation behaves in our app is not a magical thing, all the animation we see in our life we can implement via code, but only if we understand how the animation changes from its initial state to its final state. In the next lesson, we'll continue our journey and dig deeper into the explicit animations.

Explore Animation in SwiftUI - PART 1

Adam WaƘiƑ — Fri, 27 Aug 2021 12:06:30 +0000

In the last lesson, we took some theories about animation, therefore, today we're going to make our hands dirty, learn by doing. BUT, Hold on.

We need to understand important concepts of animation before jumping into the code, bring your own coffee and focus with me POR FAVOR.

We're not in Physiology classes on the human body. Do not panic.

Animation works like this, we need to know the object whose state we want to change, and specify the property of the object we want to animate, such as opacity or color properties.

To jump into the code, you should know that there are two types of animations:

Code-based animations: animations implemented via code, such as animate the size of this object,
scale, position, opacity, color, and rotation angle.
Drawing-based animations: these animations look like someone drew them,
usually done using paths.

Drawing-based animations are advanced animations, so don't worry, we'll learn them until
we've mastered code-base animations and most of the time developers use external packages of this type of animation, like Lottiefiles or GIFs.

Therefore, our focus will be on Code-based animations which in turn has two types:

Implicit animations: changes the object's properties caused by animation() modifier.
Explicit animations: changes the object's properties caused by withAnimation() closure.

I know these definitions mean nothing to you now but it's the heart of animation if you understand it, you're halfway to animating anything. Also at the end of this lesson, I will explain the difference between implicit and explicit animation in more detail.

I'll explain the Implicit animations first, then the Explicit animations, all right.

Implicit Animation

Let's get started, open Xcode, and create a new project, then create the object we want to animate, the object is Rectangle.

 var body: some View {
        VStack{

            Rectangle()
                .fill(color.green)
                .frame(width: 100, height: 100)
                .cornerRadius(3.0)

    }
}

Before continue, there are four steps to follow to animate an object in SwiftUI, they are the dancing rhythm of animation.

1. Create a state variable for the object's property.

In our case, we want to animate the Color and Corner Radius property, then define the initial state of those properties.

@State private var rectColor: Color = Color.green
@State private var rectCornerRadius: CGFloat = 0

2. Add the properties to the modifiers we want to animate.

To .fill() and .cornerRadius() modifiers.

 var body: some View {
        VStack{

            Rectangle()
                .fill(rectColor)
                .frame(width: 100, height: 100)
                .cornerRadius(rectCornerRadius)

    }
}

3. Define how we trigger the animation using user interaction.

By onTap, onDrag, onAppear when loading the screen the first time, even when the user scrolls in our app. something can run out of our animation.

We will use a button to trigger our animation, then define the final state of our properties, Color and Corner Radius.

 VStack(spacing: 140){

       Rectangle()
                .fill(rectColor)
                .frame(width: 100, height: 100, alignment: .center)
                .cornerRadius(rectCornerRadius)

            Button(action: {
                rectColor = Color.pink
                rectCornerRadius = 50
            }) {
                Text("Animate the Box")
                    .foregroundColor(.white)
                    .bold()
            }
            .padding()
            .background(Color.blue)
            .cornerRadius(15)
        }

Our design will be like this:

Therefore we will need to add a modifier to ask SwiftUI,

Please change the state of the object properties from square to circle in a smooth manner.

So, the fourth step is:

4- Add animation modifier to the properties.

  VStack{

        Rectangle()
                .fill(rectColor)
                .frame(width: 100, height: 100)
                .cornerRadius(rectCornerRadius)
                .animation(/*@START_MENU_TOKEN@*/.easeIn/*@END_MENU_TOKEN@*/)
    }

Now build your app and run the animation, you'll get a smooth animation, the states gradually change from the initial state to the final state, and SwiftUI automatically computes and renders the animation, that's what I mean by state changes over time. Your eyes can see changes that happen gradually rather than immediately.

Wait a minute, what about .easeIn parameter, where did it come from, what is its role?

In nutshell, it is the speed of the animation, how does the animation move, does it move at a constant speed or slow, or what, we will explore more details about it in PART 3 with other parameters.

We're not done yet, you should be aware of something, .animation() modifiers will only apply to all properties directly above it, nothing below will not. move the animation modifier over the corner radius property, you'll notice strange behavior, the corner radius state changes instantly instead of being smooth. So be aware.

  VStack{

      Rectangle()
                .fill(rectColor)
                .frame(width: 100, height: 100)
                .animation(/*@START_MENU_TOKEN@*/.easeIn/*@END_MENU_TOKEN@*/)
                .cornerRadius(rectCornerRadius)
    }

Explicit Animation

Finally, let's talk about Explicit animations, then just remove the .animation() modifier and add the closure withAnimation() instead, in the button

  VStack(spacing: 140){

      Rectangle()
                .fill(rectColor)
                .frame(width: 100, height: 100, alignment: .center)
                .cornerRadius(rectCornerRadius)

            Button(action: {
                // Here   
                withAnimation(.easeIn) {
                    rectColor = Color.pink
                    rectCornerRadius = 50
                }

            }) {
                Text("Animate the Box")
                    .foregroundColor(.white)
                    .bold()
            }//End of Button
            .padding()
            .background(Color.blue)
            .cornerRadius(15)
     }

We'll get the same result as before, changes happen gradually and smoothly in the animation.

Now that we have seen the implicit and explicit animations, what is the difference between them?.

The Difference

The difference between them is in explicit animation, we tell SwiftUI, this state variable will change depending on the animation, we're explicit with it, implicit animation is the opposite, somehow, SwiftUI won't know that state will depend on the animation, only after finding the .animation() modifier, then the animation will happen.

Summary

Explore Animation in SwiftUI & Flutter - Introduction

Adam WaƘiƑ — Wed, 25 Aug 2021 20:36:29 +0000

In this series, we will learn the many techniques and ways of translating your ideas for animation from the ground up. Animations are what really set apps apart from the crowd, because they are interactive, and make the app come alive. So first, let's answer some questions.

What is Animation?

Animation is the change of an object's state from one state to another over time.

Why do we need Animation?

We need it because it makes our app more lively and provides a better user experience too, we humans tend to interact better with a dynamic environment.

When do we use animation?

When we want to direct the user's eye to an important element on the screen.
We want to provide feedback that the action is in progress or that the operation was successfully performed.

🚫 DO NOT !!

Don't try to use too many animations, or else you risk turning them into a nuisance, So, choose them wisely.

Now we know why we need animations in our app. Tomorrow we'll start getting our hands dirty by making some animations and explaining some important stuff.