layabox微信小程序實現粒子效果(已實現)


之前研究 從微信小程序里面的canvas實現;后來發現laya也可以實現   不過並沒有使用他們的粒子;

最終效果

 

實現過程:

1.不斷改變顏色的粒子===   通過ani做一個不斷更換顏色的粒子 (位置不需要改變);

2.封裝一下animation類

class animationB extends Laya.Animation {
/**動畫的速度 */
public speed: number;
/**是否到家 */
public IsComeHome: boolean;
/**是否是創造出來的*/
public IsCreate: boolean;
/**目的地的x坐標 */
public destinationX: number;
/**目的地的y坐標 */
public destinationY: number;
/**記錄自身的角度 */
public rememberRotation: number;
constructor() {
super();
}
}
 
 
因為粒子是不斷運動的所以給他加了幾個屬性值來方便操作;
 
這里也可以直接通過增加laya里面的animation屬性來實現

 

 不過大佬說直接在這里增加這些參數容易出事情,所以自己封裝比較穩

 

之后我們通過循環來對粒子進行操作;

其中粒子從屏幕四方不斷匯聚的效果並不是生成和消失;而是到達目的地的點隨機去了屏幕邊緣的位置;

在一個loop里面寫一個for循環讓小點往destination 移動;如果移動到了目標點就讓他改變位置並且重新設置一個目標點,

 

這里面有個坑,當你的animation的位置改變的時候 ,他的rotation會歸0; 所以做了一個值記錄他的rotation;

 

 

總結:實際上就是通過你的算法來對ani進行操作ani可以設置成靜態的;不過關於殘影效果怎么做還不清楚,只能實現一些簡單的效果;如果有大佬知道歡迎指教。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM