Canvas javascript animation - изменение прямоугольника слева направо, изменение цвета - проблема с повторением анимации - PullRequest
Новая
       1

Canvas javascript animation - изменение прямоугольника слева направо, изменение цвета - проблема с повторением анимации

0 голосов
/ 28 марта 2019

Я написал код для моей задачи по подбору персонала - она ​​должна быть перепутана слева направо.Когда он попадает в правую границу, он должен изменить свой размер на 100px, левый - 50px.После каждых 20 пикселей он меняет свой цвет.Как я могу гарантировать, что это изменение будет происходить один раз в 20pxls?Код на самом деле работает правильно, но я не могу найти в Интернете никакого решения, которое помогло бы мне повторить эту конкретную анимацию кода.Он движется слева направо, а затем снова налево, и Река прячется, как бесконечный левый. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CANVAS animacje</title>
    <style>
    
    body{
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
   
    </style>
</head>
<body>

   <canvas></canvas>
<script>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 1000;
canvas.height = 500;

let cw = canvas.width;
let ch = canvas.height;

let canvasX = 0;
let canvasY = 0;

let rectX = 0;
let rectY = ch/2;

let rectSize = 50;
let rectSizeRight = 100;
let rectSpeed = 10;

function field(){
    ctx.fillStyle = '#ddd';
    ctx.fillRect(canvasX, canvasY, cw, ch);
    window.requestAnimationFrame(field);

}

function randomColors(){
        let r = Math.floor(Math.random()*255);
        let g = Math.floor(Math.random()*255);
        let b = Math.floor(Math.random()*255);
        return 'rgb('+r+','+g+','+b+')';
        window.requestAnimationFrame(randomColors);

    }


function rect(){

    ctx.fillStyle = randomColors()
    ctx.fillRect(rectX,rectY,rectSize,rectSize);
    
    rectX+=rectSpeed; 

    
    if(rectX+rectSize == 0){
        rectSize = rectSize;
        rectSpeed=rectSpeed;
    } else if(rectX+rectSizeRight == cw){
        rectSize=rectSizeRight;
        rectSpeed = -rectSpeed;
    } ;
    window.requestAnimationFrame(rect);

    
    // if(rectX+rectSizeRight == cw){
    //     rectSize=rectSizeRight;
    //     rectSpeed = -rectSpeed
    //   } 

    

    
    //   if (rectX+rectSize <= 0){
    //       rectSize = rectSize;
    //       rectSpeed = -rectSpeed;
    //   }
    //   if(rectX+rectSizeRight>=cw){
    //       rectSize=rectSizeRight;
    //       rectSpeed = -rectSpeed;
    //   }
     }


 function animate(){
field();
rect();
randomColors();
 }

 window.requestAnimationFrame(animate);


</script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

Попробуйте это

https://stackblitz.com/edit/typescript-kk42qx?embed=1&file=index.ts

// Import stylesheets
import './style.css';

// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `<h1>TypeScript Starter</h1>`;


const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 1000;
canvas.height = 500;

let cw = canvas.width;
let ch = canvas.height;

let canvasX = 0;
let canvasY = 0;

let rectX = 0;
let rectY = ch/2;

let rectSize = 50;
let rectSizeRight = 100;
let rectSpeed = 10;

function field(){
  ctx.fillStyle = '#ddd';
  ctx.fillRect(canvasX, canvasY, cw, ch);
  window.requestAnimationFrame(field);
}

function randomColors(){
  let r = Math.floor(Math.random()*255);
  let g = Math.floor(Math.random()*255);
  let b = Math.floor(Math.random()*255);
  return 'rgb('+r+','+g+','+b+')';
  window.requestAnimationFrame(randomColors);
}

let a = 0; <==== Initialize a variable outside the loop

function rect(){

  a++; <=== 

  ctx.fillStyle = randomColors()
  ctx.fillRect(rectX,rectY,rectSize,rectSize);

  // ==========================
  if (a % 50 === 0) {
    rectX = a;
  }
  // ==========================


  if(rectX + rectSize == 0){
    rectSize = rectSize;
    rectSpeed = rectSpeed;
  } else if(rectX + rectSizeRight === cw){
    rectSize = rectSizeRight;
    rectSpeed = -rectSpeed;
  } else if (1) {

  }

  window.requestAnimationFrame(rect);

  // console.log(rectX)

}



function animate(){
  field();
  rect();
  randomColors();
}

window.requestAnimationFrame(animate);
0 голосов
/ 28 марта 2019

Короче говоря:

  • удалить избыточные вызовы функций, которые отображают объекты на экране
  • сохранить последние выбранные цвета для ссылки на них после того, как фон холста переопределит прямоугольник
  • изменять цвета только тогда, когда координаты x кратны 20 (используйте оператор по модулю, чтобы проверить это)
  • код после return не будет выполнен

Вот обновленныйкод: 

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 1000;
canvas.height = 500;

let cw = canvas.width;
let ch = canvas.height;

let canvasX = 0;
let canvasY = 0;

let rectX = 0;
let rectY = ch/2;

let rectSize = 50;
let rectSizeRight = 100;
let rectSpeed = 1;

// my change
let currentColors = randomColors();

function field(){

    ctx.fillStyle = '#ddd';
    ctx.fillRect(canvasX, canvasY, cw, ch);

    window.requestAnimationFrame(field);

}

function randomColors() {

        let r = Math.floor(Math.random()*255);
        let g = Math.floor(Math.random()*255);
        let b = Math.floor(Math.random()*255);

        return 'rgb('+r+','+g+','+b+')';

    }


function rect(){

    // my change
    if (rectX % 20 === 0) {
        currentColors = randomColors();
    }

    // my change
    ctx.fillStyle = currentColors;

    ctx.fillRect(rectX,rectY,rectSize,rectSize);

    rectX+=rectSpeed; 


    if(rectX+rectSize == 0){
        rectSize = rectSize;
        rectSpeed=rectSpeed;
    } else if(rectX+rectSizeRight == cw){
        rectSize=rectSizeRight;
        rectSpeed = -rectSpeed;
    } ;

    window.requestAnimationFrame(rect);


    // if(rectX+rectSizeRight == cw){
    //     rectSize=rectSizeRight;
    //     rectSpeed = -rectSpeed
    //   } 




    //   if (rectX+rectSize <= 0){
    //       rectSize = rectSize;
    //       rectSpeed = -rectSpeed;
    //   }
    //   if(rectX+rectSizeRight>=cw){
    //       rectSize=rectSizeRight;
    //       rectSpeed = -rectSpeed;
    //   }
     }


 function animate(){
    // my change
    field();
    rect();
 }

 window.requestAnimationFrame(animate);

Кроме того, код немного грязный, но это другая история.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...