2017年5月11日
一、動效描述
?許許多多不同顏色、不同形狀的圖形在畫布中隨機運動杉编，彼此的連線隨著距離遠近而變化。當(dāng)點擊畫布上某一個圖形時咆霜，所有該圖形的同類圖形都以它為中心匯聚起來邓馒，并顯示一些文案信息。
二蛾坯、要點
1. 粒子
- 生成一系列的隨機粒子光酣。
- 每個粒子擁有 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 的正負表示其方向倘零，存在四種情況（上下左右）唱遭。
?c. 觸壁反彈 ?
把粒子的 X,Y 值與畫布的長寬比較，一旦超出范圍就改變其方向呈驶。
2. 線條
兩兩相連拷泽，每兩個粒子間都繪制一條直線，共 C(n, 2) 條。
但這樣繪制出來的線條太多太密集司致，調(diào)整為透明度隨著兩點的距離增大而遞減拆吆，當(dāng)超過一定距離后，直接不繪制脂矫。
context.globalAlpha = (config.DISTANCE - d) / config.DISTANCE;
3. Canvas 交互
- 鼠標點擊某個粒子后枣耀，與該粒子屬于同組的粒子們，向中心靠攏
- 數(shù)學(xué)公式：已知起點和終點羹唠，求直線上任一P點從終點向起點運動的過程奕枢。
使用 Canvas 技術(shù)展示動效時，交互上相對沒有使用 CSS + HTML 那么靈活佩微，因為在頁面上只存在一個 DOM 節(jié)點缝彬，即 <canvas> 標簽節(jié)點。但也可以通過記錄下每個粒子的 X, Y 坐標值哺眯，與鼠標 mousemove 或者 click 時的坐標值對比谷浅，來控制粒子的下一步運動。
如以圓粒子為例：
- 當(dāng)鼠標落在圓內(nèi)時候奶卓，便認為選中此粒子一疯。
var d = Math.sqrt(Math.pow(circle.x - clickX, 2)+ Math.pow(circle.y - clickY, 2));
if (d <= circle.radius) {
...
}
三、總結(jié)與體會
“動效” 即 “變化”夺姑，可從三個角度來看：形狀墩邀、材質(zhì)、定位盏浙。
- 形狀：幾何形狀眉睹、不規(guī)則形狀等；以及包括形變废膘，如大小變化竹海、拉伸縮短等；
- 材質(zhì)：如顏色丐黄、圖案斋配、透明度、陰影等灌闺；
- 定位：坐標 X艰争，Y
控制好每個屬性的變化過程，則是完成一次動效過程桂对。
尚有許多可優(yōu)化之處甩卓，如目前粒子們都在各自做勻速隨機運動，若想是的粒子運動更為真實接校，可能還需加上粒子之間的碰撞力以及碰撞帶來的方向變化和速度變化等猛频。
