TweenLite on ios Speed Issue

[RP520]

I have been searching google and these forums and just can't seem to find the answer I need.

 

I am using TweenLite for the first time on an Air for Ios project, and am getting a weird problem. I have multiple TweenLite.to calls with delay so that they happen in sequence when you click a button on the screen.

 

The first time you press the button the animation runs very slowly, the next and every subsequent time you press the button the animation runs at the correct speed. Is there something I need to set on initialization of the project in order to get that correct speed on the initial click?

 

It seems that once the animation has played something has been done to the movieclips involved which allows the animation to go quickly the next time it happens. Thanks for any help you can provide.

[RP520]

Here is the code I have in my project, incase that helps someone.

 

OverwriteManager.init(OverwriteManager.AUTO);
TweenPlugin.activate([TintPlugin]);
TweenPlugin.activate([AutoAlphaPlugin]);
TweenPlugin.activate([ColorTransformPlugin]);
var btnArray:Array = new Array(home_1, home_2, home_3)
for each(var i:MovieClip in btnArray)
{
i.x0 = i.x;
i.addEventListener(MouseEvent.CLICK, onTap)
}
reset();
function onTap(e:*):void
{
console.appendText("TAPPED\n")
var mc:MovieClip = MovieClip(e.currentTarget)
addChild(mc)
TweenLite.to(mc, 6, { useFrames:true, scaleX: 0.95, scaleY: 0.95, tint: 0xffffff, ease:Sine.easeOut});	//60
TweenLite.to(mc, 18, { useFrames:true, delay:6, scaleX: 1, scaleY: 1, tint: null, ease:Sine.easeOut});		//78
TweenLite.to(mc, 18, { useFrames:true, delay:36, scaleX: 1.1, scaleY: 1.1, ease:Sine.easeOut});

TweenLite.to(home_1, 18, { useFrames:true, delay:36, x:home_2.x0, ease:Sine.easeOut});
TweenLite.to(home_2, 18, { useFrames:true, delay:36, x:home_2.x0, ease:Sine.easeOut});
TweenLite.to(home_3, 18, { useFrames:true, delay:36, x:home_2.x0, ease:Sine.easeOut});
for each(var i:MovieClip in btnArray)
{
	if(i != mc)
	{
		TweenLite.to(i, 18, { useFrames:true, delay:36, scaleX: 0.95, scaleY: 0.95, autoAlpha: 0, x:home_2.x0, ease:Sine.easeOut});
	}
}
TweenLite.to(mc, 6, { useFrames:true, delay:54, tint: 0xffffff, ease:Sine.easeOut});	//60
TweenLite.to(mc, 8, { useFrames:true, delay:60, autoAlpha: 0, ease:Sine.easeOut, onComplete:reset});	//60
}
function reset():void
{
trace('reset')
TweenLite.to(home_1, 0, {scaleX: 1, scaleY: 1, autoAlpha: 1, x:home_1.x0, tint: null});
TweenLite.to(home_2, 0, {scaleX: 1, scaleY: 1, autoAlpha: 1, x:home_2.x0, tint: null});
TweenLite.to(home_3, 0, {scaleX: 1, scaleY: 1, autoAlpha: 1, x:home_3.x0, tint: null});
}

[ivzb]

I'm having the same problem, have you figured out how to solve it?

The first time I open my app on my iPhone and touch the screen, the first TweenLite annimation runs very slow (and sometimes it doesn't work at all). After the first one, everything's normal.

[GreenSock]

Can you provide a little more info?

 

1) Does this happen only for tweens that have useFrames:true?

 

2) does it have to do with a bunch of startup routines that your app has to go through initially, thus slowing the frame rate and making it appear as though the tween isn't working right but it's actually a CPU drain on your app's startup? Maybe try putting a delay on your first tween(s) and see if they work much better that way (giving your other startup routines room to sap the CPU)

 

3) Does the tween really not work AT ALL sometimes? Like it never reaches the end values or fires its onComplete? Or were you just saying that it doesn't do the inbetween values?

 

4) Have you tried v12 of the platform? Same results? http://www.greensock.com/v12/

[ivzb]

