Плавная анимация JavaScript с помощью StackBlur - PullRequest
Новая
       15

Плавная анимация JavaScript с помощью StackBlur

3 голосов
/ 12 августа 2011

http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Если переместить ползунок на этой странице, размытие будет очень плавным.

Но если я попробую автоматизировать анимацию: 

var speed = 1250;
var blur = 100;
var interval = speed/blur;

setInterval(function(){
  blur--;
  stackBlurImage(image, canvas, blur);
}, interval);

Этапы очень очевидны, и они даже не работают на высокой скорости.

Может ли кто-нибудь предложить альтернативный подход к этому?

1 Ответ

6 голосов
/ 12 августа 2011

Предварительно визуализируйте различные уровни размытия, сохраняйте их и просматривайте их как кадры.Возможно, что все, что stackBlurImage делает, просто не может быть сделано достаточно быстро, чтобы выглядеть как анимация.

Редактировать: Я забираю это обратно, именно то, что вы сделали: http://jsfiddle.net/nwellcome/27QUM/, который мне нравится в Chrome, какой браузер вы используете?

Редактировать 2: Попробуйте второй подход в этой скрипке: http://jsfiddle.net/nwellcome/27QUM/4/, вместо уменьшения размытияРадиус на 1 каждый раз, установите fps на что-то, что setInterval может обрабатывать и манипулировать величиной уменьшения радиуса размытия в каждом кадре. 

var fps = 30;
var blur = 100;
var blurTime = 0.5; // seconds
var interval = 1000 / fps; 
var step = blur/ (fps * blurTime);

var anim = setInterval(function(){
    blur-= step;
    if (blur < 0) {
        clearInterval(anim);
    }
    stackBlurImage(image, canvas, blur);
}, interval);

Редактировать 3: просто для удовольствияиз этого, с помощью файлового API HTML5, вы можете загрузить свое собственное изображение для размытия: http://jsfiddle.net/nwellcome/27QUM/12/

...