【Python】如何使用Python-Tkinter打造炫酷动态心形动画 !保姆级教程

612 阅读12分钟

教程:从零开始,逐步实现动态心形动画

image.png

环境准备

在开始之前,请确保你已经安装了最新版本的Python。如果未安装,可以前往Python官网下载并安装适合你操作系统的版本。Tkinter随Python自带,无需额外安装。

第一步:导入必要的模块

import random
from math import sin, cos, pi, log
from tkinter import *

我们将使用random模块生成随机数,math模块中的sincospilog函数用于计算心形曲线,tkinter则用于图形界面的创建和动画展示。

第二步:定义画布参数

CANVAS_WIDTH = 640  # 画布宽度
CANVAS_HEIGHT = 480  # 画布高度
CANVAS_CENTER_X = CANVAS_WIDTH / 2
CANVAS_CENTER_Y = CANVAS_HEIGHT / 2
IMAGE_ENLARGE = 11  # 图像放大比例
HEART_COLOR = "#ff2121"  # 心形颜色

这里,我们设置了画布的基本参数,包括宽高、中心坐标、心形的放大比例以及颜色。

第三步:定义心形生成函数

def heart_function(t, shrink_ratio=IMAGE_ENLARGE):
    x = 16 * (sin(t) ** 3)
    y = -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t))
    x *= shrink_ratio
    y *= shrink_ratio
    x += CANVAS_CENTER_X
    y += CANVAS_CENTER_Y
    return int(x), int(y)

该函数基于心形的参数方程生成心形曲线的坐标点,通过缩放和平移,使其适应画布的大小。

主流AI大模型 + 上百种AI助手落地场景 + 兑换码ZXCODE = CodeMoss国内版

第四步:实现点的散布与收缩

def scatter_inside(x, y, beta=0.15):
    ratio_x = - beta * log(random.random())
    ratio_y = - beta * log(random.random())
    dx = ratio_x * (x - CANVAS_CENTER_X)
    dy = ratio_y * (y - CANVAS_CENTER_Y)
    return x - dx, y - dy

def shrink(x, y, ratio):
    force = -1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.6)
    dx = ratio * force * (x - CANVAS_CENTER_X)
    dy = ratio * force * (y - CANVAS_CENTER_Y)
    return x - dx, y - dy

这两个函数分别用于在心形内部散布点和将点收缩到中心,增加动画的层次感和动感。

第五步:定义曲线函数

def curve(p):
    return 2 * (2 * sin(4 * p)) / (2 * pi)

curve函数计算当前帧的缩放比例,为动画提供动态变化。

第六步:创建Heart类

class Heart:
    def __init__(self, generate_frame=60):
        self._points = set()
        self._edge_diffusion_points = set()
        self._center_diffusion_points = set()
        self.all_points = {}
        self.build(2000)
        self.random_halo = 1000
        self.generate_frame = generate_frame
        for frame in range(generate_frame):
            self.calc(frame)

    def build(self, number):
        for _ in range(number):
            t = random.uniform(0, 2 * pi)
            x, y = heart_function(t)
            self._points.add((x, y))
        for _x, _y in list(self._points):
            for _ in range(3):
                x, y = scatter_inside(_x, _y, 0.05)
                self._edge_diffusion_points.add((x, y))
        point_list = list(self._points)
        for _ in range(4000):
            x, y = random.choice(point_list)
            x, y = scatter_inside(x, y, 0.17)
            self._center_diffusion_points.add((x, y))

    @staticmethod
    def calc_position(x, y, ratio):
        force = 1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.520)
        dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
        dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)
        return x - dx, y - dy

    def calc(self, generate_frame):
        ratio = 10 * curve(generate_frame / 10 * pi)
        halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))
        halo_number = int(3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))
        all_points = []
        heart_halo_point = set()
        for _ in range(halo_number):
            t = random.uniform(0, 2 * pi)
            x, y = heart_function(t, shrink_ratio=11.6)
            x, y = shrink(x, y, halo_radius)
            if (x, y) not in heart_halo_point:
                heart_halo_point.add((x, y))
                x += random.randint(-14, 14)
                y += random.randint(-14, 14)
                size = random.choice((1, 2, 2))
                all_points.append((x, y, size))
        for x, y in self._points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 3)
            all_points.append((x, y, size))
        for x, y in self._edge_diffusion_points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 2)
            all_points.append((x, y, size))
        for x, y in self._center_diffusion_points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 2)
            all_points.append((x, y, size))
        self.all_points[generate_frame] = all_points

    def render(self, render_canvas, render_frame):
        points = self.all_points.get(render_frame % self.generate_frame, [])
        for x, y, size in points:
            render_canvas.create_rectangle(
                x, y, x + size, y + size,
                width=0,
                fill=HEART_COLOR
            )

