今天我們來教孩子做出下面這種動畫
畫面是怎麼動起來的
不知道小朋友們有沒有玩過手翻書。當我們用很快的速度翻書時,因為相鄰的兩頁圖畫是連續且不同的,所以就會產生動畫的效果。這個例子告訴我們:
動畫其實是由一系列相似但不同的圖畫快速切換形成的,包括
- 位置的移動
- 畫面的切換
位置的移動
一個最簡單的動畫可以這樣製作:
- 大家在一頁紙上畫一個吃豆人
- 然後再下一頁紙上畫同樣的吃豆人,只是小球在紙上的位置不同
- 重複第2步,直到畫夠了
因為每次吃豆人的位置不同,所以在快速翻動的時候會形成移動的效果
- 因為吃豆人的位置是會變的,所以我們用變數來存放它的位置
畫面的切換
在奔跑的吃豆人中,我們總共只用到了兩張圖片。吃豆人的嘴巴吧唧吧唧的效果就是透過在這兩張圖片之間的不斷切換形成的
用C++畫出上面的兩個吃豆人有些複雜,所以在我們用其他方式畫好這兩個吃豆人之後,將它們儲存成圖片,接下來我們需要把圖片載入到程式裡
迴圈——重複的藝術
迴圈就是重複地做某些事情,計算機做起重複的事情來要比人類優雅很多
吃豆人在跑起來的時候,只做了兩件事情。整個過程其實就是這兩件事情的迴圈往復,也就是1,2,1,2,1,2…………
- 位置在前一次的基礎上右移10個單位
- 張嘴或者閉嘴,也就是呈現一張圖片
計算機很擅長做重複的事情的,只要你透過正確的語句告訴他怎麼做,做多少次
- for迴圈——重複指定的次數
我們讓吃豆人圖片每次向右移動10,當第奇數次移動時張嘴,第偶數次移動時閉嘴。做50次。用for迴圈可以這樣寫
全部程式碼
以下就是我們完整的程式碼,你學會了嗎?
#include <graphics.h>
#include <conio.h>
#include <stdio.h>
int main()
{
initgraph(1000, 1000);
int left = 10;
int top = 50;
setbkcolor(WHITE);
cleardevice();
IMAGE img1, img2;
loadimage(&img1, L"C:\\Users\\ginger\\Desktop\\ball.png", 200, 200); //載入圖片,使用L+"絕對路徑"
loadimage(&img2, L"C:\\Users\\ginger\\Desktop\\ball2.png", 200, 200);
for (int i = 1; i <= 50; i++) {
if (i % 2 == 0) {
cleardevice();
putimage(left, top, &img1);
}
else if (i % 2 == 1) {
cleardevice();
putimage(left, top, &img2);
}
left += 10;
Sleep(150);
}
_getch();
closegraph();
return 0;
}