TweenLite实现canvas线条跟随鼠标移动视觉差异动画代码
代码语言:html
所属分类:视觉差异
代码描述:TweenLite实现canvas线条跟随鼠标移动视觉差异动画代码
代码标签: TweenLite canvas 线条 跟随 鼠标 移动 视觉差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> html { height: 100%; } main { height: 100%; } body { height: 100%; background: #02020e; min-height: 100vh; overflow: hidden; } .canvas-wrap { height: 100%; width: 100%; z-index: 3; } .canvas-wrap .shadow-left { position: absolute; width: 80px; height: 100%; top: 0; left: 0; z-index: 1; background-image: linear-gradient(to left, rgba(9, 1, 24, 0) 0%, #090118 100%); } .canvas-wrap .shadow-right { position: absolute; width: 80px; height: 100%; top: 0; right: 0; z-index: 1; background-image: linear-gradient(to right, rgba(9, 1, 24, 0) 0%, #090118 100%); } .canvas-wrap .shadow-top { position: absolute; width: 100%; height: 80px; top: 0; left: 0; z-index: 1; background-image: linear-gradient(to top, rgba(9, 1, 24, 0) 0%, #090118 100%); } .canvas-wrap .shadow-bottom { position: absolute; width: 100%; height: 80px; bottom: 0; left: 0; z-index: 1; background-image: linear-gradient(to bottom, rgba(9, 1, 24, 0) 0%, #090118 100%); } .canvas-wrap:before { content: ""; position: absolute; width: 80px; height: 100%; top: 0; right: 0; z-index: 1; background-image: linear-gradient(to right, rgba(9, 1, 24, 0) 0%, #090118 100%); } .canvas-wrap img { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; opacity: 0; transition: opacity 1s ease 0.3s; } .canvas-wrap img.loaded { opacity: 1; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenLite.js"></script> <main id="main" data-page-id="home"> <div class="canvas-wrap"> <canvas id="canvas"></canvas> <div class="shadow-left"></div> <div class="shadow-right"></div> <div class="shadow-bottom"></div> <div class="shadow-top"></div> </div> </main> <script> const MOBILE_DEVICE_SCREEN_WIDTH = 690; const FULL_HD_DEVICE_SCREEN_WIDTH = 1920; const img = document.getElementById('img'); class Director { _setup() { this._el = document.getElementById('main'); this.rect = this._el.getBoundingClientRect(); this.onMouseMove = this.onMouseMove.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); this.resize = this.resize.bind(this); this.isMobile = false; this.isFullHD = false; this.mobileFlagChanged = false; this.width = window.innerWidth; // base canvas settings this.canvasSetings = { startingX: 0, startingY: 0, baseSpeed: 0.0001, lineGroupsQuantity: 4, scale: [2, 3.1, 3.6, 2.5, 2.2, 3, 2.6, 4, 4.5, 5, 7, 8, 9, 10, 12], canvas: this._el.querySelector('#canvas'), mouseX: 0, mouseY: 0, mouseParallaxCoef: 3, }; // canvas desktop settings this.fullHDCanvasSettings = { count: 600, particleSizeY: 39, particleSizeX: 0.48, fatLineQuantity: 9, fatLineWidth: 15, fatLineHeight: 250, floatAmplitude: 10, }; // canvas desktop settings this.desktopCanvasSettings = { count: 400, particleSizeY: 30, particleSizeX: 0.4, fatLineQuantity: 8, fatLineWidth: 13, fatLineHeight: 200, floatAmplitude: 10, }; // canvas mobile settings this.mobileCanvasSettings = { count: 100, particleSizeY: 18, particleSizeX: 0.4, fatLineQuantity: 4, fatLineWidth: 7, fatLineHeight: 100, floatAmplitude: 0, }; // canvas init this._canvas = new Canvas(this.canvasSetings); if (this.updateMobileFlag(this.width)) { this.setCanvasSettings(); this._canvas.setup(); this.resize(); } else { this._canvas.setCanvasSize(); } } resize() { this.width = window.innerWidth; if (this.updateMobileFlag(this.width)) { this.setCanvasSettings(); this._canvas.setup(); } else { this._canvas.setCanvasSize(); } this._canvas.renderOnce(); } setCanvasSettings() { if (this.isMobile) { Object.assign( this.canvasSetings, this.mobileCanvasSettings, ); } if (this.isFullHD) { Object.assign( this.canvasSetings, this.fullHDCanvasSettings, ); } if (!this.isFullHD && !this.isMobile) { Object.assign( this.canvasSetings, this.desktopCanvasSettings, ); } } updateMobileFlag(width) { const isMobile = width < MOBILE_DEVICE_SCREEN_WIDTH; const isFullHD = width > FULL_HD_DEVICE_SCREEN_WIDTH; if (isMobile !== this.isMobile) { this.isMobile = isMobile; return true; } if (isFullHD !== this.isFullHD) { this.isFullHD = isFullHD; return true; } if (!this.isFullHD && !this.isMobile) { return true; } return false; } addMouseMoveFloat() { this._el.addEventListener('mousemove', this.onMouseMove); this._el.addEventListener('mouseleave', this.onMouseLeave); } removeMouseEventListener() { this._el.removeEventListener('mousemove', this.onMouseMove); this._el.removeEventListener('mouseleave', this.onMouseLeave); } onMouseMove(e) { TweenLite.killTweensOf(this.canvasSetings); const { rect } = this; TweenLite.to(this.canvasSetings, 0.5, { mouseX: (e.clientX - rect.left) / rect.width - 0.5, mouseY: (e.clientY - rect.top) / rect.height - 0.5, }); } onMouseLeave() { TweenLite.to(this.canvasSetings, 2, { mouseX: 0, mouseY: 0, delay: 0.5 }); } _activate() { window.addEventListener('resize', this.resize); if (!this.isMobile) { this._canvas.play(); this.addMouseMoveFloat(); } } _deactivate() { window.removeEventListener('resize', this.resize); this._canvas.pause(); this.removeMouseEventListener(); } } class Canvas { constructor(settings) { this.settings = settings; this.canvas = this.settings.canvas; this.context = this.canvas && this.canvas.getContext('2d'); this.context.mozImageSmoothingEnabled = true; this.context.webkitImageSmoothingEnabled = true; this.context.msImageSmoothingEnabled = true; this.context.imageSmoothingEnabled = true; this.context.imageSmoothingQuality = 'high'; this.particles = []; this.isPlaying = false; this.animationWorker = this.animationWorker.bind(this); this.startTime = null; this.drawTimer = null; this.renderingAllowed = false; this._doLoading(); } _doLoading() { this.renderingAllowed = true; TweenLite.fromTo(this.canvas, 1.5, { autoAlpha: 0 }, { autoAlpha: 1, delay: 1 }); this.renderOnce(); return Promise.resolve(); } play() { if (this.isPlaying) { return; } this.isPlaying = true; this.startTime = performance.now(); this.enqueueAnimation(); } pause() { this.isPlaying = false; } setup() { if (!this.canvas) return; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0