Heart类负责生成和管理心形动画的各个帧。通过预计算每一帧的点数据,确保动画的流畅性和连贯性。

第七步:实现动画绘制

def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
    render_canvas.delete('all')
    render_heart.render(render_canvas, render_frame)
    main.after(30, draw, main, render_canvas, render_heart, render_frame + 1)

draw函数不断刷新画布,渲染当前帧的心形点,并通过递归调用实现动画的连续播放。

第八步:启动主程序

if __name__ == '__main__':
    root = Tk()
    root.title("丝滑心形动画")
    canvas = Canvas(root, bg='white', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)
    canvas.pack()
    heart = Heart(generate_frame=60)
    draw(root, canvas, heart)
    root.mainloop()

主程序部分创建Tkinter主窗口,初始化画布和Heart类实例,启动动画绘制循环。

运行效果展示

运行上述代码后,你将看到一个充满爱的动态心形在画布上缓缓跳动,颜色鲜艳,动画流畅。以下是预期的运行效果截图:

屏幕录制2024-11-13 11.03.23.gif

(请自行运行代码查看实际效果)

完整心形代码

import random  # 导入随机数模块,用于生成随机数
from math import sin, cos, pi, log  # 从math模块导入sin, cos, pi, log函数
from tkinter import *  # 从tkinter模块导入所有内容,用于GUI绘制

# 定义画布的宽度和高度
CANVAS_WIDTH = 640  # 画布的宽度为640像素
CANVAS_HEIGHT = 480  # 画布的高度为480像素
# 计算画布中心的X和Y坐标
CANVAS_CENTER_X = CANVAS_WIDTH / 2  # 画布中心的X坐标
CANVAS_CENTER_Y = CANVAS_HEIGHT / 2  # 画布中心的Y坐标
IMAGE_ENLARGE = 11  # 图像放大比例设为11倍
HEART_COLOR = "#ff2121"  # 心形的颜色设置为红色


def heart_function(t, shrink_ratio: float = IMAGE_ENLARGE):
    """
    生成爱心形状的坐标点
    :param t: 参数,范围通常为0到2π
    :param shrink_ratio: 放大比例,默认为IMAGE_ENLARGE
    :return: 坐标 (x, y) 的整数值
    """
    # 爱心的参数方程计算X坐标
    x = 16 * (sin(t) ** 3)
    # 爱心的参数方程计算Y坐标
    y = -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t))

    # 将计算得到的X和Y坐标放大
    x *= shrink_ratio  # 放大X坐标
    y *= shrink_ratio  # 放大Y坐标

    # 将心形移动到画布的中心位置
    x += CANVAS_CENTER_X  # 平移X坐标到画布中心
    y += CANVAS_CENTER_Y  # 平移Y坐标到画布中心

    return int(x), int(y)  # 返回整数型的坐标


def scatter_inside(x, y, beta=0.15):
    """
    在爱心内部散布点
    :param x: 原点的X坐标
    :param y: 原点的Y坐标
    :param beta: 散布强度,默认为0.15
    :return: 新的坐标 (x, y)
    """
    # 计算随机散布比例X
    ratio_x = - beta * log(random.random())  # 使用对数函数和随机数生成比例
    # 计算随机散布比例Y
    ratio_y = - beta * log(random.random())

    # 计算X方向的偏移量
    dx = ratio_x * (x - CANVAS_CENTER_X)  # 根据中心点计算偏移
    # 计算Y方向的偏移量
    dy = ratio_y * (y - CANVAS_CENTER_Y)

    return x - dx, y - dy  # 返回新的坐标


