Skip to main content
P
productionArtistChad
Known Participant
October 3, 2017
Answered

so animating a blur doesn't work now?

  • October 3, 2017
  • 3 replies
  • 5176 views

It worked in the past i've used it many times. doesn't seem to be working now.  I just looked at an old file where it was working fine and now it isn't working at all.

http://chaddemoss.com/blur.zip

    This topic has been closed for replies.
    Correct answer ClayUUID

    Yes, animating blurs isn't supported in Canvas for performance reasons. Browsers do not natively implement blurring canvas elements, or any other filter effects, so they all have to be emulated in JavaScript, which is very slow.

    The best compromise is to use a cached version of a blurred image and then fade it in or out. Alpha compositing of bitmaps IS natively supported by the canvas element, so it's fast enough to animate.

    3 replies

    Colin Holgate
    Colin Holgate
    Inspiring
    October 4, 2017

    One way to do what you want is to select the tween and convert to keyframes. That alone won't work, because the same symbol is in the same layer, and CreateJS won't update it. If you use one layer per frame, then it works.

    C
    ClayUUID
    Legend
    October 4, 2017

    Of course, if you do that you're circumventing a protection that was put in place for a very good reason, and anyone who does so may pay the price in a jerky frame rate.

    Colin Holgate
    Colin Holgate
    Inspiring
    October 4, 2017

    Indeed, though it happens to work fine for the small graphic. Also you could trade performance for file size and convert each each frame into a bitmap.

    The cross fade idea isn't quite right in this case, because it's supposed to look like spread out letters coming together, and fading from spread out to normal wouldn't have the same effect.

    C
    ClayUUIDCorrect answer
    Legend
    October 4, 2017

    Yes, animating blurs isn't supported in Canvas for performance reasons. Browsers do not natively implement blurring canvas elements, or any other filter effects, so they all have to be emulated in JavaScript, which is very slow.

    The best compromise is to use a cached version of a blurred image and then fade it in or out. Alpha compositing of bitmaps IS natively supported by the canvas element, so it's fast enough to animate.

      R
      RandomlyFish
      Inspiring
      October 3, 2017

      Did the old file use Actionscript?

      P
      productionArtistChadAuthor
      Known Participant
      October 3, 2017

      no it was an animate html5 canvas file. maybe the blur didn't work and I just didn't notice but its not working now in the old file or this test file I just made..

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices