2017年5月11日
一、動效描述
?許許多多不同顏色、不同形狀的圖形在畫布中隨機(jī)運動，彼此的連線隨著距離遠(yuǎn)近而變化。當(dāng)點擊畫布上某一個圖形時，所有該圖形的同類圖形都以它為中心匯聚起來，并顯示一些文案信息。
二、要點
1. 粒子
- 生成一系列的隨機(jī)粒子。
- 每個粒子擁有 X, Y, 形狀, 顏色等信息。
a. 運動速度
?
對 X 方向 與 Y 方向分別定義增量：speedx , speedy ; 每幀動畫都對粒子的 X,Y 的值，加上此增量，發(fā)生位移。
this.x = this.x + this.speedx;
this.y = this.y + this.speedy;
?
b. 運動方向
speedx , speedy 的正負(fù)表示其方向，存在四種情況（上下左右）。
?c. 觸壁反彈 ?
把粒子的 X,Y 值與畫布的長寬比較，一旦超出范圍就改變其方向。
2. 線條
兩兩相連，每兩個粒子間都繪制一條直線，共 C(n, 2) 條。
但這樣繪制出來的線條太多太密集，調(diào)整為透明度隨著兩點的距離增大而遞減，當(dāng)超過一定距離后，直接不繪制。
context.globalAlpha = (config.DISTANCE - d) / config.DISTANCE;
3. Canvas 交互
- 鼠標(biāo)點擊某個粒子后，與該粒子屬于同組的粒子們，向中心靠攏
- 數(shù)學(xué)公式：已知起點和終點，求直線上任一P點從終點向起點運動的過程。
使用 Canvas 技術(shù)展示動效時，交互上相對沒有使用 CSS + HTML 那么靈活，因為在頁面上只存在一個 DOM 節(jié)點，即 <canvas> 標(biāo)簽節(jié)點。但也可以通過記錄下每個粒子的 X, Y 坐標(biāo)值，與鼠標(biāo) mousemove 或者 click 時的坐標(biāo)值對比，來控制粒子的下一步運動。
如以圓粒子為例：
- 當(dāng)鼠標(biāo)落在圓內(nèi)時候，便認(rèn)為選中此粒子。
var d = Math.sqrt(Math.pow(circle.x - clickX, 2)+ Math.pow(circle.y - clickY, 2));
if (d <= circle.radius) {
...
}
三、總結(jié)與體會
“動效” 即 “變化”，可從三個角度來看：形狀、材質(zhì)、定位。
- 形狀：幾何形狀、不規(guī)則形狀等；以及包括形變，如大小變化、拉伸縮短等；
- 材質(zhì)：如顏色、圖案、透明度、陰影等；
- 定位：坐標(biāo) X，Y
控制好每個屬性的變化過程，則是完成一次動效過程。
尚有許多可優(yōu)化之處，如目前粒子們都在各自做勻速隨機(jī)運動，若想是的粒子運動更為真實，可能還需加上粒子之間的碰撞力以及碰撞帶來的方向變化和速度變化等。
