草庐IT

【manim】之圆规动画

千里之行，始于足下 2023-03-28 原文

概要

前端时间做尺规作图相关的动画的时候，封装了一个圆规的动画，顺便研究了下 manim 库的动画函数。

manim 本身就是做动画的库，所以，基于它封装自定义的动画非常方便。

动画原理

对于单个的元素，manim本身就提供了非常多的动画函数。
比如：创建/消除的动画，移动元素的动画，旋转元素的动画等等，具体可以参考: Animations

如果是做一些简单的演示视频的话，这些内置的动画函数满足要求绰绰有余。
但是，对于多个元素联动的动画，则需要编写各个元素之间的联动规则，来封装符合要求的动画。

下面以圆规动画为例，演示多元素动画如何封装。

圆规动画目的还是画出一个 圆弧，只是在绘制的圆弧的过程中展示了圆弧的起点，终点以及连接起点终点之间的线。
这样，实际使用圆规作图的时候，可以更好的理解 圆弧是如何画出来的。

函数的签名如下：


def ruler(sc: Scene, p1, p2, angle=PI, axis=OUT):
    """
    圆规动画


    Parameters
    ---------
    sc
        绘制动画的场景
    p1
        代表圆规的针，绘制时不动的点
    p2
        代表圆规的笔芯，绘制圆弧的点
    angle
        绘制圆弧的角度，默认PI，相当于绘制半个圆
    axis
        只有2个值 IN/OUT，分别表示顺时针还是逆时针作弧
    """
    # 省略。。。
    return arc

各个参数的含义参见注释。

实现动画的思路如下：

  1. 构建3个元素，也就是d1(根据参数中p1坐标绘制的点),d2(根据参数中p2坐标绘制的点)以及 dl(连接p1和p2的虚线)
  2. 设置dl的动画，随着 d1和d2变化不断重新绘制（这里 d1其实是不会变的）
  3. 再设置圆弧的动画，随着 d2的变动，不断绘制新的圆弧
  4. 通过 manim自带的动画函数让 d2先动，其他动画则会随之一起
  5. 最后删除不必要的元素，只保留圆弧在 场景(sc)中
def ruler(sc: Scene, p1, p2, angle=PI, axis=OUT):
    """
    圆规动画


    Parameters
    ---------
    sc
        绘制动画的场景
    p1
        代表圆规的针，绘制时不动的点
    p2
        代表圆规的笔芯，绘制圆弧的点
    angle
        绘制圆弧的角度，默认PI，相当于绘制半个圆
    axis
        只有2个值 IN/OUT，分别表示顺时针还是逆时针作弧
    """
    d1 = Dot(point=p1, color=RED)
    d2 = Dot(point=p2, color=GREEN)
    dl = DashedLine(d1.get_center(), d2.get_center())

    r = np.linalg.norm(p2 - p1)
    arc = ArcBetweenPoints(p2, p2)

    dl.add_updater(lambda z: z.become(DashedLine(d1.get_center(), d2.get_center())))
    if np.array_equal(axis, OUT):
        arc.add_updater(
            lambda z: z.become(
                ArcBetweenPoints(p2, d2.get_center(), radius=r, stroke_color=GREEN)
            )
        )
    if np.array_equal(axis, IN):
        arc.add_updater(
            lambda z: z.become(
                ArcBetweenPoints(d2.get_center(), p2, radius=r, stroke_color=GREEN)
            )
        )

    sc.add(d1, d2, dl, arc)
    sc.play(
        Rotate(
            d2,
            about_point=d1.get_center(),
            axis=axis,
            angle=angle,
            rate_func=linear,
        )
    )

    arc.clear_updaters()
    dl.clear_updaters()
    sc.remove(d1, d2, dl)
    return arc

动画效果

封装之后，使用起来非常简单：

# -*- coding: utf-8 -*-
from manim import *
import numpy as np


class Sample(Scene):
    def construct(self):
        ruler(self, np.array([-1, 0, 0]), np.array([-1, 1, 0]))
        ruler(self, np.array([1, 0, 0]), np.array([1, 1, 0]), axis=IN)
        self.wait()

上面演示了逆时针（默认是逆时针）和顺时针方式绘制半圆。

各个元素的颜色等相关属性，没有暴露到函数参数中，可以直接在代码中修改。
这里主要演示如何基于 manim制作多元素动画的。

圆规manimcodeampPython

有关【manim】之圆规动画的更多相关文章

  1. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  2. LVGL V8动画 - 2

    动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim

  3. ruby - Carrierwave + MiniMagick - 如何将动画 GIF 压缩到第一帧？ - 2

    有人知道如何使用Carrierwave+MiniMagick将动画GIF压缩到第一帧吗？ 最佳答案 我认为MiniMagick有一些变化，因为我只花了三个小时试图找出为什么Andrey的代码对我不起作用。我收到以下错误:ActiveRecord::RecordInvalid(Validationfailed:ImageFailedtomanipulatewithMiniMagick,maybeitisnotanimage?OriginalError:Command("mogrify-scene/var/folders/0o/0oqN

  4. ruby-on-rails - 如何在 Ajax 请求处理期间显示动画图标 - Rails 3 - 2

    我正在尝试为每个ajax请求显示一个加载指示器，我在Rails3应用程序中工作。HTML:"loading-indicator",:style=>"display:none")%>CSS:#loading-indicator{position:absolute;left:10px;top:10px;}loading.js:我放在assest/javascripts/$(document).ready(function(){$(document).ajaxSend(function(event,request,settings){$('#loading-indicator').show(

  5. javascript - 在 Fabric js 中的两个对象之间添加动画 - 2

    我有一个非常基本的应用程序，可让您创建形状并用一条线将它们连接起来。为此，您需要执行以下操作。Example1.Clicknewanimation2.addrectangle3.addchild4.addcircle您可以移动形状、拖动和调整大小。我想知道是否可以在两个对象之间添加动画。因此，例如，一个小圆球会在两个物体之间的线上移动。我已经查看了fabricjs动画页面上的演示，但不确定是否可以从对象b执行。这是FIDDLE. 最佳答案 我不知道你是否可以在fabric中使用内置的动画功能，因为正如你所说，这些对象可能会自己移动。

  6. javascript - 有没有可行的方法使用JS触发CSS关键帧动画？ - 2

    当然，我们可以使用关键帧创建CSS动画，并从那里控制它。但是，理想情况下，我想通过单击按钮来触发此动画-因此单击按钮将是一个事件...@keyframesfade-in{0%{opacity:0;}100%{opacity:1;}}现在，点击时，我想触发这个动画；而不是在CSS动画属性中。 最佳答案 看这里jsfiddle如果您希望每次按下按钮时动画都起作用，请使用此代码:$('button').click(function(){$(".fademe").addClass('animated');setTimeout(functio

  7. javascript - 如何动画绘制一系列线段 - 2

    我想画一个点，大约1秒后我想画下一个点。这是否可能:我已经试过了:functionsimulate(i){setTimeout(function(){drawPoint(vis,i,i);},1000);}for(vari=1;i不幸的是，这是行不通的。它只是立即绘制整条线。 最佳答案 这是行不通的，因为for循环将立即运行到结束，setTimeouts将被同时调度，所有函数将同时触发。取而代之的是，这样做:vari=1;(functionloop(){if(i++>200)return;setTimeout(function(){

  8. javascript - 在 React Native 中动态添加组件时如何启用流畅的动画？ - 2

    在我的ReactNative应用程序中，我有一张带有条件的卡片按下按钮时呈现并在触发相同按钮时删除的组件。这是我的代码的样子:this.setState({triggered:!this.state.triggered})}title="ClicktoExpand"/>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolabori

  9. javascript - 动画图像在长时间的 Javascript 方法调用期间不动 - 2

    在运行10秒向html添加一些元素的方法中，动画gif根本没有移动，给人一种网页卡住的感觉。任何解决办法。示例代码:$('#button).click(function(){showAnimatedGif();longRunningMethod();hideAnimatedGif();});解决此问题的一种方法是将长时间运行的方法分解为多个步骤并以这种方式设置动画，但是您必须以这种方式为每个长时间运行的方法编写代码。想知道是否还有其他方法可以做到这一点？ 最佳答案 确保动画实际发生的唯一方法是让longRunningMethod定期

  10. javascript - 如何通过 javascript 添加动画 svg？ - 2

    如果我在纯html/svg文件中编写svg，它工作正常，圆圈动画正确。但是如果我通过javascript动态添加circle元素，则添加了circle，但它没有动画。怎么了？js代码:varsvg=$("svg");//usejqueryvarcircle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("r","5");circle.setAttribute("fill","red");varani=document.createElementNS("http://

随机推荐