国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

開源造輪子:一個簡潔,高效,輕量級,酷炫的不要不要的canvas粒子運動插件庫

Anonymous1 / 3526人閱讀

摘要:一開篇哈哈哈,感謝標題黨的蒞臨雖然標題有點夸張的感覺,但實際上,插件庫確實是簡潔,高效,輕量級,酷炫酷炫的咯。當然,配置不同的參數值,或許可以得到挺多不同的特效呢上面已經演示過標配的粒子無序運動啦,下面演示后面兩種。

一:開篇

哈哈哈,感謝標題黨的蒞臨~

雖然標題有點夸張的感覺,但實際上,插件庫確實是簡潔,高效,輕量級,酷炫酷炫的咯。
廢話不多說,先來看個標配例子吧:

http://codepen.io/barrior/pen...

是吧,應該是酷炫酷炫的吧,不喜歡的話可以向下看更多的例子哦~

二:說說我(們)的理念:

厭倦市場上眼花繚亂,百花齊放,百鳥爭鳴的繁榮景象,我心憔悴...
像我這種頭腦簡單,四肢也簡單的人就適合簡單的API,簡單人和物 (。?_?)/~~~
好吧,還是說回代碼吧,API設計希翼"The Write Less, Do More""Keep it Simple and Stupid"的形式,拒絕繞彎子API,崇尚簡潔,簡約!
所以你會跟作者一樣,使用起這個插件會感覺到很爽,很輕松,嘎嘎嘎~ 不信看看接下來的所有效果展示。

三:所有效果展示

目前插件庫提供了三種特效:粒子無序運動,波浪運動,雪花飄落特效。
當然,配置不同的API參數值,或許可以得到挺多不同的特效呢!
上面已經演示過標配的粒子無序運動啦,下面演示后面兩種。

1、波浪運動·標配

http://codepen.io/barrior/pen...

js代碼(效果參考QQ電話):

new Particleground.wave( "#demo", {
    num: 3,
    // 三條線依次的顏色
    lineColor: ["rgba(0, 190, 112, .5)", "rgba(0, 190, 112, .7)", "rgba(0, 190, 112, .9)"],
    // 三條線依次的寬度
    lineWidth: [.5, .7, .9],
    // 三條線依次的向左偏移值
    offsetLeft: [2, 1, 0],
    // 三條線都向上偏移容器高度的0.75倍
    offsetTop: .75,
    // 三條線依次的波峰高度
    crestHeight: [10, 14, 18],
    // 三條線都只有兩個波峰(波紋)
    rippleNum: 2,
    speed: .1,
    // 隱藏填充,默認false
    fill: false,
    // 顯示邊框,即線條效果,默認true
    stroke: true
});

如果你英語可以的話,相信看屬性名結合效果就大概知道配置是什么意思啦,不然的話你可以看看官網對這幾個API的描述,戳這里哈。

2、波浪運動·loading動畫

http://codepen.io/barrior/pen...

這個js代碼就不貼啦,需要自己寫加載的進度,然后設置到效果上哈。

3、雪花飄落特效

http://codepen.io/barrior/pen...

極簡單的js代碼:

new Particleground.snow("#demo");
四:解釋標題

好啦,效果看完啦,現在解釋一下標題的那幾個宣傳字眼,雖然好像并沒有什么用...

簡潔:

就像前面的粒子運動例子,只需要一行簡單的代碼 new Particleground.particle("#demo") 就可以實現啦。

然后就是“潔”:這個需要閱讀源碼咯,相信從源碼中你會看到代碼的簡潔優雅的,具體請戳這里啦~

當然,特效也是簡潔美觀的啦,對不起視覺的效果為什么還要用代碼去實現它呢...

高效:

在作者的能力基礎之上,代碼能優化的地方作者都想盡了方法去優化它(包括性能的優化,代碼的簡化)。

比如:this關鍵字的在另一個函數內儲存成變量參數使用,多次使用到的深度屬性或方法儲存成變量使用,既達到壓縮時可減少體積,又達到減少變量查找的耗時。

比如:粒子無序運動的連線功能處理,嵌套for循環,O(n2)的問題,作者優化了三次(git commit有記錄咯),最后使用(學習借鑒)了《HTML5+JavaScript動畫基礎》這本書的一個思想和優化方式,達到既不冗余代碼或占用內存,又提升了一倍的執行效率。具體可點擊這里,源碼第160行哦。

輕量級:

由于前面說到的兩點,輕量級自然就孕育而生啦。

另一個就是特效之間都是以獨立的插件形式使用的,不存在相互依賴的問題,只依賴一個公共的功能文件,這樣就可以達到想加載什么就加載什么,按需加載的不臃腫體驗啦,也可以偷懶直接使用包含所有特效的壓縮包文件咯。

五:最后

一個良好的官網及文檔是一個良好的開始,插件庫官網:particleground.duapp.com, 先用著這個域名咯,等時機成熟了,再換回正式的 pjs.barrior.me 域名~

貢獻總是受歡迎的,無論它多么大或小!只要你與作者的觀念,理念,志同道合的話,那就太希望你加入組織的懷抱啦,做一件自己喜歡的事,做一個自己都喜歡自己的人。

如果你喜歡這個插件庫并能幫助到你的實際工作中,希望它能發展的更好,提供更多有趣實用的特效,支持我(們),煩請點個 Star 吧

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/80677.html

相關文章

  • 可能是最全前端動效匯總

    摘要:非常的龐大,而且它是完全為設計而生的動效庫。它運行于純粹的之上,是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具,它支持大量的瀏覽器,只要它們支持和特性。可以通過安裝吊炸天了,接近現實生活中的物理運動碰撞慣性動畫庫。 收集日期為2019-02-28,★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫,是許多基礎動...

    afishhhhh 評論0 收藏0

發表評論

0條評論

Anonymous1

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<