Location>code7788 >text

manim learning by doing - fade in and fade out

Popularity：360 ℃/2024-12-13 22:32:40

This article introduces the fade-in and fade-out animation effects in Manim.

fade inFadeIn Mainly used to make objects appear in the scene as a gradient.

It is characterized by visually soft transitions that naturally direct the viewer's attention to emerging elements.

fakeFadeOut Instead, the object is made gradually transparent until it disappears.

Used to remove an element that has completed its role in the display or for scene switching transitions, its gradual disappearance avoids the element leaving the scene abruptly.

These two classes provide effective tools for creating smooth animated presentations.

1. Summary of animation functions

1.1. FadeIn

FadeInBy gradually increasing the object's transparency from fully transparent (invisible) to fully opaque (displayed normally), the

It gives a smooth transition that doesn't feel as abrupt as elements that appear out of nowhere.

FadeInThe main parameters are:

Parameter name typology instructions
mobjects Mobject Objects to be faded in
shift Vector type Define the translation vector of the object during the fade-in process
target_position Location or Mobject type Determines the starting position of the object when it fades in
scale numeric type (math.) Specifies the scaling of the object at the beginning of the fade-in.

shiftparameter allows the object to move in a given direction and distance while fading in, increasing the dynamics of the animation.

target_positionparameter if it is aMobject, then the center of the object is used as the starting position.

scaleparameter causes the object to be first scaled to this ratio and then restored to its original size during the fade-in process.

FadeInThe methods are:

name (of a thing) clarification
clean_up_from_scene Cleaning up the scene after the animation is complete
create_target The target state used to create the animation

1.2. FadeOut

When an element no longer needs to be displayed during a presentation and needs to be removed from the scene in a natural way, theFadeOutIt would be very useful.

together withFadeInInstead, it makes the transparency of the object gradually change from completely opaque to completely transparent, thus realizing the visual effect of gradual disappearance.

FadeOutThe main parameters are:

Parameter name typology clarification
mobjects Mobject Objects to be faded out
shift Vector type Define the translation vector of the object during the fade-out process
target_position Location or Mobject type Determine the target position that the object moves to when it fades out
scale numeric type (math.) Used to specify the scaling of the object during the fade-out process

shiftparameter allows the object to move in a given direction and distance while fading out, increasing the dynamics of the animation.

target_positionparameter if it is aMobject, then its center position will be used as the target position.

scaleparameter causes the object to shrink or zoom in and out as it fades away, adding more variation to the animation.

FadeOutmethodology andFadeInof similarity and will not be repeated.

2. Examples of use

FadeInrespond in singingFadeOuts parameters not only have the same name, but also have similar meanings, except that one is used for fading in and one for fading out.

Here's a demonstration of the fade-in in the exampleFadeInparameter for theFadeOutIt is also used in the same way and vice versa.

2.1 Basic use

This example shows how theFadeInrespond in singingFadeOutThe basic use of the object, without the use of special parameters, demonstrates only the fade-in and fade-out effects.

# Create a circle
c = Circle()
# Create a square
s = Square(color=BLUE)

# Add the circle to the scene
(c)
()

# Fade in the square Fade out the circle
(FadeIn(s), FadeOut(c))

First add the circle to the scene and then simultaneouslyfade insquare andfakeRound.

2.2. shift parameter of FadeIn

This example demonstratesFadeIn(used form a nominal expression)shiftparameter by setting theshiftparameter to make 4 different shapes move from different directions in the scene to their final positions during the fade-in, demonstrating the effect of object panning during the fade-in process.

c = Circle(
    radius=0.8,
    fill_opacity=1,
    fill_color=RED_B,
)
t = Triangle(
    color=GREEN,
    fill_opacity=1,
    fill_color=GREEN_B,
)
s = Square(
    side_length=2,
    color=BLUE,
    fill_opacity=1,
    fill_color=BLUE_B,
)
r = Rectangle(
    height=2,
    width=1,
    color=YELLOW,
    fill_opacity=1,
    fill_color=YELLOW_B,
)
VGroup(c, t, s, r).arrange_in_grid(2, 2)

(FadeIn(c, shift=UP * 2))
(FadeIn(t, shift=DOWN * 2))
(FadeIn(s, shift=LEFT * 2))
(FadeIn(r, shift=RIGHT * 2))

2.3. target_position parameter of FadeIn

This example demonstrates theFadeIn(used form a nominal expression)target_positionparameter, which sets the start position of the text fade to the position of the point, reflecting the fact that the object can start fading from the specified position.

# Create a dot
d1 = Dot(color=BLUE).shift(UP * 2 + LEFT * 2)
d2 = Dot(color=YELLOW).shift(UP * 2 + RIGHT * 2)
# Create the text
t1 = Text("Hello,", color=BLUE)
t2 = Text("Manim!", color=YELLOW)
VGroup(t1, t2).arrange(RIGHT, buff=1)

# Add points to the scene
(d1, d2)
# Wait 1 second
()

# Fade in the text
(FadeIn(t1, target_position=d1))
(FadeIn(t2, target_position=d2))

If it isFadeOututilizationtarget_positionparameter, the element will disappear in the above example.DotThe location.

2.4. FadeOut's scale parameter

This example demonstrates theFadeOut(used form a nominal expression)scaleparameters, which show the effect of shrinking (scale=0.5) and enlarging (scale=1.5) the object on fade-out, respectively.

Describes the parameter's role in controlling the scaling of the object on fade-out.

s = Star(color=RED)
h = RegularPolygram(6, color=YELLOW)
vg = VGroup(s, h).arrange(RIGHT, buff=1)
(Create(vg), run_time=run_time)
()

# Fade out the pentagram scale=0.5
(FadeOut(s, scale=0.5))
# Fade out hexagon scale=2
(FadeOut(h, scale=2))

3. Annexes

The code in the article is just an extract of the key parts, the complete code is shared on a web disk (），

Download at.Full Code (Access code: 6872)

<Previous Next>