失眠网 > Python动画制作：90秒倒计时圆形进度条效果

Python动画制作：90秒倒计时圆形进度条效果

时间：2019-02-03 06:18:53

今天单独讲解一下使用python自带的tkinter模块，如何做出下图这种倒计时的效果。

我们使用tkinter模块里的Canvas画布组件来完成这个倒计时的制作。

拆解最终完成的图形，可以看到，除了按钮用来作为启动倒计时，用来表示倒计时的圆形进度条可以拆解为下面四个组件：

1. 黄色的外圆框（一个填充为空白，边框为黄色的圆）

2. 红色的扇形（进度条的核心，随着倒计时而改变扇形的角度）

3. 黄色的同心圆（用来遮住扇形的内部，显示出环绕进度条的效果）

4. 中间的文字（每秒倒计时，随着扇形一起变化）

所以，其实并不难，我们来分别实现：

圆形

Canvas绘制圆形的函数是create_oval。所以绘制黄色的外圆框，和里面黄色的小同心圆，都可以使用这个函数。具体方法是：

# 绘制黄色的外圆框cv.create_oval(100,50,350,300,outline='yellow')# 绘制黄色的小同心圆cv.create_oval(150,100,300,250,fill='yellow',outline='yellow')

参数也比较简单，前面四个数字分别代表了这个圆所占的正方形的左上角（x1和y1）和右下角（x2和y2）的坐标。当然这个正方形只是表示位置，并不会出现正方形的边框或内容。

后面跟着的fill表示填充的颜色，如果不写这个参数，就表示是一个空心的圆。outline表示外边框的颜色，我们这里都使用了黄色yellow。此外还有其他参数，比如width，可以表示外边框的厚度，默认是1，我们这里就没有特意指定了。

扇形

接着绘制扇形。Canvas绘制扇形（弧形）的函数是create_arc。比如下面这条代码就画了上面例子中的一个四分之三圆形面积的扇形。

cv.create_arc(100,50,350,300,start=90,extent=270,fill="red",outline='yellow')

前面四个数字和绘制圆形的一样，表示扇形所占正方形位置的左上角和右下角的坐标。fill和outline的参数也和圆形一样，表示填充的颜色和外边框的颜色。比较重要的参数是start和extent。

start参数表示扇形的起始角度，extent表示逆时针开始，绘制到多少角度。所以，这里start=90，extent=270，就表示弧形的一边是垂直的（90度起始角度），另一边是向右水平的（逆时针旋转270度）

数字

而最后的文字（数字）可以使用Canvas的create_text函数：

cv.create_text(225,175,text='90',font =('微软雅黑',64,'bold'),fill='red')

代码中前面两个数字表示文字中心的横纵坐标，这也方便了我们，不管文字内容如何变化，可以始终居中。参数text表示显示的内容，fill表示文字的颜色，font则表示文字的字体、大小、粗细等属性。

代码逻辑

组件就这么多，实现的原理也很简单：

创建一个按钮，使用回调函数countdown。回调函数中随着变化的角度绘制扇形并更新文字，360度按照90秒倒计时，那么每秒钟减少4度正好，也就是说，每秒钟绘制一个减少4度的扇形。使用after方法设定countdown函数每一秒钟执行一次（类似上篇文章的掷骰子）。如果数字和扇形的角度减少到0，则停止倒计时。

虽然很简单，但是其实这里面也有几个小坑：

一开始还没有倒计时的时候，扇形的位置应该是个圆形，也就是说，扇形的角度应该是360度。但是遗憾的是，如果把create_arc函数里的参数extent设置为360，我们得不到一个圆形，所以在开始的时候，我们要再扇形的位置另外绘制一个圆形。每秒钟绘制新的扇形之前，必须先把老的扇形图形给删去，不然无法显示出新的图形。绘制图形的位置也很重要，虽然理论上，需要重新绘制的只有变化的扇形和中间一直减少的数字，但实际上那个小同心圆也要重新绘制，道理和上一条一样，如果不绘制，就会被新绘制的扇形所挡住。按钮按下的时候，应该在1秒后才开始变成89，外面的扇形也随之变成356度（360-4），换句话说，这个变化不是马上发生的。而如果放在一个可重复执行的函数里，就需要加一个判断：第一秒的时候什么都不做。按钮按下以后，按钮的状态应该就失效了（DISABLED），不然，如果可以一直点，倒计时将变得混乱。而在倒计时结束后，按钮的状态才回复正常（NORMAL），从而可以开始一个新的倒计时。

代码实现

from tkinter import *import tkinter.messagebox as tmcount=90angle=360def countdown():global angle,count,cv_arcbtn['state']=DISABLEDif angle==360:angle -= 4else:cv.delete(cv_arc)cv_arc=cv.create_arc(100,50,350,300,start=90,extent=angle,fill="red",outline='yellow')angle -= 4count-=1cv.create_oval(150,100,300,250,fill='yellow',outline='yellow')cv.create_text(225,175,text=count,font =('微软雅黑',64,'bold'),fill='red')if count==0:tm.showinfo(message='倒计时结束！')angle = 360cv.delete(cv_arc)cv_arc=cv.create_oval(100,50,350,300,fill='red',outline='yellow')count=90cv.create_oval(150,100,300,250,fill='yellow',outline='yellow')cv.create_text(225,175,text=count,font =('微软雅黑',64,'bold'),fill='red')btn['state']=NORMALelse:root.after(1000,countdown)root = Tk()root.geometry('450x450')root.resizable(0,0)root.title('倒计时')cv = Canvas(root,width=450,height=450,bg='white')btn = Button(root,text='开始',width=5,command=countdown)cv_btn = cv.create_window(225,350,window=btn)cv.create_oval(100,50,350,300,outline='yellow')cv_arc=cv.create_oval(100,50,350,300,fill='red',outline='yellow')cv.create_oval(150,100,300,250,fill='yellow',outline='yellow')cv.create_text(225,175,text=90,font =('微软雅黑',64,'bold'),fill='red')cv.pack()root.mainloop()