利用python和前端三件套来一场线上烟花秀

python烟花秀

效果展示：

全部代码如下：

前端三件套（JS、CSS、HTML）的烟花秀

HTML部分：定义网页内容

CSS部分：描述网页布局

JS部分：控制网页行为

End

✨✨✨✨✨✨✨

元旦节就要来了，线下没有烟花看，线上不得整点烟花酷炫一下嘛！！

啥？过啥圣诞节？过啥洋节，咱们过元旦节好吧！

✨✨✨✨✨✨✨

python烟花秀

效果展示：

在这里，我们设计一个对象，表示烟花事件中的每个粒子。每个粒子都会有一些重要的属性，支配了它的外观和移动状况：大小，颜色，位置，速度等等。

'''
particles 类

粒子在空中随机生成随机，变成一个圈、下坠、消失

属性:- id: 粒子的id- x, y: 粒子的坐标- vx, vy: 在坐标的变化速度- total: 总数- age: 粒子存在的时长- color: 颜色- cv: 画布- lifespan: 最高存在时长

'''
class part:
def __init__(self, cv, idx, total, explosion_speed, x=0., y=0., vx = 0., vy = 0., size=2., color = 'red', lifespan = 2, **kwargs):self.id = idxself.x = xself.y = yself.initial_speed = explosion_speedself.vx = vxself.vy = vyself.total = totalself.age = 0self.color = colorself.cv = cvself.cid = self.cv.create_oval(x - size, y - size, x + size,y + size, fill=self.color)self.lifespan = lifespan

除了属性，这个对象肯定还要有其所固定的方法，这里我们定义了其三个方法，分别是“膨胀”“坠落”和“消失”，这些函数分别如示范：

def update(self, dt):# 粒子膨胀if self.alive() and self.expand():move_x = cos(radians(self.id*360/self.total))*self.initial_speedmove_y = sin(radians(self.id*360/self.total))*self.initial_speedself.vx = move_x/(float(dt)*1000)self.vy = move_y/(float(dt)*1000)self.cv.move(self.cid, move_x, move_y)
# 以自由落体坠落elif self.alive():move_x = cos(radians(self.id*360/self.total))# we technically don't need to update x, y because move will do the jobself.cv.move(self.cid, self.vx + move_x, self.vy+GRAVITY*dt)self.vy += GRAVITY*dt
# 如果粒子的生命周期已过，就将其移除elif self.cid is not None:cv.delete(self.cid)self.cid = None

除此之外，为达到烟花更好的效果，我们这里也定义了烟花种每一个粒子的绽放时间和坠落时间，这里可以自己多尝试几组参数以达到·最好的效果：

# 定义膨胀效果的时间帧
def expand (self):return self.age <= 1.2

# 检查粒子是否仍在生命周期内
def alive(self):return self.age <= self.lifespan
利用Tkinter快速创建GUI应用程序：import tkinter as tk
root = tk.Tk()

对于每个小烟花里边的粒子的定义：创建一列列表，每个子列表是一个烟花，其包含一列粒子。每个列表中的例子有相同的x,y坐标、大小、颜色、初始速度。

numb_explode = randint(6,10)
# 为所有模拟烟花绽放的全部粒子创建一列列表
for point in range(numb_explode):objects = []x_cordi = randint(50,550)y_cordi = randint(50, 150)       size = uniform (0.5,3)color = choice(colors)explosion_speed = uniform(0.2, 1)total_particles = randint(10,50)for i in range(1,total_particles):r = part(cv, idx = i, total = total_particles, explosion_speed = explosion_speed, x = x_cordi, y = y_cordi, color=color, size = size, lifespan = uniform(0.6,1.75))objects.append(r)
explode_points.append(objects)

定义每个粒子定期更新粒子的属性，这里我们设置让粒子每0.01秒更新它们的状态，在1.8秒之后停止更新（这意味着每个粒子的存在时间为1.6秒，其中1.2秒为“绽放”状态，0.4秒为“坠落”状态，0.2秒处于Tkinter将其完全移除前的边缘状态）。

