Processing 日常3 等待動畫1

2021-08-17 21:37:17 字數 3396 閱讀 6875

還記得守望先鋒加入遊戲的時候,出現的等待畫面嗎?今天我們用processing來模擬一下!

先來看一下最後的效果:

首先分析一下這個效果是由哪些元素構成。

1. 有乙個基本圖形,複製了好多分。

2. 每乙個圖形按照一種特定的運動規律在做動畫。

3. 動畫同時伴隨著大小、透明度在變化。

ok!我們先來解決第乙個問題。可以考慮在processing中直接繪製出來,使用相應的繪畫函式,或者直接定義point,讓其連線生成polygon。或者可以直接採用匯入素材的方法,使用loadimage()或loadshape()匯入影象或圖形。而多個影象或圖形的複製,只不過是在draw()函式中多次呼叫相應的繪畫模組而已。

對於第二個和第三個問題,就需要使用數學函式了。我們使用sin() 三角函式可以實現緩入緩出的效果。見sin()函式圖:

不管是對於大小數值還是顏色數值、透明度數值都可以從0-pi這一範圍值做對映至0-1範圍。當然注意到每個單位動畫頻率都不一樣而且有著先後順序的,所以製作的時候應注意。

首先設定好:

pimage img;

img = loadimage("sw.png");

之後,建立類,這裡我們就定義為cube類:

該類擁有位置屬性、透明度屬性和乙個動畫值(便於控制動畫)

class cube 

void draw(float i)

}

其中draw()函式是重點!我們這樣設計:在類外有動畫系統來控制具體的「動畫節拍」,將這一數值傳入類中的draw()函式中,即形參i,該引數定義大小s以及透明度al。具體**詳見上文。

有了cube類之後,還需要乙個外界的「動畫節拍」驅使,並且節拍數需要多個(7個)。既然小系統也有它固有的方法,何不將其設成乙個類呢?我們設成cubesystem類:

class cubesystem 

c0 = new cube(width/2-img.width+20, height/2-img.height+10);

c1 = new cube(width/2+img.width-20, height/2-img.height+10);

c2 = new cube(width/2+img.width+10, height/2);

c3 = new cube(width/2+img.width-20, height/2+img.height-10);

c4 = new cube(width/2-img.width+20, height/2+img.height-10);

c5 = new cube(width/2-img.width-10, height/2);

c6 = new cube(width/2, height/2);

} void draw()

void machine()

for (int i = 0; i < 7; i++)

}}

在該類中設定了有統一的繪畫方法,有驅動動畫的功能模組,也就是

float a = new float[7];

float b = new float[7];

float c = new float[7];

float d = new float[7];

float e = new float[7];

這5個臨時陣列代表的驅動,逐一進行處理,通過:

a[i]+= del*1.3;                     //del值由deltatime()函式獲得,代表這一幀距離上一幀的時間差。在這一差基礎上做一放大處理

b[i] = a[i] % 2.0; //取2.0的餘數(該結果將數值始終控制在0-2.0的範圍,並且迴圈出現)

c[i] = map(b[i], 0, 2.0, 0, pi); //對映,將0-2對映成0-pi

d[i] = sin(c[i]); //做正弦處理

這種「節拍」不是預設就有的,在初始化a[i]陣列時,使用了for迴圈,即:

for (int i = 0; i < 7; i++)

這樣才能保證最後的d[i]陣列的值是連續但是具有相應的運動節拍的。

這些步驟最後生成了驅動數值,見下圖:

這些數值其實代表著弧度值,被用作傳入cube類中draw()方法的實參,即上文提到的「動畫節拍」。我們建立了7個cube物件,傳入操作見下:

c0.draw(d[0]);

c1.draw(d[1]);

c2.draw(d[2]);

c3.draw(d[3]);

c4.draw(d[4]);

c5.draw(d[5]);

c6.draw(d[6]);

在最後,只需定義預留draw() 函式就可以執行這個程式了:

void draw()

【ps】deltatime()函式的定義:

float deltatime()

我們可以嘗試更換

c[i] = map(b[i], 0, 2.0, 0, pi);

d[i] = sin(c[i]);

這兩個計算方法,就可以出現不同效果。

對映更換map(b[i], 0, 2.0, 0, 1.0);

對映更換map(b[i], 0, 2.0, 0, 2*pi);

函式處理更換 cos(c[i]);

對映更換map(b[i], 0, 2.0, 0, 1.0); 函式處理更換 tan(c[i]);

Selenium筆記(6)等待

1.簡介 在selenium操作瀏覽器的過程中,每一次請求url,selenium都會等待頁面載入完畢以後,才會將操作許可權再次交給我們的程式。但是,由於ajax和各種js 的非同步載入問題,所以我們在使用selenium的時候常常會遇到操作的元素還沒有載入出來,就會引發報錯。為了解決這個問題,se...

3線雙向零等待IO通訊機制

許多裝置需要通過io通訊互動資料,怎樣才做到速度最快,通訊可靠,所用資源又少呢?下面介紹乙個我編寫的通訊協議 它沒有1線,2線那樣節省io資源,但是它的通訊速度絕對最快,無需延時,且不用中斷,還可以對等傳輸.實際情況是在51平台上實現了50us傳輸乙個位元組,折合160kbps左右,晶振 22m。特...

6 等待,只因曾經承諾

6 等待,只因曾經承諾 hub thread 中還有乙個函式沒有講,它就是try to freeze 這是與電源管理相關的函式。對大多數人來說,關於這個函式,了解就可以了。隨著linux開始支援suspended之後,有人提倡,每乙個核心程序都應該在適當的時候,呼叫try to freeze 什麼意...