I'm having a problem with scale transformation I have to apply to UIViews on Swift (but it's the same in objective-c too)
I'm applying a CGAffineTransformMakeScale() to multiples views during a gestureRecognizer.
It's like a loop for a cards deck. I remove the one on top and the X others behind scale up and a new one is added in the back.
The first iteration works as expected. But when I try to swipe the new front one, all the cards reset to their initial frame size because i'm trying to apply a new transform, which seems to cancel the previous one and reset the view to its initial state.
How can I apply definitely/commit the first transform change to be able to apply a new one after that based on the UIView resulting new size ?
I tried a UIView.commitAnimations() but no change.
EDIT :
Here's a simple example to understand what I try to do :
Imagine I have an initial UIView of 100x100
I have a shrink factor of 0.95, which means next views behind will be 95x95, then 90.25, then 85.73, etc
If I remove the top one (100x100), I want to scale up the others, so the 95x95 will become 100x100, etc
This is done by applying the inverse of the shrink factor, here 1.052631...
First time I apply the inverse factor, all views are correctly resized.
My problem is, when I trigger again by a swipe on the new front UIView a new resize of all views (So, for example, the 90.25x90.25 which became 95x95 should now scale to 100x100).
At this moment, the same CGAffineTransformMakeScale() is apply to all views, which all instantly reset to their original frame size (so the now 95x95 reset to 90.25x90.25, and then begin to apply the transformation on this old size).
As suggested here or elsewhere, using UIView.commitAnimations() in the end of each transformation don't change anything, and using a CGAffineTransformConcat() is like powering over and over the scaling by himself and of course views become insanely big...
I hope I made myself more clear, that's not easy to explain, don't hesitate to ask if something is wrong here.
After a lot of reading and consulting colleagues who know better than me about iOS programmation, here's my conclusion :
Applying a CGAffineTransformMakeScale() only modify visually a view but not its properties, and since it's difficult (and costly) to modify afterward the bounds and/or frame of a view, I should avoid to try to make a transform, update bounds, make another transform, etc.
Applying the same CGAffineTransformMakeScale() only reset the effect and not apply to the previous one.
Applying a CGAffineTransformScale() with the same values on top of the previous CGAffineTransformMakeScale() (or with a CGAffineTransformConcat()) has some unpredictable effect and will be very difficult to calculate precisely the new values to apply each time to get the effect I want.
The best way I can go with this is only applying one CGAffineTransformMakeScale() that I will keep updating scales values all along the view's life.
It implies now for me to rework all my implementation logic in reverse, but that's the easiest way to do this right.
Thanks all for your tips.
Related
Summary, in iOS how to have a view that modifies the pixels of all the views behind it.
Say you have a view, well any views, but let's consider a collection view which happens to just be some color blocks:
Say we added a view on top, CleverView, which either just blocks that view (so, white - trivial) or even "cuts a hole" in that layer (relatively easy to do, google).
No problem so far: so here's CleverView just a white square:
But what if we want to do this:
CleverView is changing all the saturation below it,
Or perhaps this:
CleverView is changing the hue or whatever below it.
Note that in the examples it's working in a pixel-wise fashion, it's not ("just") flagging each collection view cell to change all of the cell color.
So ideally CleverView would do this to anything at all that happens to be behind it (ie, whatever bunch of views it covers or partly covers, hence the collection view example which is just 'many views).
Naturally both the underneath stuff, and the shape of CleverView, can be animating, moving, in real time.
Is there a way this could be done in iOS?
(In that specific example, what I do is just, have two of the collection views: the bottom one and the top one has the new color values. Simply with care clip the top one to achieve the effect. But obviously that's not as Clever as a view that actually "modifies the values of all the pixels behind it".)
{Note too that, obviously, you can just make basically a screen shot, munge that image, and show it; not really a great solution.}
The CALayer has a property backgroundFilters where you could normally add a CIFilter that would do the job. But, documentation states that
Special Considerations This property is not supported on layers in
iOS.
That's annoying, but that's all that we have. Probably, it's due to performance considerations.
I would suggest to look into SceneKit, there the primitives are very similar to CoreAnimation, also animatable with CAAnimation, but provide advanced tools to configure and control many more aspects of the rendering.
For example, SCNNode has filters: https://developer.apple.com/documentation/scenekit/scnnode/1407949-filters?language=objc
Here is the iPad Simulator with four nested UIViews, drawing a custom background, and an inner UILabel. I am rotating the top UIView's CALayer, by getting it's layer and setting transform with a rotateY CATransform3D, animated on a separate thread (but the changes to transform are being sent on the main thread, naturally):
Note- this animation does not loop correctly, hence it appears to bounce.
The layers do animate as a whole, but curiously, the first child and it's descendants appear to be floating above the UIView with the transform applied!
The UIViews themselves are children in another UIView, which has a red background. There are no other transformations being applied anywhere else.
The positions for each UIView were set using setFrame initially at the start.
What is causing this strange behaviour, and how can I ensure the child UIViews transform with their parent, giving a flat appearance to the surface as a whole?
Well. Perhaps unsurprisingly I was doing something silly, but since I'd not used CALayer transforms before, I didn't know if things were acting up. I had overridden layoutSubviews on the UIViews I was creating, and the act of rotating the CALayer was triggering this call and then pushing the child components frame around, due to a bug.
The problem is that CALayers don't actually do 3D perspective by default. In order to do that you need to make a minor change to the layer's transform (which is of type CATransform3D)
You want to change the .m34 field of the transform to a small negative value. Try -1/200 to -1/500 as a starting range. If I remember correctly it should be the negative of 1 over the image height/width.
Change the .m34 property of the layer that you want to appear to "come off the page" and rotate in 3D. When you do that the Z setting of the layer does matter, and will both make closer layers bigger and also make layers that are further away disappear behind other things.
I suggest you do a Google search on "CATransform3D m34" for more information. There is a fair amount of information on the net about it.
I've imported a vector layer from a psd into paint code v1, I'm trying to create a background image and make it universal.
I can't seem to add a frame around the vector, to complicate matters, I only need a portion, the center, of the layer. (The design is based around a circle, it has lines drawn towards the center of the circle.)
I can’t seem to add a frame to dynamically resize the part I need.
I found this http://www.raywenderlich.com/36341/paintcode-tutorial-dynamic-buttons the part about frame ans groups doesn't help me....
When I add a click frame and drag it around the area I need, it's at the same level as the vector layer. I've also tried adding a group around both, but that doesn't seem to obey the frame size either.
I’ve looked through the tutorials and googled adding a frame, but I can’t seem to achieve what I need.
EDIT
A frame is supposed to be at the same level as the vectors you're working with.
All you do then is set the resize rules of your vectors. There is a little rectangle in the frame's parameters interface with straight arrows and springs that you can modify to fit your wishes.
I think I also remember a checkbox setting to resize only what's inside the frame.
Now I haven't used PaintCode for a while, but if this doesn't help you, there probably is a problem with your vector layer.
I don't know if this information helps.
But if you resizing doesn't work as you expected. Look carefully at the transformation box (the one with the springs attached). When you have put a frame around your object. The middle dot in this box should be blue instead of green. if t's green, you may have a problem with the originating point of your objects and then the resizing may not work as you expected.
I'm attempting to optimize my app. It's quite visually rich, so has quite a lot of layered UIViews with large images and blending etc.
I've been experimenting with the shouldRasterize property on CALayers. In one case in particular, I have a UIView that consists of lots of sub views including a table. As part of a transition where the entire screen scrolls, this UIView also scales and rotates (using transforms).
The content of the UIView remains static, so I thought it would make sense to set view.layer.shouldRasterize = YES. However, I didn't see an increase in performance. Could it be that it's re-rasterizing every frame at the new scale and rotation? I was hoping that it would rasterize at the beginning when it has an identity transform matrix, and then cache that as it scales and rotates during the transition?
If not, is there a way I could force it to happen? Short of adding a redundant extra super-view/layer that does nothing but scale and rotate its rasterized contents...
You can answer your own question by profiling your application using the CoreAnimation instrument. Note that this one is only available in a device.
You can enable "Color hits in Green and Misses Red". If your layer remains red then it means that it is indeed rasterizing it every frame.
I have a single snowflake image that I would like to replicate and create snowfall on the screen. We can set the instanceCount to X to create a large number of snowflakes and we can set the instanceTransform to put each instance some distance from the next.
However I am not clear how to make them fall down. Does anyone understands if this class was intended to be used for something like this and if so how should it be properly done?
You apply the animation to the original sublayer.... all the replicated layers follow the same animation, adjusted by the instanceDelay and instanceTransform properties.
Hope this helps!