When working inside Animate CC in HTML5 canvas, effects like blur aren't updated when compiling. A warning states that
"Filters are very expensive and are not updated once applied".
Since the effect only applies to a small bitmap and is for local use only, I don't really care if it puts a load on the CPU/GPU - I need to animate the effect. No bitmap caching has been applied.
Is there any way of forcing Animate CC to make the project update on every frame?
Yes, applying Filters or color effects on any Movieclip requires Cache as Bitmap to be applied to the Symbols in CreateJS. This causes such Movieclips to become static. If there is some animation inside such a Movieclip, you'll need to update the cache at every frame to play the animation correctly along with the desired filter/color effect.
You can add a code snippet like this inside such Movieclips:
if(!this.executed) {
this.on("tick", function() {if(this.cacheID)this.updateCache();});
this.executed = true;
}
PS: It does have a performance impact so avoid this for heavy usages.
Related
I'm trying to create a character with skeleton animation in Blender to bring into Spark AR Studio. In Spark I want to use the baked animation. The .fbx brings the model and skeleton into Spark's scene just fine, until a new animation controller is selected via the object's inspector window and the animation is selected for use.
At that point, the Empty object named "Armature" is scaled to 100 instead of 1 and cannot be changed.
As a workaround, the Skeleton child object named "skeleton" can be scaled to 0.01. In Blender, I tried changing the scene's units and made sure the object's scales were all applied. Nothing is scaled to 100, everything is scaled to 1.
Since the object from the .fbx imports into Spark with correct scaling, I expect the animation to maintain that, but once the animation is selected the scale jumps from 1 to 100.
Put you animated object inside some nullObject and then scale down not animated but nullObject. Hope it is clear.
When we use react-native-reanimated to animate properties like translateX, scale or opacity, react-native-reanimated runs the animation on the "native" UI thread. These properties don't affect the layout engine, so we can complete the layout on the Main Thread (JS), pass the values over the bridge to the UI thread, and then animate the stuff without involvement of the layout engine.
However, when properties like height, padding or margin are animated, this is not so clear. These properties affect the layout, and we need to update the layout when the properties change. But the layout is done by the Main Thread in Javascript. If the layout engine had to be active at every frame, because the height or the padding has changed, it would surely hit performance hard.
And indeed, I'm currently having massive performance problems when animating padding. The profiler tells me that the performance problems come from the bridge. It seems that the UI thread calls back to Javascript every frame, maybe to get the layout updated by the Main Thread, and then the layout gets passed over the bridge again to native.
However, react-native-reanimated offers the example widthandheight/index.js, which clearly animates properties like width, height and fontSize that have an effect on the layout. This example runs smoothly at 60fps.
How does react-native-reanimated handle animations which have an effect on the layout? Is there a layout process at the start and at the end of the animation, and in between it's only UI thread (this sounds like the experimental Transitions feature, but I'm not talking about Transitions). Is there some special recipe to be followed in order to get good performance?
EDIT: In the meantime, I have learned that some of these assumptions are false. The React Native layout is not done on the Javascript thread, but on the native UI thread. So, in principle, there should not be calls over the bridge when animating padding, width and margin. My performance problems maybe stem from the fact that my layout is too complex to be updated at 60 fps.
I'm using Animate CC 2015 and publishing to Canvas.
Can anyone tell me how to apply a tint to an object on my timeline?
The object has been placed there manually and has an instance name. I simply want to change it from white to red using code that runs in the first frame.
On a related note, do you know of a good JS language reference for Animate CC? I always seem to end up on Actionscript references or the CreateJS site which doesn't cater well for stuff that is created manually on the timeline.
Cheers
Have you applied a tint already in Animate? Filters in Canvas are particularly expensive, so by default, Animate will cache items that have filters applied. You have a few options:
Every frame, cache the symbol again. This can be very expensive, but it will work.
Instead of transitioning a single filter, cross-fade between a filtered and non-filtered object. This looks very similar (especially with a tint), and has no performance concerns.
As for JavaScript reference, what exactly are you looking for? Mozilla's MDN reference tends to be the goto place for our team when it comes to raw JavaScript. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Cheers.
Can someone provide an example of how to progressively blur a SKSpriteNode's image using Apple's Sprite Kit? For instance, let's say the user touches a button on the screen which will then trigger the background to slowly (i.e. progressively) blur until it reaches a specific threshold. Ideally, I would like to reverse the process too (e.g. allow the user to unblur the image by touching the same button).
There are two possible paths to take on this, both use SKEffectNodes
SKEffectNodes allow you to apply CI Filters to a node.
There is a CI Filter for Gaussian Blur. So Create a SKEffectNode, and assign it a blur filter, then add the button as a child.
How do you animate it?
Use SKAction to create a custom action, and change the parameters of filter, however, this can be slow and doesn't always give the 'progressive' blur effect you might expect, so what I do is this:
I create a filter and SKEffectNode like described above, then I render the result to a Texture, using SKView.textureForNode. I then add the resulting texture to an array, after that I loop this, continuinng to apply the blur effect on top of the previous image created, until I have a set number of frames. Then use the textures created to make an animation with SKAction.animateWithTextures. In my experience, this comes out very nicely.
I'd like to convert a Javascript carousel to work smoothly on the iOS devices iPad and iPhone, and Android devices which use webkit that is able to take advantage of hardware acceleration of CSS transforms.
Is there already a library or some snippets of code that would allow position and size setting?
I found jquery.animate-enhanced which may be close but it requires animations, and also does feature detection - I want to do something simpler, it looks significantly more complex than that.
There are several complexities I suspect the solution needs to address:
-Simple reuse of code to use either top / left CSS attributes or CSS transforms with translation (and any recalculation needed to convert them)
-Using the scale transform instead of setting width and height
Setup steps like:
-Setting -webkit-transform-style to preserve-3d
-Setting -webkit-transform-origin if needed (and what to?)
I see Zepto in the tags, so it seems like you've considered it and it didn't work? Zepto does use CSS3 for its animations.
I would try something like this as a first guess. You'll need to do your feature detection outside of the 'animateLeft' method because the animation apis are different between jquery and zepto.
Maybe something like this (psuedocode):
isTouchy = Modernizr.touch
var slideRight = function() {
if (isTouchy) {
Zepto('#carosel').animate(...)
} else {
jQuery('#carosel').slideRight() //sorry, don't know the api
}
}
http://zeptojs.com/#animate
http://modernizr.com/