def shrink(x, y, ratio):
    """
    收缩点到中心
    :param x: 原点的X坐标
    :param y: 原点的Y坐标
    :param ratio: 收缩比例
    :return: 新的坐标 (x, y)
    """
    # 计算收缩力,避免除以零的情况
    force = -1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.6)
    # 计算X方向的偏移量,加上收缩比例和力的影响
    dx = ratio * force * (x - CANVAS_CENTER_X)
    # 计算Y方向的偏移量,加上收缩比例和力的影响
    dy = ratio * force * (y - CANVAS_CENTER_Y)
    return x - dx, y - dy  # 返回新的坐标


def curve(p):
    """
    生成曲线函数值
    :param p: 参数,用于计算曲线
    :return: 曲线的当前值
    """
    return 2 * (2 * sin(4 * p)) / (2 * pi)  # 计算并返回曲线值


class Heart:
    """
    心形动画类,负责生成和渲染心形动画的各个帧
    """

    def __init__(self, generate_frame=60):
        """
        初始化心形动画
        :param generate_frame: 生成的帧数,默认为60帧
        """
        self._points = set()  # 存储心形轮廓的点集合
        self._edge_diffusion_points = set()  # 存储边缘扩散点的集合
        self._center_diffusion_points = set()  # 存储中心扩散点的集合
        self.all_points = {}  # 存储所有帧的点数据,键为帧数,值为点列表

        self.build(2000)  # 构建初始的2000个心形点和扩散点

        self.random_halo = 1000  # 光晕随机点的数量设为1000

        self.generate_frame = generate_frame  # 设置总帧数
        for frame in range(generate_frame):  # 遍历每一帧
            self.calc(frame)  # 预计算每一帧的点数据

    def build(self, number):
        """
        构建心形及其扩散点
        :param number: 初始点的数量
        """
        # 生成心形轮廓点
        for _ in range(number):  # 循环生成指定数量的点
            t = random.uniform(0, 2 * pi)  # 随机生成参数t,在0到2π之间
            x, y = heart_function(t)  # 计算心形的坐标
            self._points.add((x, y))  # 将计算得到的点添加到轮廓点集合

        # 生成心形边缘的扩散点
        for _x, _y in list(self._points):  # 遍历所有轮廓点
            for _ in range(3):  # 每个轮廓点生成3个扩散点
                x, y = scatter_inside(_x, _y, 0.05)  # 计算扩散后的新坐标
                self._edge_diffusion_points.add((x, y))  # 添加到边缘扩散点集合

        # 生成心形中心的扩散点
        point_list = list(self._points)  # 将轮廓点转换为列表
        for _ in range(4000):  # 生成4000个中心扩散点
            x, y = random.choice(point_list)  # 随机选择一个轮廓点
            x, y = scatter_inside(x, y, 0.17)  # 计算扩散后的新坐标
            self._center_diffusion_points.add((x, y))  # 添加到中心扩散点集合

    @staticmethod
    def calc_position(x, y, ratio):
        """
        计算点的位置,用于动画效果
        :param x: 原点的X坐标
        :param y: 原点的Y坐标
        :param ratio: 缩放比例
        :return: 新的坐标 (x, y)
        """
        # 计算缩放的力,避免除以零
        force = 1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.520)

        # 计算X方向的偏移量,加入微小的随机抖动
        dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
        # 计算Y方向的偏移量,加入微小的随机抖动
        dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)

        return x - dx, y - dy  # 返回新的坐标

    def calc(self, generate_frame):
        """
        计算每一帧的所有点
        :param generate_frame: 当前帧数
        """
        # 根据曲线函数计算当前帧的缩放比例
        ratio = 10 * curve(generate_frame / 10 * pi)  # 计算缩放比例

        # 计算光环的半径和点数
        halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))  # 计算光环半径
        halo_number = int(3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))  # 计算光环点的数量

        all_points = []  # 初始化当前帧的所有点列表

        # 生成光环点
        heart_halo_point = set()  # 存储光环点的集合,避免重复
        for _ in range(halo_number):  # 循环生成光环点
            t = random.uniform(0, 2 * pi)  # 随机生成参数t
            x, y = heart_function(t, shrink_ratio=11.6)  # 计算心形的坐标,放大比例为11.6
            x, y = shrink(x, y, halo_radius)  # 收缩坐标到光环半径
            if (x, y) not in heart_halo_point:  # 检查点是否已经存在
                heart_halo_point.add((x, y))  # 添加新的光环点
                x += random.randint(-14, 14)  # 随机偏移X坐标
                y += random.randint(-14, 14)  # 随机偏移Y坐标
                size = random.choice((1, 2, 2))  # 随机选择点的大小
                all_points.append((x, y, size))  # 将点添加到当前帧的点列表

        # 生成轮廓点
        for x, y in self._points:  # 遍历所有轮廓点
            x, y = self.calc_position(x, y, ratio)  # 计算动画后的新坐标
            size = random.randint(1, 3)  # 随机选择点的大小
            all_points.append((x, y, size))  # 将点添加到当前帧的点列表

        # 生成边缘扩散点
        for x, y in self._edge_diffusion_points:  # 遍历所有边缘扩散点
            x, y = self.calc_position(x, y, ratio)  # 计算动画后的新坐标
            size = random.randint(1, 2)  # 随机选择点的大小
            all_points.append((x, y, size))  # 将点添加到当前帧的点列表

        # 生成中心扩散点
        for x, y in self._center_diffusion_points:  # 遍历所有中心扩散点
            x, y = self.calc_position(x, y, ratio)  # 计算动画后的新坐标
            size = random.randint(1, 2)  # 随机选择点的大小
            all_points.append((x, y, size))  # 将点添加到当前帧的点列表

        # 将当前帧的所有点存储到all_points字典中
        self.all_points[generate_frame] = all_points  # 存储当前帧的点数据

    def render(self, render_canvas, render_frame):
        """
        渲染当前帧的所有点到画布
        :param render_canvas: Tkinter的Canvas对象
        :param render_frame: 当前渲染的帧数
        """
        # 获取当前帧的点数据,使用模运算来循环帧数
        points = self.all_points.get(render_frame % self.generate_frame, [])  # 获取点列表
        # 遍历所有点并绘制到画布
        for x, y, size in points:  # 遍历每个点
            render_canvas.create_rectangle(
                x, y, x + size, y + size,  # 定义矩形的四个角坐标
                width=0,  # 矩形边框宽度设为0
                fill=HEART_COLOR  # 填充颜色为心形颜色
            )  # 在画布上绘制一个矩形代表一个点


