Shake/Jitter issues when scaling background image - bitmap

[chrish20073666]

When scaling a bitmap image on a html canvas it looks and works fine within Animate itself, as soon as it's played within a browser the motion between the two keyframes is incredibly jittery/shaky. I have had this issue with several projects i've worked on and still haven't managed to find a solid solution - Classic tweens seem to do it less, but once I add an ease they revert back to their 'jittery' ways. This only happens when scaling; key framing the position, rotation or anything else seems to work fine.

Any help would be greatly appreciated.

Chris

[UDESCO]

Can you try doing this on the latest release of Animate(2018), using the new ease presets for Classic tween.

It should give you much better results.

[chrish20073666]

I'm currently using Animate 2018 but I appreciate the suggestion!

[ClayUUID]

He's saying don't use custom eases.

[chrish20073666]

Custom eases don’t help but it still does it without any kind of ease at all Sometimes, but only when scaling. There has to be a reason why...

[Colin Holgate · Accepted solution]

Can you post an example for us to try?

A classic tween with a preset, or a classic ease with an intensity of -100 to +100, should perform equally well. If you somehow have made a change to the graph then it becomes as bad as a motion tween. You can look at the JS file to see if anything went wrong, that made it publish as a custom ease even if you didn't mean to. Here's a bounce test I did, and the JS I got:

this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleX:0.24,scaleY:0.24},80,cjs.Ease.bounceOut).wait(1));

Here is the same bounce only I moved the graph a little, and back to being exactly the same tween, you can see why it affects the performance:

