| 559 | } |
| 560 | |
| 561 | animateCanvas(prevImg, nextImg) { |
| 562 | const { innerWidth: width, innerHeight: height } = window; |
| 563 | this.back.width = width; |
| 564 | this.back.height = height; |
| 565 | |
| 566 | const ctx = this.back.getContext("2d"); |
| 567 | ctx.imageSmoothingEnabled = false; |
| 568 | ctx.filter = "blur(30px) brightness(0.6)"; |
| 569 | const blur = 30; |
| 570 | |
| 571 | const x = -blur * 2; |
| 572 | |
| 573 | let y; |
| 574 | let dim; |
| 575 | |
| 576 | if (width > height) { |
| 577 | dim = width; |
| 578 | y = x - (width - height) / 2; |
| 579 | } else { |
| 580 | dim = height; |
| 581 | y = x; |
| 582 | } |
| 583 | |
| 584 | const size = dim + 4 * blur; |
| 585 | |
| 586 | if (!CONFIG.enableFade) { |
| 587 | ctx.globalAlpha = 1; |
| 588 | ctx.drawImage(nextImg, x, y, size, size); |
| 589 | return; |
| 590 | } |
| 591 | |
| 592 | let factor = 0.0; |
| 593 | const animate = () => { |
| 594 | ctx.globalAlpha = 1; |
| 595 | ctx.drawImage(prevImg, x, y, size, size); |
| 596 | ctx.globalAlpha = Math.sin((Math.PI / 2) * factor); |
| 597 | ctx.drawImage(nextImg, x, y, size, size); |
| 598 | |
| 599 | if (factor < 1.0) { |
| 600 | factor += 0.016; |
| 601 | requestAnimationFrame(animate); |
| 602 | } |
| 603 | }; |
| 604 | |
| 605 | requestAnimationFrame(animate); |
| 606 | } |
| 607 | |
| 608 | componentDidMount() { |
| 609 | this.updateInfo = this.fetchInfo.bind(this); |