transform parent and child leads to flicker
Maybe some guy form Appcelerator could help me with this?
I'm trying to set the transform of some views based on the touchmove coordinates.
When I do this with two views one included in the other, the child flickers.
Anyway it can be solved this?
On the iOs.
14 Answers
-
I am doing the same basic thing in iOS with several views within the main view and am not seeing a flicker. Can you post a little code that shows the creation of the views and the touchmove?
-
Hi John.
The idea is that I need to apply a transform to each view( the main view and the sub-view as well).
Here is the code.http://pastie.org/1263792
As you see nothing fancy, an image inside a scrollview( I need it for clipping ) . dragging on the yellow are should rotate the views. You will see the moto flickering.
Thnaks -
Are you seeing the flicker on the device or in the simulator? What version of the mobile SDK are you using? I tried your code in 1.5.0 and it looks good to me and doesn't flicker.
-
Could you give me the link to 1.5 ?
I have 1.4.2_d5e0_something build from continous builds.
I see the flickers on the simulator too and it's worse on device
-
Go here
http://builds.appcelerator.com.s3.amazonaws.com/index.html
Pick "master" from the mobile builds branch.
-
Ok, I really feel stupid now :)
I'll make a test and let you know. Thanks.
-
Nope :(
It's the same.http://dev.rborn.info/flick.mov
Maybe it's not a real flicker but somehow the inside view doesn't manage to stay fixed - as it should.
Like it reacts a little slower to the transform setting. -
That's an interesting quirk. I saw that in a 1.4.2 nightly build when I was working on my code and a few weeks ago. Basically it acted like a view that owned another view lost its relationship to its parent and could be affected by transforms. When I did an update, it fixed it. If you still have problems I can try to get you access to a custom build I am working on and see if it does it too.
-
Would be great if you could do this. Thanks.
-
Hi Dan,
If you select "master" branch, the pre-QA 1.5.0 builds are shown on http://builds.appcelerator.com.s3.amazonaws.com/index.html
(apols if that's not what you were looking for)
cheers,
ChrisP.S Doh - didn't that already posted, getting late (obviously)
-
I can see the flicker now and reproduce what you see. I'm going to see if I can find out what is causing it.
-
I have made some subtle changes and posted the code here. http://pastie.org/1265211
It looks like 2 things (and maybe a third I haven't figured out yet) are happening. The first is the touch events may be happening simultaneously so one or more sets of transforms are attempting to run while others are trying to fire as well and that seems to be some of the jumping. The second is the time to create the second transform is long enough that you can see the one box move and there is a pause and the next one repositions. By putting the two transforms beside each other the effect is lessened.
It is not perfect but it is closer.
-
@John
Yes, one of the reasons could be the multiple trigger, but in my tests I dragged the mouse only in the empty window area.The other thing you said that the Os does not have the time to create the 2dmatrix lead me to create it on touchstart and only manipulate it on touchmove.
Same result.It seems like there is a pause between setting the transform to the parent and the transform of the child.
I even tried with 3Dmatrix, the same.
Any other idea?
Thanks for your effort anyway :)@Chris thnx :)
-
I have a very similar problem. A label on top of an imageView (png). on rotate the png flickers and …. sometimes after the rotation is finished it jumps back the 16 degrees for a fraction of a second and then goes back to "neutral". very strange behaviour, looks quite ugly. happens in the simulator and on the iphone 4 touch
var t = Titanium.UI.create2DMatrix(); t = t.rotate(16); var a = Titanium.UI.createAnimation(); a.transform = t; a.duration = 180; a.autoreverse = true; var b = Titanium.UI.createAnimation(); b.transform = t; b.duration = 180; b.autoreverse = true; imageView.animate(a); label.animate(b);
SDK 4.3
Titanium Developer 1.2.2