SoFunction
Updated on 2025-04-09

Detailed explanation of view animations in iOS system

Animation provides smooth visualization for the state transition of the user interface. Animation effects are widely used in iOS, including changing the view position, size, deleting views from the visual tree, hiding views, etc. You can consider using animation effects to provide feedback to users or to achieve interesting special effects.

In iOS system, Core Animation provides built-in animation support. Creating animations does not require any drawing code. All you have to do is to inspire the specified animation. Next, it will be left to Core Animation for rendering. In short, complex animations only require a few lines of code.

Which properties can add animation effects

According to the iOS View Programming Guide, UIView has built-in support for animations for the following properties:

  • Frame can change the position and size of the view relative to the previous view. (If the view has undergone transformations such as zoom, rotation, and translation, you need to modify the Center and Bounds properties)
  • Bounds Change the view size.
  • Center Changes the position of the view relative to the previous view.
  • Transform zooms, rotates, and translates the view relative to the center point, and this property can only be transformed in two-dimensionally. (If you want to perform a three-dimensional transformation, you must use CoreAnimation to manipulate the Layer property of the view.)
  • Alpha changes the transparency of the view.
  • BackgroundColor Modify the background color of the view.
  • ContentStretch Changes how the view content is stretched within the free space of the view.

Add animations to the property changes of the view

In order to add animation effects to changes in attributes, the code that modifies these attributes needs to be placed in the specified animation block. Animation effects can only be added if the properties that support animation are modified in the animation code segment.

Use the Begin/Commit method to make animations

In iOS 3.0 and previous systems, the UIView class methods beginAnimations:context: and commitAnimations must be used to define the animation code segment. The code between begin and commit will run in a special animation thread, so it will not block the main thread. For example, if you want to switch two views, the code should look like this:

[UIView beginAnimations:@"ToggleViews" context:nil];
[UIView setAnimationDuration:1.0];
 
// Make the animatable changes.
 = 0.0;
 = 1.0;
 
// Commit the changes and perform the animation.
[UIView commitAnimations];

Under the (MonoTouch) platform, the corresponding bindings of the begin/end method are:

  • public static void BeginAnimations (string animation)
  • public static void BeginAnimations (string animationID, IntPtr context)
  • public static void CommitAnimations ()

The C# version code for the switch view above is:

("ToggleViews");
(1.0)
 = 0.0;
 = 1.0;
();

Begin/Commit functions, the parameters and options of the animation can be set through the following methods:

  • setAnimationStartDate:
  • setAnimationDelay:
  • setAnimationDuration:
  • setAnimationCurve:
  • setAnimationRepeatCount:
  • setAnimationRepeatAutoreverses:
  • setAnimationDelegate:
  • setAnimationWillStartSelector:
  • setAnimationDidStopSelector:
  • setAnimationBeginsFromCurrentState:

Note: If it is not for supporting very old devices, it is recommended to use the following lambda (block based method) to achieve animation effects. Although begin/commit can still be used, according to the official statement, it is not recommended for new systems.

Animate with lambda (block based method)

After iOS 4.0, the concept of code blocks was introduced, and the animation can be initialized using code blocks. This is also what Apple recommended after iOS 4.0. The API provided by the iOS SDK is as follows:

  • animateWithDuration:animations:
  • animateWithDuration:animations:completion:
  • animateWithDuration:delay:options:animations:completion:

And under the (MonoTouch) platform, these methods are bound to the following methods:

  • public static void Animate(double duration, NSAction animation)
  • public static void Animate (double duration, NSAction animation, NSAction completion)
  • public static void Animate (double duration, double delay, UIViewAnimationOptions options, NSAction animation, NSAction completion)

Or switch the animation of the view. If you use the code block of objective-c to implement it, it should look like this:

[UIView animateWithDuration:1.0 animations:^{
   = 0.0;
   = 1.0;
}];

If it is implemented using C#, it should be like this:

(1.0, () => {
   = 0.0f;
   = 1.0f;
});

This implements a simple gradient animation, and can only be run once, which usually cannot meet the needs, and then comes with a more complicated one:

[UIView animateWithDuration:1.0
    delay:0.0
    options:UIViewAnimationOptionCurveEaseIn
    animations:^{
       = 0.0;
    }
    completion:^(BOOL finished){
      [UIView animateWithDuration:1.0
          delay:1.0
          options:UIViewAnimationOptionCurveEaseOut animations:^{
             = 1.0;
          }
          completion:nil];
}];

