目錄:
1、動畫效果展示
2、實現原理
3、製作步驟
4、更多創意想法
背景
python在當下的編程界的熱門程度,就如互聯網中的字節跳動一樣,倍受關注。相信看到文章的朋友大部分都已經入門python,因為網上python入門的視頻教程比比皆是。編程讓我們將創意變成現實。
今天我們就來分享一個python進階項目——python實現動態條形圖。我以儘可能簡單和接地氣的表達向你介紹這個動畫的製作過程。當然我們的目標不是讓大家記住代碼,而是瞭解整個製作過程和理解項目實現動畫的思想。
動畫效果展示:
一般python使用turtle庫(一個簡單易上手的幾何圖形庫)可以實現筆跡動畫,基本沒難度。
本文要實現多幅圖像組成的動畫(同樣使用簡單的turtle庫),也是動畫和視頻的製作原理。
實現原理:
通過關閉turtle庫畫筆的軌跡顯示,快速的繪製一幅圖像,讓多幅圖像在一定時間間隔顯示生成動畫。看到我們要實現的動畫效果目標,我們可能覺得有點複雜,無從下手。此時,我們將任務分解,分步實現效果。我們先繪製一個長方形,接著就畫多個長方形(例如16個)這樣就組成一個靜態的條形圖,只要我們畫多幅這種隨機高度的條形圖並顯示一小段時間就能形成動畫。
恭喜你看到這裡,如果能理解我們的實現原理,就完成任務了!
如果大家閒的無聊,想要親自實現一下我們的目標動畫效果,也是可以的,也就30行代碼的功夫。下面我按照我們實現原理的分解步驟向大家展現製作細節。
製作步驟:
0、在一開始導入我們的庫,turtle (繪製幾何圖形),random (產生隨機顏色和高度值)
<code>import turtle as t #導入turtle庫,並該起了個外號為t import random as r/<code>
1、編寫一個畫長方形的自定義函數,rect()。4個參數分別是長方形的高,顏色,x,y座標值。
<code>def rect(h, c, x, y): t.goto(x, y) #畫筆移到特定位置 t.fillcolor(c) #設置填充顏色 t.begin_fill() for i in range(2): #畫長方形 t.fd(20) t.lt(90) t.fd(h) t.lt(90) t.end_fill()/<code>
2、繪製16個長方形,先要產生16種隨機顏色存放到列表c中,形成靜態條形圖。
<code>c = [] for i in range(16): #設置16中隨機顏色 c.append((r.random(),r.random(),r.random())) t.speed(11) #繪圖的速度設置為11 x = -180 t.tracer(False) #關閉軌跡快速繪圖 for i in range(16): h = r.randint(20,220) rect(h, c[i], x, 0) x = x + 20 #下一個長方形x座標值/<code>
3、繪製6666幅靜態條形圖圖案,並且注意停留時間的技巧。
<code>for j in range(6666): #繪製6666次 x = -180 t.tracer(False) for i in range(16): h = r.randint(20,220) rect(h, c[i], x, 0) x = x + 20 t.tracer(True) #打開軌跡讓繪製速度變慢 t.circle(1) #畫一個半徑為1像素的圓,為了停留一段時間 t.tracer(False) t.clear()/<code>
4、完整代碼
<code>import turtle as t import random as r def rect(h, c, x, y): t.goto(x, y) t.fillcolor(c) t.begin_fill() for i in range(2): t.fd(20) t.lt(90) t.fd(h) t.lt(90) t.end_fill() c = [] for i in range(16): c.append((r.random(),r.random(),r.random())) t.speed(11) for j in range(6666): x = -180 t.tracer(False) for i in range(16): h = r.randint(20,220) rect(h, c[i], x, 0) x = x + 20 t.tracer(True) t.circle(1) t.tracer(False) t.clear()/<code>
關鍵點
1、理解整個目標動畫的關鍵在完整代碼的最後4句。通過筆跡顯示和畫一個小圓為每幅圖爭取停留時間,可以調節我們動畫的快慢。最後接到要清屏t.clear()。
<code> t.tracer(True) t.circle(1) t.tracer(False) t.clear()/<code>
更多創意想法
1、你可以在以上代碼基礎上加入自己的想法,例如做一個環繞的動態條形圖。
2、turtle不僅可畫幾何圖形,還可以顯示圖片,實現鍵盤鼠標交互等。
3、我們將以上代碼的倒數第3句 t.circle(1) 改為 t.circle(1, 3) 就可讓條形圖在另一個維度動起來。
能不能改成3D效果的條形圖的呢?就要看各位有想法的朋友們了。本文到此結束有什麼建議和問題都歡迎提出交流。