以前研究 從微信小程序裏面的canvas實現;後來發現laya也能夠實現 不過並無使用他們的粒子；算法
最終效果
canvas
實現過程：小程序
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屬性來實現
不過大佬說直接在這裏增長這些參數容易出事情，因此本身封裝比較穩oop
以後咱們經過循環來對粒子進行操做；動畫
其中粒子從屏幕四方不斷匯聚的效果並非生成和消失；而是到達目的地的點隨機去了屏幕邊緣的位置；spa
在一個loop裏面寫一個for循環讓小點往destination 移動；若是移動到了目標點就讓他改變位置而且從新設置一個目標點，blog
這裏面有個坑，當你的animation的位置改變的時候 ，他的rotation會歸0； 因此作了一個值記錄他的rotation;rem
總結：實際上就是經過你的算法來對ani進行操做ani能夠設置成靜態的；不過關於殘影效果怎麼作還不清楚，只能實現一些簡單的效果；若是有大佬知道歡迎指教。