利用JavaScript制作一個(gè)搞怪的兔子動(dòng)畫效果
前言
Hello,掘友們好!又是一年新春之際,祝福大家兔年快樂(lè)!給大家介紹一個(gè)有趣的動(dòng)效(兼容 IE),頁(yè)面右下角有一只搞怪的兔子,鼠標(biāo)在頁(yè)面中懸停時(shí),兔子會(huì)跟著做出不同的動(dòng)作和表情。然后可以在頁(yè)面中任意位置(離兔子太近不能發(fā)射,會(huì)傷到兔子)點(diǎn)擊鼠標(biāo),將從兔子眼睛里發(fā)射炮彈,隨之擊中的是你的霉 運(yùn)、壓 力、貧 窮、疾 病。
實(shí)現(xiàn)
定義一個(gè)隨機(jī)文本塊。
<p id="p1"></p>
定義兔子的構(gòu)造函數(shù)。
function HoverRabbit() { this.explodeImage = new Image(); this.explodeImage.src = "img/explode.png"; for (var i = 1; i <= 6; i++) { this.images[i] = new Image(); this.images[i].src = "img/s" + i + ".png"; } if (typeof(CanvasGradient) != 'undefined') { this.canvas = document.createElement("canvas"); this.canvas.width = screen.width + 100; this.canvas.height = screen.height; this.canvas.style.position = 'absolute'; this.canvas.style.left = '0px'; this.canvas.style.top = '0px'; this.canvas.style.display = 'none'; document.body.appendChild(this.canvas); this.canvas.style.position = 'fixed'; } }
定義兔子原型的屬性和方法。
HoverRabbit.prototype = { images: [], explodeImage: null, eyePositions: [], current: 1, frame: 1, canvas: null, interval: null, start: function() { var me = this; this.eyePositions[1] = { eye1x: 123, eye1y: 47, eye2x: 104, eye2y: 53 }; this.eyePositions[2] = { eye1x: 120, eye1y: 50, eye2x: 101, eye2y: 54 }; this.eyePositions[3] = { eye1x: 119, eye1y: 54, eye2x: 97, eye2y: 56 }; this.eyePositions[4] = { eye1x: 112, eye1y: 61, eye2x: 90, eye2y: 61 }; this.eyePositions[5] = { eye1x: 105, eye1y: 64, eye2x: 85, eye2y: 61 }; this.eyePositions[6] = { eye1x: 98, eye1y: 68, eye2x: 79, eye2y: 56 }; document.onmousemove = function(e) { me.onmousemove(e); } if (this.canvas) { document.addEventListener("click", function(e) { me.ondblclick(e); }); } }, onmousemove: function(e) { var event = e || window.event; var deg = Math.abs(screen.height - event.screenY) / (Math.abs(screen.width - event.screenX) + 1); var n = 1; if (deg > 2) n = 6; else if (deg > 1.4) n = 5; else if (deg > 0.7) n = 4; else if (deg > 0.45) n = 3; else if (deg > 0.2) n = 2; this.deg = n; if (this.current != n) { document.body.style.backgroundImage = "url(" + this.images[n].src + ")"; this.current = n; } }, drawBomb: function(ctxt, n, x, y) { var sx = 64 * (n % 4); var sy = 64 * (Math.floor(n / 4)); ctxt.drawImage(this.explodeImage, sx, sy, 64, 64, x - 32, y - 32, 64, 64); }, ondblclick: function(e) { if (this.canvas.style.display != 'none') return; var me = this; if (e.clientX > window.innerWidth - 200 && e.clientY > window.innerHeight - 200) return; var ctxt = this.canvas.getContext("2d"); this.frame = 1; this.interval = setInterval(function(e2) { ctxt.clearRect(0, 0, me.canvas.width, me.canvas.height); switch (me.frame) { case 1: ctxt.strokeStyle = 'rgba(247,166,71,1)'; me.canvas.style.display = 'block'; case 2: if (me.frame == 2) { ctxt.strokeStyle = 'rgba(247,166,71,0.5)'; me.drawBomb(ctxt, 0, e.clientX, e.clientY); } case 3: if (me.frame == 3) { ctxt.strokeStyle = 'rgba(247,166,71,0.1)'; me.drawBomb(ctxt, 1, e.clientX, e.clientY); } var eye1x = window.innerWidth - me.eyePositions[me.current].eye1x; var eye1y = window.innerHeight - me.eyePositions[me.current].eye1y; ctxt.lineWidth = 3; ctxt.beginPath(); ctxt.moveTo(eye1x, eye1y); ctxt.lineTo(e.clientX, e.clientY); ctxt.stroke(); var eye2x = window.innerWidth - me.eyePositions[me.current].eye2x; var eye2y = window.innerHeight - me.eyePositions[me.current].eye2y; ctxt.beginPath(); ctxt.moveTo(eye2x, eye2y); ctxt.lineTo(e.clientX, e.clientY); p1.textContent = ['霉 運(yùn)', '壓 力', '貧 窮', '疾 病'][Math.floor(Math.random() * 4)]; p1.style.display = 'block'; p1.style.transform = 'rotate(' + (-150 + me.deg * 30) + 'deg)'; p1.style.left = e.clientX - 30 + 'px'; p1.style.top = e.clientY - 30 + 'px'; fade(p1); ctxt.stroke(); break; case 4: me.drawBomb(ctxt, 2, e.clientX, e.clientY); break; case 14: me.canvas.style.display = 'none'; window.clearInterval(me.interval); break; default: me.drawBomb(ctxt, me.frame - 2, e.clientX, e.clientY); } me.frame++; }, 50); } };
各個(gè)屬性和方法說(shuō)明:
- images - 兔子不同的動(dòng)作的圖片數(shù)組。
- explodeImage - 炮彈圖片元素。
- eyePositions - 兔子眼睛位置的數(shù)組。
- current - 整型數(shù)字,當(dāng)前動(dòng)作的指針。
- frame - 整型數(shù)字,發(fā)射炮彈動(dòng)畫的幀數(shù)指針。
- canvas - 畫布元素。
- interval - 發(fā)射炮彈動(dòng)畫時(shí)間間隔定時(shí)器的 interval ID。
- start - 啟動(dòng)頁(yè)面交互的方法,在這里定義了兔子眼睛位置的數(shù)組數(shù)據(jù),綁定頁(yè)面鼠標(biāo)移動(dòng)、點(diǎn)擊事件。
- onmousemove - 定義頁(yè)面鼠標(biāo)移動(dòng)的實(shí)現(xiàn)方法。
- ondblclick - 定義頁(yè)面鼠標(biāo)點(diǎn)擊的實(shí)現(xiàn)方法。
- drawBomb - 定義繪制和更新炮彈動(dòng)畫的方法。
定義文字淡出的動(dòng)畫。
function fade(e) { var s = e.style; s.opacity = 1; (function hide() { (s.opacity -= .01) < 0 ? s.display = "none" : requestAnimationFrame(hide); })(); }
創(chuàng)建兔子對(duì)象,調(diào)用啟動(dòng)交互方法。
var s = new HoverRabbit(); s.start();
效果圖
到此這篇關(guān)于利用JavaScript制作一個(gè)搞怪的兔子動(dòng)畫效果的文章就介紹到這了,更多相關(guān)JavaScript兔子動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript Html實(shí)現(xiàn)移動(dòng)端紅包雨功能頁(yè)面
- javascript實(shí)現(xiàn)移動(dòng)端紅包雨頁(yè)面
- js+css實(shí)現(xiàn)紅包雨效果
- JavaScript+Canvas模擬實(shí)現(xiàn)支付寶畫年兔游戲
- 基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件
- JavaScript?Canvas實(shí)現(xiàn)兼容IE的兔子發(fā)射爆破動(dòng)圖特效
- 利用JavaScript創(chuàng)建一個(gè)兔年春節(jié)倒數(shù)計(jì)時(shí)器
- 基于Three.js實(shí)現(xiàn)3D玉兔效果的示例代碼
- JS技巧動(dòng)手實(shí)現(xiàn)紅包兔子雨效果示例詳解
相關(guān)文章
使用JS實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)簡(jiǎn)易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
這篇文章主要介紹了Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下2016-05-05詳解template標(biāo)簽用法(含vue中的用法總結(jié))
這篇文章主要介紹了template標(biāo)簽用法(含vue中的用法總結(jié)),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-01-01JavaScript調(diào)試技巧之console.log()詳解
對(duì)于JavaScript程序的調(diào)試,相比于alert(),使用console.log()是一種更好的方式,原因在于:alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行,從而造成副作用;而console.log()僅在控制臺(tái)中打印相關(guān)信息,因此不會(huì)造成類似的顧慮2014-03-03JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果示例
這篇文章主要介紹了JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果,結(jié)合實(shí)例形式分析了javascript與css3響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性實(shí)現(xiàn)圖片放大效果相關(guān)操作技巧,需要的朋友可以參考下2018-05-05原生javascript實(shí)現(xiàn)自動(dòng)更新的時(shí)間日期
這篇文章主要介紹了原生javascript實(shí)現(xiàn)自動(dòng)更新的時(shí)間日期的相關(guān)資料,對(duì)實(shí)現(xiàn)代碼進(jìn)行詳細(xì)分析,感興趣的朋友可以參考一下2016-02-02基于javascript數(shù)組實(shí)現(xiàn)圖片輪播
這篇文章主要為大家詳細(xì)介紹了基于javascript數(shù)組實(shí)現(xiàn)圖片輪播的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05JS實(shí)現(xiàn)購(gòu)物車中商品總價(jià)計(jì)算
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購(gòu)物車中商品總價(jià)的計(jì)算 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03