Воспроизведение анимации Canvas HTML5 onClick или onTouchEnd на iPhone

У меня есть тестовый сайт, который использует HTML5 Canvas для загрузки массива неподвижных изображений из видео, а затем рисует их на холсте со скоростью 24 кадра в секунду. Он отлично работает и в настоящее время настроен на автовоспроизведение после того, как массив был предварительно загружен. Причиной этого было автовоспроизведение на iOS.Воспроизведение анимации Canvas HTML5 onClick или onTouchEnd на iPhone

То, что я пытаюсь сделать сейчас, вместо автоматического воспроизведения последовательности изображений, я хочу вызвать функцию animate() с помощью document.getElementById('anim').onclick=animate; Идентификатор элемента - это идентификатор CSS3, который имеет два фоновых элемента: фоновое изображение (которое первый кадр последовательности изображений и кнопка воспроизведения). Это показывается пользователю, пока все изображения не будут предварительно загружены.

Я хочу, чтобы пользователь просто нажал элемент Anim (в любом месте, но есть кнопка воспроизведения для пользователя), а затем воспроизводите последовательность изображений. После последовательности скройте элемент холста, чтобы кнопка фонового изображения и воспроизведения снова показала, что ее можно снова запустить.

Это должно работать на iPhone.

Вы можете просмотреть полный исходный код here, чтобы увидеть его в действии.

CSS:

#anim { 
     background-image:url('images/play_button.png'),url('images/t5.png'); 
     background-position: center, left top; 
     background-repeat: no-repeat; 
     height:500px; 
     width:660px; 
     }

JS:

function draw() { 
      var ctx = document.getElementById('anim').getContext("2d"); 
      var start = 1, stop = 121,cur=start,imgArr=[]; 

      var loadLoop = function() { 
       var img = document.createElement("img"); 
       img.onload = function() { 
        imgArr.push(this); 
        cur++; 

        if(cur > stop) { 
         // all images preloaded 
         // This is where the animate function is called for auto-play 
         animate(); 
        } 
        else { 
         loadLoop(); 
        } 
       } 

       img.src = "jpg_80/t5_"+(cur)+".jpg"; 
      } 

      loadLoop(); 

      function animate() { 
       var timer = setInterval(function() { 
        ctx.drawImage(imgArr.shift(), 0, 0); 
        if(imgArr.length == 0) { 
         // no more frames 
         clearInterval(timer); 
        } 
       },1000/24); 
      } 
     }

HTML:

<body> 
<!-- HTML5 Canvas Animation--> 
<div> 
    <canvas id="anim" width="660" height="500"></canvas> 
</div> 
    <script> 
    //call after page loaded 
    window.onload = function() { 
     draw(); 
     // This is where I want the animate function called for manual play 
     //document.getElementById('anim').onclick=animate; 
    } 
    </script> 
</body>

источник

2015-02-19 Paul

Animate ограничивается в пределах функции отрисовки. Вы можете вызвать функцию animate в функции draw так, как она определена в настоящее время. Вероятно, вам нужен вариант 2.

Вариант 1) Если вы сделаете следующее, вы сможете активировать анимацию при нажатии.

document.getElementById('anim').onclick = draw;

Вариант 2) Если вы хотите вызвать только функцию анимации вам нужно объявить переменную анимировать вне функции отрисовки.

var animate; 
function draw(){ 
//...other draw stuff here 
    animate = function(){ 
     //animate stuff here 
    } 
}

После этого у вас будет доступ к функции анимирования в глобальном масштабе.

источник

2015-02-19 03:58:47

Первый вариант работает! Я попробую второй вариант. Прошло некоторое время с тех пор, как я использовал Javascript, и я даже не заметил, что 'animate()' был завернут в 'draw()'. Тогда я выберу ваш ответ. – Paul

Рад, что я мог бы помочь. Хорошая анимация кстати. –

Воспроизведение анимации Canvas HTML5 onClick или onTouchEnd на iPhone

ответ

Смежные вопросы