Can you provide a little more info?

 

1) Does this happen only for tweens that have useFrames:true?

 

2) does it have to do with a bunch of startup routines that your app has to go through initially, thus slowing the frame rate and making it appear as though the tween isn't working right but it's actually a CPU drain on your app's startup? Maybe try putting a delay on your first tween(s) and see if they work much better that way (giving your other startup routines room to sap the CPU)

 

3) Does the tween really not work AT ALL sometimes? Like it never reaches the end values or fires its onComplete? Or were you just saying that it doesn't do the inbetween values?

 

4) Have you tried v12 of the platform? Same results? http://www.greensock.com/v12/

 

1) You mean like setting a delay? I'm not using this on my tween;

2) I thought it could have something to do with this, but I did a test and it's still slow. "test" and "testTwo" are two MC that contains one jpg picture each:

 

import flash.events.MouseEvent;
import flash.display.Sprite;
import com.greensock.*;
import com.greensock.easing.*;
var test:Teste = new Teste();
test.cacheAsBitmap = true;
var testTwo:TesteDois = new TesteDois();
testTwo.cacheAsBitmap = true;
var holder:Sprite = new Sprite();
holder.cacheAsBitmap = true;
holder.addChild(test);
stage.addChild(holder);
test.addEventListener(MouseEvent.CLICK, swapPicture);
function swapPicture(e:MouseEvent):void {
holder.addChild(testTwo);
testTwo.x=320;

TweenLite.to(holder, 0.5, {x:-320, ease:Quad.easeIn});

testTwo.addEventListener(MouseEvent.CLICK, swapPictureTwo);
}
function swapPictureTwo(e:MouseEvent):void {
TweenLite.to(holder, 0.5, {x:0, ease:Quad.easeOut});
testTwo.removeEventListener(MouseEvent.CLICK, swapPictureTwo);
}

 

3)Specially the first Tween doesn't work properly. On my iPad, the following ones work great, but on my iPhone 4S it's too slow and none of them work. Some settings that I thought it could have something to do with it:

- FPS: 30

- Stage Size: 320 x 480

- Images were resized to fit the stage

- Publish settings: Rendering (Auto), Resolution (Standard).

 

 

This is my first iOS application, so thanks for the help!

[ivzb]

Is it better to dispatch three TweenLite events at the same time (for three different MovieClips) or is it better to add all of them to a holder (Sprite) and use just one TweenLite.to?

[GreenSock]

It is pretty tough to troubleshoot blind, but here are a few more thoughts/comments:

 

1) Your tweens had useFrames:true but it sounded like you weren't familiar with what that meant - is that true? I wonder if maybe you're trying to tween in seconds but accidentally setting it to use frames which would cause your tweens to run 30 times faster than you intended, thus possibly appearing as though they're "broken" when they're not. For example, did you realize that the following tween would run only take about 0.2 seconds to animate?: TweenLite.to(mc, 6, { useFrames:true, scaleX: 0.95, scaleY: 0.95, tint: 0xffffff, ease:Sine.easeOut});

 

2) Are you using very large images/sprites or complex vectors? If so, it may simply be too much for the processor to handle (which has nothing to do with the tweening platform).

 

3) You still didn't answer my question about what exactly you mean by "the tween doesn't work properly" - does NOTHING happen? Does it just jump to the end value(s)? Do your onComplete functions get triggered?

 

4) You still didn't answer my question about what version of the platform you're using and if you've tried v12.

 

To answer your question about wrapping things in a Sprite, I doubt you'd ever notice a difference performance-wise, but technically it probably is more efficient to just wrap your 3 objects in a Sprite and tween that instead of tweening each one independently with its own tween.

[ivzb]

It is pretty tough to troubleshoot blind, but here are a few more thoughts/comments:

 

1) Your tweens had useFrames:true but it sounded like you weren't familiar with what that meant - is that true? I wonder if maybe you're trying to tween in seconds but accidentally setting it to use frames which would cause your tweens to run 30 times faster than you intended, thus possibly appearing as though they're "broken" when they're not. For example, did you realize that the following tween would run only take about 0.2 seconds to animate?: TweenLite.to(mc, 6, { useFrames:true, scaleX: 0.95, scaleY: 0.95, tint: 0xffffff, ease:Sine.easeOut});

 