this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({regX:216.6,regY:199.4,scaleX:0.99,scaleY:0.99,x:216.6,y:199.5},0).wait(1).to({scaleX:0.98,scaleY:0.98,x:216,y:199.1},0).wait(1).to({scaleX:0.97,scaleY:0.97,x:215.3,y:198.6},0).wait(1).to({scaleX:0.96,scaleY:0.96,x:214.5,y:198},0).wait(1).to({scaleX:0.95,scaleY:0.95,x:213.6,y:197.4},0).wait(1).to({scaleX:0.93,scaleY:0.93,x:212.7,y:196.7},0).wait(1).to({scaleX:0.92,scaleY:0.92,x:211.7,y:196},0).wait(1).to({scaleX:0.9,scaleY:0.9,x:210.7,y:195.2},0).wait(1).to({scaleX:0.88,scaleY:0.88,x:209.5,y:194.4},0).wait(1).to({scaleX:0.86,scaleY:0.86,x:208.4,y:193.5},0).wait(1).to({scaleX:0.84,scaleY:0.84,x:207.1,y:192.6},0).wait(1).to({scaleX:0.82,scaleY:0.82,x:205.8,y:191.7},0).wait(1).to({scaleX:0.8,scaleY:0.8,x:204.4,y:190.7},0).wait(1).to({scaleX:0.78,scaleY:0.78,x:202.9,y:189.6},0).wait(1).to({scaleX:0.75,scaleY:0.75,x:201.4,y:188.5},0).wait(1).to({scaleX:0.73,scaleY:0.73,x:199.7,y:187.3},0).wait(1).to({scaleX:0.7,scaleY:0.7,x:198,y:186},0).wait(1).to({scaleX:0.67,scaleY:0.67,x:196.2,y:184.7},0).wait(1).to({scaleX:0.64,scaleY:0.64,x:194.4,y:183.4},0).wait(1).to({scaleX:0.61,scaleY:0.61,x:192.4,y:181.9},0).wait(1).to({scaleX:0.58,scaleY:0.58,x:190.3,y:180.4},0).wait(1).to({scaleX:0.54,scaleY:0.54,x:188.2,y:178.9},0).wait(1).to({scaleX:0.51,scaleY:0.51,x:185.9,y:177.2},0).wait(1).to({scaleX:0.47,scaleY:0.47,x:183.5,y:175.5},0).wait(1).to({scaleX:0.43,scaleY:0.43,x:181,y:173.6},0).wait(1).to({scaleX:0.39,scaleY:0.39,x:178.3,y:171.7},0).wait(1).to({scaleX:0.34,scaleY:0.34,x:175.6,y:169.7},0).wait(1).to({scaleX:0.3,scaleY:0.3,x:172.6,y:167.6},0).wait(1).to({scaleX:0.25,scaleY:0.25,x:169.6,y:165.3},0).wait(1).to({scaleX:0.27,scaleY:0.27,x:170.8,y:166.2},0).wait(1).to({scaleX:0.3,scaleY:0.3,x:172.6,y:167.6},0).wait(1).to({scaleX:0.33,scaleY:0.33,x:174.5,y:168.9},0).wait(1).to({scaleX:0.36,scaleY:0.36,x:176.5,y:170.4},0).wait(1).to({scaleX:0.39,scaleY:0.39,x:178.6,y:171.9},0).wait(1).to({scaleX:0.42,scaleY:0.42,x:180.7,y:173.4},0).wait(1).to({scaleX:0.46,scaleY:0.46,x:182.8,y:175},0).wait(1).to({scaleX:0.49,scaleY:0.49,x:184.8,y:176.4},0).wait(1).to({scaleX:0.52,scaleY:0.52,x:186.6,y:177.7},0).wait(1).to({scaleX:0.54,scaleY:0.54,x:188.2,y:178.9},0).wait(1).to({scaleX:0.56,scaleY:0.56,x:189.4,y:179.7},0).wait(1).to({scaleX:0.57,scaleY:0.57,x:190.2,y:180.3},0).wait(1).to({scaleX:0.58,scaleY:0.58,x:190.7,y:180.7},0).wait(1).to({scaleX:0.58,scaleY:0.58,x:190.8,y:180.8},0).wait(1).to({scaleX:0.58,scaleY:0.58,x:190.6,y:180.6},0).wait(1).to({scaleX:0.57,scaleY:0.57,x:190.1,y:180.2},0).wait(1).to({scaleX:0.56,scaleY:0.56,x:189.3,y:179.7},0).wait(1).to({scaleX:0.54,scaleY:0.54,x:188.3,y:179},0).wait(1).to({scaleX:0.53,scaleY:0.53,x:187.2,y:178.1},0).wait(1).to({scaleX:0.51,scaleY:0.51,x:185.8,y:177.2},0).wait(1).to({scaleX:0.48,scaleY:0.48,x:184.4,y:176.1},0).wait(1).to({scaleX:0.46,scaleY:0.46,x:182.8,y:175},0).wait(1).to({scaleX:0.43,scaleY:0.43,x:181.1,y:173.7},0).wait(1).to({scaleX:0.4,scaleY:0.4,x:179.4,y:172.5},0).wait(1).to({scaleX:0.37,scaleY:0.37,x:177.6,y:171.1},0).wait(1).to({scaleX:0.34,scaleY:0.34,x:175.7,y:169.8},0).wait(1).to({scaleX:0.31,scaleY:0.31,x:173.7,y:168.3},0).wait(1).to({scaleX:0.28,scaleY:0.28,x:171.7,y:166.9},0).wait(1).to({scaleX:0.25,scaleY:0.25,x:169.7,y:165.4},0).wait(1).to({scaleX:0.25,scaleY:0.25,x:170,y:165.6},0).wait(1).to({scaleX:0.27,scaleY:0.27,x:170.9,y:166.3},0).wait(1).to({scaleX:0.28,scaleY:0.28,x:171.9,y:167},0).wait(1).to({scaleX:0.3,scaleY:0.3,x:172.7,y:167.6},0).wait(1).to({scaleX:0.31,scaleY:0.31,x:173.3,y:168},0).wait(1).to({scaleX:0.31,scaleY:0.31,x:173.7,y:168.3},0).wait(1).to({scaleX:0.31,scaleY:0.31,y:168.4},0).wait(1).to({scaleX:0.31,scaleY:0.31,x:173.5,y:168.2},0).wait(1).to({scaleX:0.3,scaleY:0.3,x:173.1,y:167.9},0).wait(1).to({scaleX:0.3,scaleY:0.3,x:172.6,y:167.5},0).wait(1).to({scaleX:0.28,scaleY:0.28,x:172,y:167.1},0).wait(1).to({scaleX:0.27,scaleY:0.27,x:171.3,y:166.6},0).wait(1).to({scaleX:0.26,scaleY:0.26,x:170.6,y:166},0).wait(1).to({scaleX:0.25,scaleY:0.25,x:169.8,y:165.5},0).wait(1).to({scaleX:0.24,scaleY:0.24,x:169.4,y:165.2},0).wait(1).to({scaleX:0.25,scaleY:0.25,x:169.9,y:165.6},0).wait(1).to({scaleX:0.26,scaleY:0.26,x:170.3,y:165.9},0).wait(1).to({scaleX:0.26,scaleY:0.26,x:170.5,y:166},0).wait(1).to({scaleX:0.26,scaleY:0.26,x:170.4,y:165.9},0).wait(1).to({scaleX:0.25,scaleY:0.25,x:170,y:165.7},0).wait(1).to({scaleX:0.25,scaleY:0.25,x:169.7,y:165.4},0).wait(1).to({regX:153.5,regY:153.5,scaleX:0.24,scaleY:0.24,x:154,y:154},0).wait(1));