Manim learns by doing--fade transition

Introduced todayManimused inFade in and out3 animation classes for transformations:

FadeToColor: Focus on the smooth transition of object colors, enhancing visual effects through gradients
FadeTransform: Implement gradient replacement between different objects to make element conversion more coherent.
FadeTransformPieces: Highlight the fragmentation of objects and transform each part individually, suitable for the decomposition and reorganization of complex objects.

All three play an important role in enhancing the expressiveness and coherence of animation, but each has its own focus on operating objects and transformation methods. They can be flexibly selected according to specific scenarios to create diverse and attractive animation effects.

1. Animation Overview

1.1. FadeToColor

When you need to smoothly transition the color of one object to another,FadeToColoris a good choice.

For example, when demonstrating the effect of color changes on a graphic or text, you can use it to fade the graphic or text from an initial color to a target color.

It can also be used to emphasize a certain element, attracting the audience's attention by changing its color, while producing a gradient visual effect to make the transition more natural.

FadeToColorAnimation is characterized by gradually fading the color of an object to another specified color over a certain period of time.

Its main parameters are:

Parameter name	type	illustrate
mobject	Mobject	Object to which color change is applied
color	str	Specify the target color to change to

1.2. FadeTransform

FadeTransformSuitable for scenes where one object is transformed into another.

For example, smoothly transform a circle into a square, or transform one piece of text into another.

When showing substitution or conversion relationships between elements, useFadeTransformThis allows the viewer to clearly see how one element gradually transforms into another, rather than suddenly disappearing and appearing.

FadeToColorThe animation features a gradient transformation between two different Mobjects.

During the animation process, there will be an effect similar to the old object gradually disappearing and the new object gradually emerging. The outlines of the two objects will merge and transition during the transformation process.

Its main parameters are:

Parameter name	type	illustrate
mobject	Mobject	initial`Mobject`
target_mobject	Mobject	Target`Mobject`
stretch	bool	control objectives`Mobject`Whether to stretch during animation
dim_to_match	int	If the target`Mobject`No automatic stretching, this parameter can adjust the target`Mobject`Initial scaling when moving in

1.3. FadeTransformPieces

When you need to perform fragmented transformation on an object, you can useFadeTransformPieces。

For example, split a complex shape into multiple parts, and then transform these parts into corresponding parts of another complex shape.

When demonstrating the decomposition and reassembly of an object, it can well demonstrate the change process of each part.

Same as in the previous sectionFadeTransformdifferent,FadeTransformPiecesFocus more on breaking the object into parts and then applying separate transformations to each part.

Independent transformation animations can be generated for each part, making the transformation process of the entire object more detailed and layered.

FadeTransformPiecesInherited fromFadeTransform, its parameters andFadeTransformSimilar to:

Parameter name	type	illustrate
mobject	Mobject	initial`Mobject`
target_mobject	Mobject	Target`Mobject`
stretch	bool	control objectives`Mobject`Whether to stretch during animation
dim_to_match	int	If the target`Mobject`No automatic stretching, this parameter can adjust the target`Mobject`Initial scaling when moving in

2. Usage examples

These three classes are mostly used in animation transitions and are relatively simple to use. The following examples demonstrate how to use them.

2.1. Graphic color fade-in gradient

This example mainly shows the gradient effect of color.

First create a blue square in the scene, byFadeToColorAnimate the square to fade in to yellow, red, and green.

FadeToColorAnimation effects are suitable for highlighting a certain graphic.

# Create a square
 square = Square(color=BLUE, side_length=2)
 (square)

 # Show how to fade a square into different colors
 (FadeToColor(square, color=YELLOW))
 (FadeToColor(square, color=RED))
 (FadeToColor(square, color=GREEN))

2.2. Smooth fade-in transformation of graphics

This example is used to demonstrate smooth gradient transitions between shapes.

To start, create agreencircle, and then useFadeTransformAnimation, a circle smoothly transitions into ayellowTriangle, this effect is often used in geometric teaching scenarios.

# Create a circle
 circle = Circle(color=GREEN, radius=0.8)
 (circle)

 #Create a triangle as the target shape
 triangle = Triangle(color=YELLOW)
 # Show the animation of fading a circle into a triangle
 (FadeTransform(circle, triangle))

2.3. Subgraph transformation

This example focuses on subshape gradients for combined shapes.

Start by drawing a large square made up of 4 small squares arranged in a 2x2 grid.

Next, useFadeTransformPiecesAnimation, each small square independently fades into another shape, also arranged in a 2x2 grid.

This effect is suitable for showing the process of gradual transformation of complex graphics from simple sub-graphics, such as showing the transformation of elements in pattern design teaching.

#Create a large square composed of multiple small squares
 squares = VGroup(*[Square(side_length=0.5) for _ in range(4)])
 squares.arrange_in_grid(rows=2, cols=2)
 (squares)

 #Create a target graphic composed of multiple graphics
 c = Circle(radius=0.5, color=BLUE)
 t = Triangle(color=GREEN)
 s = Star(color=RED)
 p = RegularPolygon(n=6, color=YELLOW)
 vg = VGroup(c, t, s, p)
 vg.arrange_in_grid(rows=2, cols=2)
 # Show the animation of fading each small square into a small circle
 (FadeTransformPieces(squares, vg))

2.4. Convert character by character

This example applies to text animation scenes.

Show purple first "Hello” text, later with the help ofFadeTransformPiecesanimation,"Hello"Each character of " fades in gradually into characters of different sizes and colors."Manim” characters to achieve smooth transition of text content, often used for text special effects display or dynamic changes of text in story narration.

#Create a text object
 text = Text("Hello", color=PURPLE)
 (text)

 # Create a text object consisting of a single character as the target
 colors = [RED, ORANGE, BLUE, GREEN, YELLOW]
 font_sizes = [60, 40, 20, 40, 50]
 new_text = VGroup(
     *[
         Text(
             char,
             font_size=font_sizes[idx],
             color=colors[idx],
         )
         for idx, char in enumerate("Manim")
     ]
 )
 new_text.arrange(RIGHT)
 # Show the animation of fading each character into a new character
 (FadeTransformPieces(text, new_text))

3. Accessories

The code in the article is only an interception of key parts, and the complete code is shared on the network disk (），

Download address:Complete code(Access code: 6872)