total_time = .0
# 在1.8秒时间帧内保持更新
while total_time < 1.8:sleep(0.01)tnew = time()t, dt = tnew, tnew - tfor point in explode_points:for part in point:part.update(dt)cv.update()total_time += dt

值得注意的是，为了增加视觉上的效果，我们可以增加一个美丽的背景图放在当前目录：

image = Image.open("./image1.jpg")

全部代码如下：

import tkinter as tk
from PIL import Image, ImageTk
from time import time, sleep
from random import choice, uniform, randint
from math import sin, cos, radians

# 模拟重力
GRAVITY = 0.05
# 颜色选项（随机或者按顺序）
colors = ['red', 'blue', 'yellow', 'green', 'orange', 'purple', 'seagreen', 'indigo', 'cornflowerblue']

'''
particles 类

粒子在空中随机生成随机，变成一个圈、下坠、消失

属性:- id: 粒子的id- x, y: 粒子的坐标- vx, vy: 在坐标的变化速度- total: 总数- age: 粒子存在的时长- color: 颜色- cv: 画布- lifespan: 最高存在时长

'''
class Particle:
def __init__(self, cv, idx, total, explosion_speed, x=0., y=0., vx=0., vy=0., size=2., color='red', lifespan=2,**kwargs):self.id = idxself.x = xself.y = yself.initial_speed = explosion_speedself.vx = vxself.vy = vyself.total = totalself.age = 0self.color = colorself.cv = cvself.cid = self.cv.create_oval(x - size, y - size, x + size,y + size, fill=self.color)self.lifespan = lifespan
def update(self, dt):self.age += dt
# 粒子范围扩大if self.alive() and self.expand():move_x = cos(radians(self.id * 360 / self.total)) * self.initial_speedmove_y = sin(radians(self.id * 360 / self.total)) * self.initial_speedself.cv.move(self.cid, move_x, move_y)self.vx = move_x / (float(dt) * 1000)
# 以自由落体坠落elif self.alive():move_x = cos(radians(self.id * 360 / self.total))# we technically don't need to update x, y because move will do the jobself.cv.move(self.cid, self.vx + move_x, self.vy + GRAVITY * dt)self.vy += GRAVITY * dt
# 移除超过最高时长的粒子elif self.cid is not None:cv.delete(self.cid)self.cid = None
# 扩大的时间def expand (self):return self.age <= 1.2
# 粒子是否在最高存在时长内def alive(self):return self.age <= self.lifespan

'''
循环调用保持不停
'''
def simulate(cv):t = time()explode_points = []wait_time = randint(10, 100)numb_explode = randint(6, 10)# 创建一个所有粒子同时扩大的二维列表for point in range(numb_explode):objects = []x_cordi = randint(50, 500)y_cordi = randint(50, 250)speed = uniform(0.5, 1.5)size = uniform(0.5, 2)color = choice(colors)explosion_speed = uniform(0.2, 1)total_particles = randint(10, 100)for i in range(1, total_particles):r = Particle(cv, idx=i, total=total_particles, explosion_speed=explosion_speed, x=x_cordi, y=y_cordi,vx=speed, vy=speed, color=color, size=size, lifespan=uniform(0.6, 1.75))objects.append(r)explode_points.append(objects)
total_time = .0# 1.8s内一直扩大while total_time < 1.8:sleep(0.01)tnew = time()t, dt = tnew, tnew - tfor point in explode_points:for item in point:item.update(dt)cv.update()total_time += dt# 循环调用root.after(wait_time, simulate, cv)


def close(*ignore):"""退出程序、关闭窗口"""global rootroot.quit()


if __name__ == '__main__':root = tk.Tk()cv = tk.Canvas(root, height=600, width=800)# 选一个好看的背景会让效果更惊艳！image = Image.open("./image1.jpg")photo = ImageTk.PhotoImage(image)
cv.create_image(0, 0, image=photo, anchor='nw')cv.pack()
root.protocol("WM_DELETE_WINDOW", close)root.after(100, simulate, cv)root.mainloop()

reference：https://zhuanlan.zhihu.com/p/187481893

前端三件套（JS、CSS、HTML）的烟花秀

接下来我们要做的就是在实现烟花效果的同时把前端三件套也学了！！

听着就很刺激！