I am trying to animate a rectangle after I have rotated it with CGAffineTransform. The issue I am having is that the rectangle ends up where it is suppose to be, but the "starting" position for the second transform is not what I expect. This is only an issue because I am animating it. Here is my code below:
UIView.animate(withDuration: 5) {
let shift = 200 * CGFloat(2.0.squareRoot() / 2)
view.transform = view.transform.translatedBy(x: shift, y: 0)
}
view is already defined elsewhere and I have already rotated the view with this:
let rotation = CGAffineTransform(rotationAngle: (45/180)*CGFloat(M_PI))
view.transform = rotation
Before the animation, this is what it looks like: 1
For some reason, the transformation starts above (a little offscreen) and then moves down into position. 2
I would like this to happen instead, where it starts from the original picture, and then shifts in the direction of how its rotated. 3
Note I did try to apply the same shift value to both x and y for the translation but that did not fix my issue.
Related
I am expanding/reducing an image perfectly using CGAffineTransform, BUT it changes around the centre points of the image. I want to keep it fixed/anchored to the baseline? Is this possible? The image is displayed in a UIImageView.
UIView.animate(withDuration: 0.0, animations: {
// Sunrise
let multiplierSunrise = CGFloat(self.sunriseTime/self.sunriseMax)
var transformSunrise = CGAffineTransform.identity
transformSunrise = transformSunrise.translatedBy(x: 0, y: (self.imageHeight*(1-(multiplierSunrise/2))-(self.imageHeight/2)))
transformSunrise = transformSunrise.scaledBy(x: 1, y: 1*multiplierSunrise )
self.sunriseView.transform = transformSunrise
})
Transforms are applied around the view's layer's anchor point. This is the layer's bounds center by default, but you can move it, describing the desired anchor point in percentage terms. So if you want the transform to be applied around the bottom of the view, you could say:
self.sunriseView.layer.anchorPoint = CGPoint(x:0.5, y:1)
However, when you say that, the view itself will move! To prevent that, also move the view's center to compensate:
self.sunriseView.center.y += self.sunriseView.bounds.height/2
self.sunriseView.layer.anchorPoint = CGPoint(x:0.5, y:1)
Here's an example where, having done that, I proceed to apply a y-axis scale transform. As you can see, we are holding the bottom steady:
I know that whenever we want to apply a series of transform at once to a point, we have to specify the sequence in the opposite direction to what we want to perceive. If I want to translate(T) and then rotate(R) a point x we need to end with a concatenation matrix RT, then every point is transformed as (RT)x.
Apple Transform documentation shows that CGAffineTransform work as a transpose version of the above expression. i.e instead of transform a points as Ax for A being any transform matrix they do it as xB for B being the transpose of A.
Also CGAffineTransform.concatenating(T2) documentation state that it stack transforms to the right, ending in an transform matrix of the form as T1 * T2.
Now what are my concerns? If want a series of transformation that translate(T) and then rotate(R), I can call T.concatenating(R) which result in a transform TR, then the points are transformed as xTR, it seem that the order must be respected, but actually I'm getting the wrong result(at least that's what i think), I expect the image A but getting B,
It seem that they are transforming points as TRx, but this contradict the documentation and also not match the result when you apply the transform TR to a point as CGPoint.applying(TR) which also is consistent with the order xTR.
why's that? there's something that I'm missing about how transforms works in iOS?
It's hard to see what the question is here, because you've already answered it. Basically, the order you must use when calling concatenating is the opposite of the order you would use when chaining transformations. Thus for example:
v2.transform =
CGAffineTransform(rotationAngle: 45 * .pi/180).translatedBy(x: 100, y: 0)
In this screen shot, v2 is the green view, and started out where the purple view is:
If you wanted to do that with concatenating, you'd say:
let r = CGAffineTransform(rotationAngle: 45 * .pi/180)
let t = CGAffineTransform(translationX:100, y:0)
v2.transform = t.concatenating(r) // not r.concatenating(t)
If I'm not mistaken, your confusion lies not with order of operations, but with the rotate transformation. Rotation does not take place about the object's center, but about the origin of the frame, which remains fixed in place. When you rotate an object not centered at the frame's origin, it pivots around like the end of the hand of a clock. To achieve image A, you must
Translate your object so that the point you wish to rotate it about (presumably its center) lies at the origin.
Rotate the object.
Translate it to the desired position.
let rotationAngle = CGFloat.pi / 4
let slidingLength : CGFloat = 50
let duration = 0.3
UIView.animate(withDuration: duration) { [weak self] in
self?.slidingView.transform = CGAffineTransform(rotationAngle: rotationAngle)
self?.slidingView.center.x += slidingLength
}
Before writing this question, I've
had experience with Affine transforms for views
read the Transforms documentation in the Quartz 2D Programming Guide
seen this detailed CALayer tutorial
downloaded and run the LayerPlayer project from Github
However, I'm still having trouble understanding how to do basic transforms on a layer. Finding explanations and simple examples for translate, rotate and scale has been difficult.
Today I finally decided to sit down, make a test project, and figure them out. My answer is below.
Notes:
I only do Swift, but if someone else wants to add the Objective-C code, be my guest.
At this point I am only concerned with understanding 2D transforms.
Basics
There are a number of different transforms you can do on a layer, but the basic ones are
translate (move)
scale
rotate
To do transforms on a CALayer, you set the layer's transform property to a CATransform3D type. For example, to translate a layer, you would do something like this:
myLayer.transform = CATransform3DMakeTranslation(20, 30, 0)
The word Make is used in the name for creating the initial transform: CATransform3DMakeTranslation. Subsequent transforms that are applied omit the Make. See, for example, this rotation followed by a translation:
let rotation = CATransform3DMakeRotation(CGFloat.pi * 30.0 / 180.0, 20, 20, 0)
myLayer.transform = CATransform3DTranslate(rotation, 20, 30, 0)
Now that we have the basis of how to make a transform, let's look at some examples of how to do each one. First, though, I'll show how I set up the project in case you want to play around with it, too.
Setup
For the following examples I set up a Single View Application and added a UIView with a light blue background to the storyboard. I hooked up the view to the view controller with the following code:
import UIKit
class ViewController: UIViewController {
var myLayer = CATextLayer()
#IBOutlet weak var myView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// setup the sublayer
addSubLayer()
// do the transform
transformExample()
}
func addSubLayer() {
myLayer.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
myLayer.backgroundColor = UIColor.blue.cgColor
myLayer.string = "Hello"
myView.layer.addSublayer(myLayer)
}
//******** Replace this function with the examples below ********
func transformExample() {
// add transform code here ...
}
}
There are many different kinds of CALayer, but I chose to use CATextLayer so that the transforms will be more clear visually.
Translate
The translation transform moves the layer. The basic syntax is
CATransform3DMakeTranslation(_ tx: CGFloat, _ ty: CGFloat, _ tz: CGFloat)
where tx is the change in the x coordinates, ty is the change in y, and tz is the change in z.
Example
In iOS the origin of the coordinate system is in the top left, so if we wanted to move the layer 90 points to the right and 50 points down, we would do the following:
myLayer.transform = CATransform3DMakeTranslation(90, 50, 0)
Notes
Remember that you can paste this into the transformExample() method in the project code above.
Since we are just going to deal with two dimensions here, tz is set to 0.
The red line in the image above goes from the center of the original location to the center of the new location. That's because transforms are done in relation to the anchor point and the anchor point by default is in the center of the layer.
Scale
The scale transform stretches or squishes the layer. The basic syntax is
CATransform3DMakeScale(_ sx: CGFloat, _ sy: CGFloat, _ sz: CGFloat)
where sx, sy, and sz are the numbers by which to scale (multiply) the x, y, and z coordinates respectively.
Example
If we wanted to half the width and triple the height, we would do the following
myLayer.transform = CATransform3DMakeScale(0.5, 3.0, 1.0)
Notes
Since we are only working in two dimensions, we just multiply the z coordinates by 1.0 to leave them unaffected.
The red dot in the image above represents the anchor point. Notice how the scaling is done in relation to the anchor point. That is, everything is either stretched toward or away from the anchor point.
Rotate
The rotation transform rotates the layer around the anchor point (the center of the layer by default). The basic syntax is
CATransform3DMakeRotation(_ angle: CGFloat, _ x: CGFloat, _ y: CGFloat, _ z: CGFloat)
where angle is the angle in radians that the layer should be rotated and x, y, and z are the axes about which to rotate. Setting an axis to 0 cancels a rotation around that particular axis.
Example
If we wanted to rotate a layer clockwise 30 degrees, we would do the following:
let degrees = 30.0
let radians = CGFloat(degrees * Double.pi / 180)
myLayer.transform = CATransform3DMakeRotation(radians, 0.0, 0.0, 1.0)
Notes
Since we are working in two dimentions, we only want the xy plane to be rotated around the z axis. Thus we set x and y to 0.0 and set z to 1.0.
This rotated the layer in a clockwise direction. We could have rotated counterclockwise by setting z to -1.0.
The red dot shows where the anchor point is. The rotation is done around the anchor point.
Multiple transforms
In order to combine multiple transforms we could use concatination like this
CATransform3DConcat(_ a: CATransform3D, _ b: CATransform3D)
However, we will just do one after another. The first transform will use the Make in its name. The following transforms will not use Make, but they will take the previous transform as a parameter.
Example
This time we combine all three of the previous transforms.
let degrees = 30.0
let radians = CGFloat(degrees * Double.pi / 180)
// translate
var transform = CATransform3DMakeTranslation(90, 50, 0)
// rotate
transform = CATransform3DRotate(transform, radians, 0.0, 0.0, 1.0)
// scale
transform = CATransform3DScale(transform, 0.5, 3.0, 1.0)
// apply the transforms
myLayer.transform = transform
Notes
The order that the transforms are done in matters.
Everything was done in relation to the anchor point (red dot).
A Note about Anchor Point and Position
We did all our transforms above without changing the anchor point. Sometimes it is necessary to change it, though, like if you want to rotate around some other point besides the center. However, this can be a little tricky.
The anchor point and position are both at the same place. The anchor point is expressed as a unit of the layer's coordinate system (default is 0.5, 0.5) and the position is expressed in the superlayer's coordinate system. They can be set like this
myLayer.anchorPoint = CGPoint(x: 0.0, y: 1.0)
myLayer.position = CGPoint(x: 50, y: 50)
If you only set the anchor point without changing the position, then the frame changes so that the position will be in the right spot. Or more precisely, the frame is recalculated based on the new anchor point and old position. This usually gives unexpected results. The following two articles have an excellent discussion of this.
About the anchorPoint
Translate rotate translate?
See also
Border, rounded corners, and shadow on a CALayer
Using a border with a Bezier path for a layer
I'm trying to make a game where the sprite will always move to the right when hit by an object. However since the Sprite rotates constantly and the zero radians rotates with the Sprite causes my calculated magnitude to go the opposite direction if the sprite is facing left and hits the object. Is there a way to keep the direction of the magnitude always pointing to the right even if the zero is facing left?
// referencePoint = upper right corner of the frame
let rightTriangleFinalPoint:CGPoint = CGPoint(x: referencePoint.x, y: theSprite.position.y)
let theSpriteToReferenceDistance = distanceBetweenCGPoints(theSprite.position, b: referencePoint)
let theSpriteToFinalPointDistance = distanceBetweenCGPoints(theSprite.position, b: rightTriangleFinalPoint)
let arcCosineValue = theSpriteToFinalPointDistance / theSpriteToReferenceDistance
let angle = Double(acos(arcCosineValue))
let xMagnitude = magnitude * cos(angle)
let yMagnitude = (magnitude * sin(angle)) / 1.5
Not sure if this works for you:
I would use an orientation constraint to rotate the sprite. The movement can be done independent from the orientation in that case.
I made an tutorial some time ago: http://stefansdevplayground.blogspot.de/2014/09/howto-implement-targeting-or-follow.html
So I figured out what was going on.
It seems like the angle doesn't rotate with the Sprite like I originally thought and the vector that I am making is working with the code above. THE problem that I had was that I also set the collision bit for the objects which is wrong. If I only set the contact bit for the objects against the sprite the my desired outcome comes true.
I've got the following trouble.
In my app i'm implementing flip-clock. I've got 3 CATransformLayers and can swipe them up-down and down-up. I always have two layers on top with indexes 1 at top and 0 at bottom and one layer down with index 2. So, when i flip down-up, i quickly rotate layer 0 down and transform layer 2 up, so layer 0 could already be visible.
i'm using the following code to do this :
auto CATransform3D t3d = CATransform3DIdentity;
t3d.m34 = 1.0/-500.0;
layer2.sublayerTransform = CATransform3DRotate(t3d, -angle , 1.0, 0.0, 0.0) ;
to flip layer at index 2 ( bottom layer ) up.
After this, i immedeately do the following with the layer at index 0 :
auto CATransform3D t3d = CATransform3DIdentity;
t3d.m34 = 0.0; // for make sure m34 is zero - excess code
layer0.sublayerTransform = CATransform3DRotate(t3d, M_PI , 1.0, 0.0, 0.0) ;
After all animation completed - of up-down direction - i rearrange transform sublayers to make this action more and more times :
[container.layer insertSublayer:layer0 above:(CALayer*)[container.layer.sublayers objectAtIndex:2]] ;
Container is flip-clock's holder base view. The problem is, that when i flip one time - zero layer falls down on the back view normally. After second flip - it's all right too. But after third flip - the layer, that was flipped the very first time ( former layer 2) falls in the back scene with perspective, not looking at the fact, that i reset transformation to m34 = 0.0. What can be the reason for this?
As always, any help would be appreciated.
well, the problem was in transformation speed - i increased it to 2000 ( it was 0.5 ) and the back layer isn't visible anymore!