The corresponding C# code is as follows:

(
  1.0,
  0.0,
  ,
  () =>  = 0.0f,
  () => {
    (
      1.0,
      1.0,
      ,
      () =>  = 1.0f,
      null
    );
  }
);

Nested animations

iOS supports nested animations. That is to say, in an animation code segment, another animation code segment can be started, without waiting for the current animation to be completed. The nested animation will start running at the same time, and the delay, time length, acceleration curve, etc. of the original animation is inherited by default, but these options can also be overwritten. For example:

[UIView animateWithDuration:1.0
  delay:1.0
  options:UIViewAnimationOptionCurveEaseOut animations:^{
     = 0.0f;
    // Start a new animation here    [UIView animateWithDuration:1.0
      delay:0.0
      options:UIViewAnimationOptionOverrideInheritedCurve |
        UIViewAnimationOptionCurveLinear |
        UIViewAnimationOptionOverrideInheritedDuration |
        UIViewAnimationOptionRepeat |
        UIViewAnimationOptionAutoreverse
      animations:^{
        [UIView setAnimationRepeatCount:2.5];
         = 0.0f;
      }
      completion:nil];
  }
  completion:nil
];

The corresponding C# code is as follows:

(
  1.0,
  1.0,
  ,
  () => {
     = 0.0;
    (
      1.0,
      1.0,
       |
       |
       |
       |
      ,
      () => {
        ();
         = 0.0;
      },
      null
    );
  },
  null
);

For animations that use the Begin/Commit method, you can also call the Begin/Commit method nested to implement nested animations, for example:

("Animation1");
// Animation code goes here
  // Start another animation
  ("Nested animation");
  // nested animations code goes here.
  ();
// other code
();

The ObjC code corresponding to this C# code is very simple, so I won't write it out.

Implement automatic flip of animation

When creating an animation that automatically flips the specified number of times, consider setting the number of repetitions to a non-integer value. Because for automatically flipped animations, each loop changes from the original value to the target value and then back to the original value. If you want to stay at the target value after the animation is over, you need to add the number of repetitions to 0.5. Otherwise, the animation will slowly change back to the original value and then quickly change to the target value. This may not be the original expected animation effect.

Create view switching animation

View switching animation can reduce mutations in the interface caused by modifying the visual tree. View switching animation is widely used in iOS system. View switching animation mainly has the following two scenarios:

  • Modify subviews
  • Replace subview

Note: Do not confuse view switching with view controller switching (showing a mode dialog box, pushing the view controller into the navigation stack, etc.), view switching only changes the view visual tree, the view controller is unchanged. For more information, please refer to the iOS View Controller Programming Guide.

Modify subviews

You can modify the visibility of the subview to represent the different states of the current view. See the following two examples of view switching. Before iOS 4.0, you need to add the view switching animation between the Begin/Commit animation. The code is as follows:

After iOS 4.0, you can use transitionWithView:duration:options:animations:completion:

[UIView beginAnimations:@"toggleView" context:nil];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView: cache:YES];
[UIView setAnimationDuration:1.0];
// animation goes here
 = YES;
 = NO;
[UIView commitAnimations];

There is only the code for the animation part here. After the animation is completed, please refer to the setAnimationDelegate: method setting and implement UIAnimationDelegate.

Replace subview

To replace the subview, you need to use the transitionFromView:toView:duration:options:complete: method. The sample code is as follows:

UIView *fromView = ( ?  : );
UIView *toView = ( ?  : );
UIViewAnimationOptions option = ( ? UIViewAnimationOptionTransitionFlipFromRight
                : UIViewAnimationOptionTransitionFlipFromLeft);
[UIView transitionFromView:fromView toView:toView duration:1.0 options:option
  completion:^(BOOL finished) {
    if (finished) {
     = !;
    }
  }
];

Link multiple animations

With the above knowledge, linking multiple animations is very simple:

  • For animations of lambda or block-based methods, use the complete callback function;
  • For the animation of the Begin/Commit method, you need to implement a UIAnimationDelegate, and then call the setAnimationDelegate method to set Delegate.

The above is a detailed explanation of the detailed content of view animation in the iOS system. For more information about iOS view animation, please follow my other related articles!