成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

騰訊AlloyTeam正式發(fā)布Canvas魔幻線條 - curvejs

silencezwm / 2312人閱讀

摘要：原文鏈接寫(xiě)在前面中文讀克，是騰訊打造的一款魔幻線條框架，讓線條成為一名優(yōu)秀的舞者，讓線條們成為優(yōu)秀的舞團(tuán)，就是舞臺(tái)。官網(wǎng)你還記得經(jīng)典的屏幕保護(hù)程序變幻線嗎其原理就是使用制作而成。代表運(yùn)動(dòng)方式，可以拿去到和。

【原文鏈接】

?

寫(xiě)在前面

curvejs 中文讀["克js"]，是騰訊AlloyTeam打造的一款魔幻線條框架，讓線條成為一名優(yōu)秀的舞者，讓線條們成為優(yōu)秀的舞團(tuán)，HTML5 Canvas就是舞臺(tái)。

官網(wǎng)：https://alloyteam.github.io/curvejs/

你還記得window經(jīng)典的屏幕保護(hù)程序《變幻線》嗎？

其原理就是使用 Perlin-Noise + Particle System + Bézier Curve + Color Transition 制作而成。

使用curvejs實(shí)現(xiàn)類似變幻線功能只需要不到10行代碼：

const  { Stage, Curve, motion } = curvejs

let stage = new Stage(document.getElementById("myCanvas"))

stage.add(new Curve({
    color: "#00FF00",
    data: {value: 0, step: 0.008, width: 600, height: 400},
    motion: motion.noise
}))

【體驗(yàn)地址】

當(dāng)然，curvejs的能力不僅僅是變換線，這完全取決于你的想象力。比如：

Points-To

Rotate

Word

Perlin-Noise

Simple

Simple-ES5

Curves

Line

Close

使用指南 
$ npm install curvejs
import curvejs from "curvejs"

也可以直接插入script到你的HTML頁(yè)面:

開(kāi)始跳舞:

var Stage = curvejs.Stage,
    Curve = curvejs.Curve,
    canvas = document.getElementById("myCanvas"),
    stage = new Stage(canvas),
    rd = function() {
     return -2 + Math.random() * 2
    }

var curve = new Curve({
  color: "#00FF00",
  points: [277, 327, 230, 314, 236, 326, 257, 326],
  data: [rd(), rd(), rd(), rd(), rd(), rd(), rd(), rd()],
  motion: function motion(points, data) {
      points.forEach(function (item, index) {
          points[index] += data[index]
      })
  }
})

stage.add(curve)

function tick(){
  stage.update()
  requestAnimationFrame(tick)
}

tick()

上面的points代表了三次貝塞爾曲線的4個(gè)點(diǎn)。motion代表運(yùn)動(dòng)方式，motion可以拿去到points和data。motion里函數(shù)的this指向Curve是實(shí)例curve。

使用內(nèi)置motion 
var curve = new Curve({
  points: [277, 327, 230, 314, 236, 326, 257, 326],
  data: {angle: 0, r:5 ,step:Math.PI / 50 }
  motion: curvejs.motion.dance
})
基本原理

每次創(chuàng)建Curve 可以傳入八個(gè)數(shù)字，其實(shí)就代表上面的4個(gè)點(diǎn)的坐標(biāo)

motion里可以拿到 points 進(jìn)行自定義變幻

幻影不需要開(kāi)發(fā)者考慮，curvejs會(huì)自動(dòng)生成幻影

這里需要特別強(qiáng)調(diào)，curvejs的幻影不是利用canvas的黑色底，然后fillRect填充半透而產(chǎn)生，而是Particle System。所以curvejs制作出的效果不用一定是黑色背景，而且canvas也可以是透明，這就大大增加了適用場(chǎng)景。

提交你的motion

在 motion 目錄, 有許多內(nèi)置的motion提供給開(kāi)發(fā)者使用，但是你也可以提交你的motion到這個(gè)項(xiàng)目，我會(huì)第一時(shí)間review并合入主干。

基本motion格式規(guī)則:

/**
 * motion description.
 *
 * @param {points}
 * @param {data}
 *      data rule example:
 *      [1, 0.2, -3, 0.7, 0.5, 0.3, -1, 1]
 */
export default function (points, data) {
    //你的motion邏輯
}
curvejs相關(guān)

官網(wǎng)：https://alloyteam.github.io/curvejs/

Github: https://github.com/AlloyTeam/curvejs

更加方便的交流關(guān)于curvejs的一切可以加入QQ的curvejs交流群(179181560)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82671.html

相關(guān)文章

  • 學(xué)習(xí)實(shí)踐 - 收藏集 - 掘金

    摘要：官網(wǎng)地址聊天機(jī)器人插件開(kāi)發(fā)實(shí)例教程一創(chuàng)建插件在系統(tǒng)技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。我會(huì)簡(jiǎn)單基于的簡(jiǎn)潔視頻播放器組件前端掘金使用和實(shí)現(xiàn)購(gòu)物車場(chǎng)景前端掘金本文是上篇文章的序章，一直想有機(jī)會(huì)再次實(shí)踐下。 2道面試題：輸入U(xiǎn)RL按回車&HTTP2 - 掘金通過(guò)幾輪面試，我發(fā)現(xiàn)真正那種問(wèn)答的技術(shù)面，寫(xiě)一堆項(xiàng)目真不如去刷技術(shù)文章作用大，因此刷了一段時(shí)間的博客和掘金，整理下曾經(jīng)被...

    mikyou 評(píng)論0 收藏0

  • 騰訊AlloyTeam正式發(fā)布pasition - 制作酷炫Path過(guò)渡動(dòng)畫(huà)

    摘要：下面來(lái)看看的結(jié)構(gòu)在開(kāi)發(fā)者工具里截圖每條都包含個(gè)數(shù)字，分別代表三次貝塞爾曲線的起點(diǎn)控制點(diǎn)控制點(diǎn)終點(diǎn)。這個(gè)函數(shù)可以自行嘗試一下，生成出的字符串賦值給的的就可以了。 showImg(https://segmentfault.com/img/remote/1460000009865685?w=164&h=98);showImg(https://segmentfault.com/img/remo...

    shadowbook 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

  • Web前端常用插件

    摘要：彈窗視頻嵌入插件幻燈片圖片切換手機(jī)端響應(yīng)式日期控件上傳圖片控件校驗(yàn)控件分頁(yè)靜態(tài)分頁(yè)動(dòng)態(tài)分頁(yè)相冊(cè)效果控件多級(jí)下拉圖片延遲加載或響應(yīng)式管理模板插件庫(kù)大轉(zhuǎn)盤(pán)九宮格效果整屏滾動(dòng)滾動(dòng)效果用于移動(dòng)項(xiàng)目的光滑菜單瀏覽器端格式化工具千手觀音 彈窗 1.blockUI2.overlay 3.sweetAlert 視頻 1.jwplayer2.video.js html53.swfobject Flas...

    quietin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<