如何在ManimGL中让大括号随Mobject对象移动？

网页端实现（HTML+CSS+JavaScript） #

这种方案适合在线演示或网页课件，交互性强，效果直观：

<!DOCTYPE html>
<html>
<head>
    <style>
        .number-line {
            position: relative;
            width: 800px;
            height: 50px;
            border-bottom: 2px solid #333;
            margin: 100px auto;
        }
        .xn-marker {
            position: absolute;
            bottom: -25px;
            width: 10px;
            height: 50px;
            background-color: red;
            transform: translateX(-50%);
            transition: left 0.5s ease;
        }
        .xn-label {
            position: absolute;
            bottom: 60px;
            font-size: 20px;
            transform: translateX(-50%);
            transition: left 0.5s ease;
        }
        .bracket {
            position: absolute;
            bottom: -80px;
            width: 0;
            height: 60px;
            border-left: 3px solid #333;
            border-bottom: 3px solid #333;
            transform: translateX(-50%);
            transition: left 0.5s ease;
        }
        .bracket::after {
            content: '';
            position: absolute;
            top: 60px;
            left: -3px;
            width: 30px;
            height: 3px;
            background-color: #333;
        }
        .dynamic-number {
            position: absolute;
            bottom: -120px;
            font-size: 24px;
            font-weight: bold;
            transform: translateX(-50%);
            transition: left 0.5s ease;
        }
        .controls {
            text-align: center;
            margin-top: 50px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="number-line">
        <div class="xn-marker" id="xnMarker"></div>
        <div class="xn-label" id="xnLabel">$x_n$</div>
        <div class="bracket" id="bracket"></div>
        <div class="dynamic-number" id="dynamicNum"></div>
    </div>
    <div class="controls">
        <button onclick="startAnimation()">开始演示</button>
        <button onclick="stopAnimation()">停止演示</button>
    </div>

    <script>
        const xnMarker = document.getElementById('xnMarker');
        const xnLabel = document.getElementById('xnLabel');
        const bracket = document.getElementById('bracket');
        const dynamicNum = document.getElementById('dynamicNum');
        const numberLine = document.querySelector('.number-line');
        const lineWidth = numberLine.offsetWidth;
        
        // 自定义数列，模拟来回移动的趋势
        const sequence = [100, 300, 200, 350, 250, 380, 300, 400];
        let currentIndex = 0;
        let animationInterval;

        function updatePosition(value) {
            // 将数列值映射到数轴宽度范围
            const leftPos = (value / 500) * lineWidth;
            // 同步更新所有动态元素的位置
            xnMarker.style.left = `${leftPos}px`;
            xnLabel.style.left = `${leftPos}px`;
            bracket.style.left = `${leftPos}px`;
            dynamicNum.style.left = `${leftPos}px`;
            // 更新下方动态数字
            dynamicNum.textContent = `n=${currentIndex+1}, x_n=${sequence[currentIndex]}`;
        }

        function startAnimation() {
            stopAnimation();
            // 每1.5秒切换一个数列项
            animationInterval = setInterval(() => {
                updatePosition(sequence[currentIndex]);
                currentIndex = (currentIndex + 1) % sequence.length;
            }, 1500);
        }

        function stopAnimation() {
            clearInterval(animationInterval);
        }

        // 初始化显示第一个数列项
        updatePosition(sequence[0]);
    </script>
</body>
</html>

核心逻辑说明

• 所有动态元素（标记、大括号、数字）都基于数轴容器绝对定位，通过修改left属性实现同步移动
• CSS的transition属性让移动过程平滑过渡
• 大括号用CSS边框+伪元素绘制，无需额外图片
• JavaScript通过setInterval循环遍历数列，同步更新位置和数字内容

LaTeX Beamer 演示文稿实现 #

如果需要在LaTeX课件中嵌入动画，可使用animate和tikz宏包：

\documentclass{beamer}
\usepackage{animate}
\usepackage{tikz}

\begin{document}
\begin{frame}
    \frametitle{数列极限动态演示}
    \begin{animateinline}[loop,autoplay]{2} % 每秒2帧，循环播放
        % 生成8帧动画，n为索引，xn为数列值
        \multiframe{8}{n=1+1, xn=100+50}{
            \begin{tikzpicture}[scale=0.8]
                % 绘制数轴
                \draw[thick] (0,0) -- (10,0);
                \foreach \x in {0,2,...,10} 
                    \draw (\x,-0.2) -- (\x,0.2) node[above] {\pgfmathparse{\x*100}\pgfmathresult};
                
                % 绘制x_n标记
                \fill[red] (\xn/100,0) circle (2pt) node[above] {$x_n$};
                
                % 绘制大括号和动态数字
                \draw[thick] (\xn/100,-0.5) -- (\xn/100,-2) -- (\xn/100-0.3,-2);
                \node[below] at (\xn/100,-2.5) {n=\n, $x_n$=\xn};
            \end{tikzpicture}
        }
    \end{animateinline}
\end{frame}
\end{document}

核心逻辑说明

• animateinline创建动画环境，loop和autoplay设置自动循环播放
• multiframe批量生成动画帧，控制数列索引和数值的变化
• TikZ负责绘制数轴、标记和大括号，每帧自动更新元素位置和数字

内容的提问来源于stack exchange，提问作者Jasen Jones