tkinter绘制组件（9）——点状等待框

Smart-Space

已于 2024-06-13 11:59:11 修改

阅读量591

点赞数 2

分类专栏： TinUI 文章标签： Python tkinter TinUI

于 2021-07-22 17:11:07 首次发布

本文链接：https://blog.csdn.net/tinga_kilin/article/details/118890824

版权

TinUI 专栏收录该内容

60 篇文章 53 订阅

订阅专栏

tkinter绘制组件（9）——点状等待框

引言
布局
效果
github项目
pip下载
结语

引言

在本专栏的第7篇文章中，我们详细讲解了圆形等待框。同圆形等待框一样，点状等待框也是格式用户程序正在处理还是操作，并没有卡机。但是，圆形等待框的占用位置属于正方形，在可用位置较小的时候，使用圆形等待框难免会造成组件重叠。

因此，使用点状等待框不仅拥有更好的动画效果，也可以减少位置占用。

但是要注意，点状等待框更加耗能（别问为什么，继续看就知道了，忽略内存占用的dl请勿当真）。

布局

函数结构

在TinUI中，我们使用add_waitbar2来创建点状等待框：

def add_waitbar2(self,pos:tuple,width:int=200,fg='grey',bg='white',okcolor='lightgreen'):#绘制点状等待框
    '''
    pos::左上角其实位置
    width::长度
    fg::点状颜色
    bg::背景色
    okcolor::完成后的背景色
    '''

背景

根据本专栏前几篇文章可知，无论怎么样，先创建一个背景。

bbox=(pos[0],pos[1],pos[0]+width+10,pos[1]+10)
back=self.create_rectangle(bbox,fill=bg,outline=fg)

关于为什么要在末位置各加10像素，这是因为点状直径是10像素。这是经过一定考虑的，通过不同直径的点状来决定背景的最终覆盖范围。

移动点

在这个绘制组件中最重要的部分是5个移动点（你也可以不是五个）。这几个移动点将实现等待动画效果，为了方便操作，我们使用列表将其归类创建：

balls=[]
ball_bbox=(pos[0],pos[1],pos[0]+10,pos[1]+10)
for b in range(1,6):
    ball=self.create_oval(ball_bbox,fill=fg,outline=fg,state='hidden')
    balls.append(ball)

动画样式

因为有了add_waitbar1的技术积累，我们很明确如何实现等待动画效果。

但，我们需要完成若干移动点的动画，因此区别于add_waitbar1的两层动画控制，我们需要三层动画控制，即：

组件动画控制
└单移动点动画控制
 └单点移动

在add_waitbar1中：
组件动画控制
└组件动画

组件与单点控制

#单点运动控制
def _start(ball):
    if ifok.re==True:
        return
    self.itemconfig(ball,state='normal')
    for w in range(0,width+5,5):
        self.after(w*15,lambda w=w:ball_go(ball,w))
#整体动画控制
def start():
    if ifok.re==True:
        return
    for i in balls:
        self.after(balls.index(i)*500,lambda i=i:_start(i))

单点移动

 #单点运动
def ball_go(ball,w):
    self.move(ball,5,0)
    if balls.index(ball)==4 and w>=width:
        for i in balls:
            self.coords(i,ball_bbox)
        start()

ifok是TinUINum类的实例，关于TinUINum类，在此前的文章中已做说明。

结束函数

同样的，点状等待框也需要提供结束函数：

def stop():
    ifok.re=True
    for i in balls:
        self.itemconfig(i,state='hidden')
    self.itemconfig(back,fill=okcolor)

完整代码函数

def add_waitbar2(self,pos:tuple,width:int=200,fg='grey',bg='white',okcolor='lightgreen'):#绘制点状等待框
    #单点运动
    def ball_go(ball,w):
        self.move(ball,5,0)
        if balls.index(ball)==4 and w>=width:
            for i in balls:
                self.coords(i,ball_bbox)
            start()
    #单点运动控制
    def _start(ball):
        if ifok.re==True:
            return
        self.itemconfig(ball,state='normal')
        for w in range(0,width+5,5):
            self.after(w*15,lambda w=w:ball_go(ball,w))
    #整体动画控制
    def start():
        if ifok.re==True:
            return
        for i in balls:
            self.after(balls.index(i)*500,lambda i=i:_start(i))
    def stop():
        ifok.re=True
        for i in balls:
            self.itemconfig(i,state='hidden')
        self.itemconfig(back,fill=okcolor)
    ifok=TinUINum()
    ifok.re=False
    bbox=(pos[0],pos[1],pos[0]+width+10,pos[1]+10)
    back=self.create_rectangle(bbox,fill=bg,outline=fg)
    balls=[]
    ball_bbox=(pos[0],pos[1],pos[0]+10,pos[1]+10)
    for b in range(1,6):
        ball=self.create_oval(ball_bbox,fill=fg,outline=fg,state='hidden')
        balls.append(ball)
    start()
    return back,balls,stop

效果

测试代码

def test(event):
    a.title('TinUI Test')
    b.add_paragraph((50,150),'这是TinUI按钮触达的事件函数回显，此外，窗口标题也被改变、首行标题缩进减小')
    b.coords(m,100,5)
def test1(word):
    print(word)
def test2(event):
    ok1()
def test3(event):
    ok2()

if __name__=='__main__':
    a=Tk()
    a.geometry('700x700+5+5')

    b=TinUI(a,bg='white')
    b.pack(fill='both',expand=True)
    m=b.add_title((600,0),'TinUI is a test project for futher tin using')
    m1=b.add_title((0,680),'test TinUI scrolled',size=2,angle=24)
    b.add_paragraph((20,290),'''     TinUI是基于tkinter画布开发的界面UI布局方案，作为tkinter拓展和TinEngine的拓展而存在。目前，TinUI尚处于开发阶段。如果想要使用完整的TinUI，敬请期待。''',
    angle=-18)
    b.add_paragraph((20,100),'下面的段落是测试画布的非平行字体显示效果，也是TinUI的简单介绍')
    b.add_button((250,450),'测试按钮',activefg='white',activebg='red',command=test,anchor='center')
    b.add_checkbutton((80,430),'允许TinUI测试',command=test1)
    b.add_label((10,220),'这是由画布TinUI绘制的Label组件')
    b.add_entry((250,300),350,30,'这里用来输入')
    b.add_separate((20,200),600)
    b.add_radiobutton((50,480),300,'sky is blue, water is blue, too. So, what is your heart',('red','blue','black'),command=test1)
    b.add_link((400,500),'TinGroup知识库','http://tinhome.baklib-free.com/')
    _,ok1=b.add_waitbar1((500,220),bg='lightgreen')
    b.add_button((500,270),'停止等待动画',activefg='cyan',activebg='black',command=test2)
    bu1=b.add_button((700,200),'停止点状滚动条',activefg='white',activebg='black',command=test3)[1]
    bu2=b.add_button((700,250),'nothing button 2')[1]
    bu3=b.add_button((700,300),'nothing button 3')[1]
    b.add_labelframe((bu1,bu2,bu3),'box buttons')
    _,_,ok2=b.add_waitbar2((600,400),fg='blue')

    a.mainloop()