您現在的位置是:電腦技術吧?>? 組裝維修 ??>??碎玻璃特效,照片玻璃碎片特效??>??正文詳情

碎玻璃特效,照片玻璃碎片特效

威忻歡2019-11-15 22:50:40 人圍觀
簡介快手玻璃碎片特效今天我們將為您帶來一個由HTML5Canvas實現的圖像玻璃碎片效果。圖像以玻璃碎片的形式出現在界面上,然后玻璃破碎的效果似乎逐漸被報道。呈現如下:HTML代碼破碎玻

今天要為大家帶來一款html5 canvas實現的圖片玻璃碎片特效。

圖片以玻璃碎片的形式出現到界面中,然后似玻璃被打碎的效果漸消息。

效果圖如下:

html代碼:代碼如下:img src=city_copy.jpg id=src_img class=hidden div id=container style=-webkit-perspective: 500px; div script src=delaunay.js/script script src=TweenMax.min.js/script js代碼:代碼如下:// canvas settings var imageWidth = 768, imageHeight = 485; var vertices = [], indices, boxes = []; var image, fragments = [], container = document.getElementById('container'); window.onload = function () { image = document.getElementById('src_img'); triangulate(); makeBoxes(); makeFragments(); }; function triangulate() { var x, y, dx = imageWidth / 8, dy = imageHeight / 8, offset = 0.5; for (var i = 0; i = imageWidth; i = dx) { for (var j = 0; j = imageHeight; j = dy) { if (i (i !== imageWidth)) x = i randomRange(-dx * offset, dx * offset); else x = i; if (j (j !== imageHeight)) y = j randomRange(-dy * offset, dy * offset); else y = j; vertices.push([x, y]); } } indices = Delaunay.triangulate(vertices); } function makeBoxes() { var p0, p1, p2, xMin, xMax, yMin, yMax; for (var i = 0; i indices.length; i = 3) { p0 = vertices[indices[i 0]]; p1 = vertices[indices[i 1]]; p2 = vertices[indices[i 2]]; xMin = Math.min(p0[0], p1[0], p2[0]); xMax = Math.max(p0[0], p1[0], p2[0]); yMin = Math.min(p0[1], p1[1], p2[1]); yMax = Math.max(p0[1], p1[1], p2[1]); boxes.push({ x: xMin, y: yMin, w: xMax - xMin, h: yMax - yMin }); } } function makeFragments() { var p0, p1, p2, box, fragment; TweenMax.set(container, { perspective: 500 }); var tl0 = new TimelineMax({ repeat: -1 }); for (var i = 0; i indices.length; i = 3) { p0 = vertices[indices[i 0]]; p1 = vertices[indices[i 1]]; p2 = vertices[indices[i 2]]; box = boxes[i / 3]; fragment = new Fragment(p0, p1, p2, box); var rx = randomRange(30, 60) * ((i % 2) ? 1 : -1); var ry = randomRange(30, 60) * ((i % 2) ? -1 : 1); var tl1 = new TimelineMax(); TweenMax.set(fragment.canvas, { y: box.y - 1000 }); tl1.to(fragment.canvas, randomRange(0.9, 1.1), { y: box.y, ease: Back.easeOut }); tl1.to(fragment.canvas, 0.5, { z: -100, ease: Cubic.easeIn, delay: 0.4 }); tl1.to(fragment.canvas, randomRange(1, 1.2), { rotationX: rx, rotationY: ry, z: 250, alpha: 0, ease: Cubic.easeOut }); tl0.insert(tl1); fragments.push(fragment); container.appendChild(fragment.canvas); } } function randomRange(min, max) { return min (max - min) * Math.random(); } Fragment = function (v0, v1, v2, box) { this.v0 = v0; this.v1 = v1; this.v2 = v2; this.box = box; this.canvas = document.createElement('canvas'); this.canvas.width = this.box.w; this.canvas.height = this.box.h; this.canvas.style.width = this.box.w 'px'; this.canvas.style.height = this.box.h 'px'; this.ctx = this.canvas.getContext('2d'); TweenMax.set(this.canvas, { x: this.box.x, y: this.box.y }); this.ctx.translate(-this.box.x, -this.box.y); this.ctx.beginPath(); this.ctx.moveTo(this.v0[0], this.v0[1]); this.ctx.lineTo(this.v1[0], this.v1[1]); this.ctx.lineTo(this.v2[0], this.v2[1]); this.ctx.closePath(); this.ctx.clip(); this.ctx.drawImage(image, 0, 0); }; //@ sourceURL=pen.js

版權聲明:本文由 威忻歡 整理編輯。

原標題:玻璃碎片特效怎么回事,玻璃破碎特效

轉載注明出處:http://www.dn9ww09s.icu/assemble/12640.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • dfu模式和恢復模式哪個好,dfu刷機弊端

    dfu模式和恢復模式哪個好,dfu刷機弊端 相關圖片蘋果用itunes恢復系統DFU的全稱是設備固件升級,是iPhone固件的強制升級和降級模式。只有當用戶的iPhone無法打開,iTunes無法識別,或者用戶的iPhone被降級越獄時,蘋果11更新不了13.1...

  • 代碼例子,g代碼實例

    代碼例子,g代碼實例 相關圖片代碼呈現:方法1:代碼如下:!DOCTYPE HTML htmlbody canvas id=mycanvas width=500 height=500yourbrhtml5基礎代碼實例...

  • 光驅讀不出光盤怎么辦,外置光驅讀不出光盤

    光驅讀不出光盤怎么辦,外置光驅讀不出光盤 相關圖片電腦光驅讀不出dvd光盤CD-ROM驅動器是筆記本電腦的標準工具。許多臺式機也將配備CD-ROM驅動器,但許多人已經很長時間沒有聯系CD-ROM驅動器了。然而,一些大型游戲的運營商仍然win10光驅...

  • 升級win10,怎么升級win10

    升級win10,怎么升級win10 相關圖片win8.1Win10是微軟主操作系統的最新版本。有些新功能只能在win10上體驗,所以很多舊版本系統的用戶也開始想升級自己的系統。本文將與您分享win8.1升級win10bwin...

  • html音樂播放器代碼,html5音樂播放器源碼

    html音樂播放器代碼,html5音樂播放器源碼 相關圖片音樂播放器前端獲取htmlvideoelement和htmludioelement objects1//audio您可以直接通過new 2 media=newaudio(ht在線音樂播放器源碼...

  • 蘋果定位功能有什么用,怎樣使用蘋果手機定位功能

    蘋果定位功能有什么用,怎樣使用蘋果手機定位功能 相關圖片蘋果手機的定位功能沒有網絡能用嗎當iPhone用戶丟失手機或想定位自己的手機時,可以通過icloud使用蘋果的定位功能。不過,icloud只能定位蘋果設備的大致位置,使用蘋果定位并不十分...

  • 邊框圓角,圓角邊框怎么設置

    邊框圓角,圓角邊框怎么設置 相關圖片html圓角矩形邊框!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xps做圓角矩形邊框...

  • 怎么看window10的版本,surface pro怎么看幾代

    怎么看window10的版本,surface pro怎么看幾代 相關圖片win10歷史版本號當用戶想知道他們的win10系統是否是最新版本時,他們可以通過檢查版本號來判斷。有些用戶不知道如何查看win10。實際上,只要使用命令查看win10版本,就可以bios開機密...

  • 四個全面布局的意義,戰略布局的意義

    四個全面布局的意義,戰略布局的意義 相關圖片四個全面布局隨著Web2.0標準化設計理念的普及,國內許多大型門戶網站都采用了div CSS的方式,52css.com也成為學習CSS頁面布局技術的先鋒網站。從實際應用來看布局在銷售中的意義...

  • 2.4g和5g要不要合并,2.4g頻段怎么設置

    2.4g和5g要不要合并,2.4g頻段怎么設置 相關圖片雙頻路由器關閉5g快今天的無線WiFi,我們發現有的標著2.4G,有的標著5g,2.4G和5g WiFi是什么意思?他們之間有什么區別?有人認為5g肯定比2.4G好,其實這是錯誤的2.4g能跑滿100m嗎...

熱評文章

  • kux格式播放器,哪個播放器支持kux格式

    kux格式播放器,哪個播放器支持kux格式 相關圖片支持kux播放器有些用戶看到Kux格式的文件時會感到奇怪。事實上,Kux格式是優酷獨有的視頻格式。如果用戶想打開Kux格式供魏健觀看,需要使用優酷播放器。Kux不是一種常見的視qlv格式...

  • applepay無法添加卡,apple pay怎么打開

    applepay無法添加卡,apple pay怎么打開 相關圖片未能設置apple pay蘋果支付是蘋果公司的一種快捷支付方式,給iPhone用戶帶來了極大的便利。但是,當用戶在Apple pay中添加卡時,無法添加。蘋果支付不能添加的卡是什么綁定apple pay卡無...

  • 交互文檔,交互文檔說明

    交互文檔,交互文檔說明 相關圖片sketch 交互文檔交互規范文檔是交互設計器輸出的重要組成部分,關系到設計方案能否最大限度地實現。新的互動人,大多會擔心如何編寫互動文檔。今天我們來談談這個話題,交互文檔...

  • 聯想 Z5 Pro,聯想Z5 Pro GT

    聯想 Z5 Pro,聯想Z5 Pro GT 相關圖片聯想手機怎么樣自vivo nex以來,真正的全屏手機層出不窮。本文與大家分享一款來自聯想的新機型:聯想Z5 pro采用了創新的滑蓋式全屏幕設計,實現了超級95.0聯想手機...

  • 值得關注的一件事,值得關注的博主

    值得關注的一件事,值得關注的博主 相關圖片ins有哪些值得關注的人如果設計趨勢只停留在色彩、交互效果和卡片界面的討論上,我們可能會在未來兩年內落后。今天,讓華僑設計總監斯佩爾與同學們一起探討五大影響人類生活方...

  • win鍵用不了,win鍵不能用怎么辦

    win鍵用不了,win鍵不能用怎么辦 相關圖片怎么禁用win鍵在電腦鍵盤上,有些按鍵位置很少被某些用戶使用,但其實它們的功能非常強大。例如,更著名的贏鍵。讓我們看看贏球的關鍵是什么?贏的鑰匙有什么用?是舊鍵盤上的...

  • 元素element,myelement元素

    元素element,myelement元素 相關圖片element是啥我很久沒有更新教程了。我最近很忙。今天,我想和大家分享一下如何使用pixate來產生使用單一元素來擴展轉換的效果效果。效果如下:實際上,這個效果在pixate中element是哪里...

  • 手機刷機是什么概念,手機系統卡刷是什么意思

    手機刷機是什么概念,手機系統卡刷是什么意思 相關圖片手機刷機需要提供什么對于喜歡手機的用戶來說,手機刷的概念是非常熟悉的,但是對于一些新朋友來說,刷的概念還是有點奇怪刷是一種改變手機操作系統的行為,相當于安裝了不同...

  • 圖庫攝影師,中國圖庫攝影師

    圖庫攝影師,中國圖庫攝影師 相關圖片中國圖庫簽約攝影師今天,一個新的安利畫廊網站被挑出來,因為它的所有照片都是由專業攝影師拍攝的。圖片的質量比一般的畫廊網站要高得多。這些圖片可以免費下載、使用和修改...

  • win鍵按了沒反應,win10按win鍵沒反應

    win鍵按了沒反應,win10按win鍵沒反應 相關圖片win鍵一直按著計算機鍵盤上的Win鍵是一種強大的輔助密鑰,它可以在與其他情況結合后進行調整。然而,當一些用戶按下win鍵時,他們沒有響應。我該怎么辦?一。鍵盤本身可能需要拆...

關注微信

变脸官网查询