2) Are you using very large images/sprites or complex vectors? If so, it may simply be too much for the processor to handle (which has nothing to do with the tweening platform).

 

3) You still didn't answer my question about what exactly you mean by "the tween doesn't work properly" - does NOTHING happen? Does it just jump to the end value(s)? Do your onComplete functions get triggered?

 

4) You still didn't answer my question about what version of the platform you're using and if you've tried v12.

 

To answer your question about wrapping things in a Sprite, I doubt you'd ever notice a difference performance-wise, but technically it probably is more efficient to just wrap your 3 objects in a Sprite and tween that instead of tweening each one independently with its own tween.

 

1) Yeah, I wasn't sure what that meant... how can I make sure it's set to seconds, and not frames? If I simply do not declare "useFrames:true", is it going to tween in seconds? Is there a difference in performance related to this?

 

2) Not really... everything is 640x920px or smaller, since it's going on an iPhone app.

 

3) Sorry... it was working pretty irregularly (the onComplete function was trigged, and sometimes it jumped to the end value), but I fixed some bugs and it's really better now. The only problem continues to be the first time I touch the test MC after opening the app: the tween jumps to the end value, triggers the onComplete function but the tween looks buggy in a user perspective.

 

4) I'm using TweenLite 11.63. I haven't tried v12.

 

thanks!

[GreenSock]

1) Right, just omit useFrames:true. The default timing mode is seconds-based. In terms of CPU load, both timing modes are identical, but behavior can be quite different. In seconds-mode, timing is prioritized, so if you define a duration of 2 seconds, it will basically always make sure that the tween completes in that amount of time. On the other hand, useFrames will prioritize that a specific number of frames get rendered. So if the CPU gets bogged down in the middle of a 30-frame tween, for example, the tween will take longer to complete (everything...slows...down...). Most developers (me included) much prefer a seconds-based approach which is why it's the default.

 

2) It doesn't matter if each image is only 640x920 - you can still totally bog down the CPU if you have a bunch of those images spread out on the screen (even areas off the edge of the screen). Are you using a lot of images?

[ivzb]

These are the graphic elements that are simultaneously present on my app:

1) Status bar. 640x128px, .png with shadow effect (made in Photoshop and imported, not in Flash);

2) Background: 640x720px, bitmap;

3) Buttons bar: 640x78px, bitmap.

 

What could possibly explain the delay on the first tween (as soon as I open the app)?

[ivzb]

I've realized that my app gets slow if I populate my onComplete function, like this:

 

tweenHolder.addChild(infoView);
infoView.y = 640;

TweenLite.to(tweenHolder, 0.5, {x:-640, ease:Quad.easeOut, onComplete:function():void
  {
   buttonsBar.infoButton.gotoAndPlay("up");
  removeButtonEvents();
  tweenHolder.removeChild(mainView);
  tweenHolder.removeChild(buttonsBar);

  if (tweenHolder.contains(mentionsView)) {
   tweenHolder.removeChild(mentionsView);
  }
  if (tweenHolder.contains(outrosView)) {
   tweenHolder.removeChild(outrosView);
  }

  }});

 

(tweenHolder is a Sprite present on stage that contains two MCs). basically this tween pushes the current window of the app to the left and brings another one to the stage. This new view of the app will have code, such as event listeners, so I was deleting the other views of the app to free memory. Is the onComplete() function the ideal place to do this?

 

Again, thanks for the help.

[GreenSock]

Anonymous functions are generally frowned upon in Flash as they've been known to cause garbage collection issues. So I'd recommend not using them. Use a named function instead.

 

TweenLite.to(mc, 1, {onComplete:myFunction});
function myFunction() {
   ...
}

 

It is very difficult to know exactly what is causing the initial slowdown in your app, but I doubt it's directly related to the tweening engine. Maybe you've just got a lot on that first frame and your app takes a little time to instantiate and be ready to run smoothly. Try adding a delay to your initial tween(s) to see if that helps maybe.