5 Replies Latest reply on Nov 11, 2017 8:48 AM by Colin Holgate

    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

        • 1. Re: Shake/Jitter issues when scaling background image - bitmap
          Nipun Asthana Adobe Employee

          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.

          • 2. Re: Shake/Jitter issues when scaling background image - bitmap
            chrish20073666 Level 1

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

            • 3. Re: Shake/Jitter issues when scaling background image - bitmap
              ClayUUID Adobe Community Professional

              He's saying don't use custom eases.

              • 4. Re: Shake/Jitter issues when scaling background image - bitmap
                chrish20073666 Level 1

                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...

                • 5. Re: Shake/Jitter issues when scaling background image - bitmap
                  Colin Holgate MVP & Adobe Community Professional

                  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.Ea se.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,scal eX: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,sc aleY: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({sc aleX: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:18 1.9},0).wait(1).to({scaleX:0.58,scaleY:0.58,x:190.3,y:180.4},0).wait(1).to({scaleX:0.54,sc aleY: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({scal eX: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,scal eY: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:18 9.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:17 1.1},0).wait(1).to({scaleX:0.34,scaleY:0.34,x:175.7,y:169.8},0).wait(1).to({scaleX:0.31,sc aleY: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.3 1,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).wa it(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,sc aleY: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));

                  1 person found this helpful