def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
    """
    动画绘制函数
    :param main: Tkinter的主窗口
    :param render_canvas: Tkinter的Canvas对象
    :param render_heart: Heart类的实例
    :param render_frame: 当前帧数,默认为0
    """
    render_canvas.delete('all')  # 清除画布上的所有内容
    render_heart.render(render_canvas, render_frame)  # 渲染当前帧的心形点
    # 设置延迟后再次调用draw函数,实现动画循环,这里设置为30毫秒,约33帧/秒
    main.after(30, draw, main, render_canvas, render_heart, render_frame + 1)  # 递归调用draw函数


if __name__ == '__main__':
    root = Tk()  # 创建Tkinter主窗口
    root.title("丝滑心形动画")  # 设置窗口标题为“丝滑心形动画”
    # 创建Canvas画布,设置背景颜色为黑色,指定高度和宽度
    canvas = Canvas(root, bg='white', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)  # 创建画布对象, bg='white'画布颜色
    canvas.pack()  # 将画布添加到主窗口中进行显示
    heart = Heart(generate_frame=60)  # 创建Heart类的实例,预生成60帧的动画数据
    draw(root, canvas, heart)  # 启动动画绘制函数
    root.mainloop()  # 进入Tkinter的主事件循环,开始运行GUI



更多文献

【ChatGPT】CodeMoss & ChatGPT中文版-国内专属的大模型聚合AI工具

【VScode】揭秘编程利器:教你如何用“万能@符”提升你的编程效率! 全面解析ChatMoss & ChatGPT中文版

【VScode】VSCode中的智能编程利器,全面揭秘ChatMoss & ChatGPT中文版

结语

通过本教程,你已经掌握了使用Python Tkinter制作动态心形动画的全流程。从数学函数的应用到GUI绘制,再到动画效果的实现,每一步都充满了技术的魅力。希望你能在此基础上,发挥创意,制作出更多令人惊艳的动画作品。不妨将这份爱与创意,分享给身边的朋友,让更多人感受到编程的乐趣与温暖❤️。

如果你在学习过程中遇到任何问题,欢迎在评论区留言讨论。让我们一起交流、成长,共同探索编程的无限可能!

💬 立即动手,开启你的编程创意之旅吧!