Understanding CGAfflineTransform in Rotation Context
I am working on several experiments to learn gestures and animations in iOS. One of them is the creation of a Tinder-like interface. I am following this tutorial: http://guti.in/articles/creating-tinder-like-animations/
I understand changing the position of an image, but I don't understand rotation. I think I have defined my problem to not understand CGAfflineTransform. Specifically, the following code:
CGFloat rotationStrength = MIN(xDistance / 320, 1);
CGFloat rotationAngle = (CGFloat) (2 * M_PI * rotationStrength / 16);
CGFloat scaleStrength = 1 - fabsf(rotationStrength) / 4;
CGFloat scale = MAX(scaleStrength, 0.93);
CGAffineTransform transform = CGAffineTransformMakeRotation(rotationAngle);
CGAffineTransform scaleTransform = CGAffineTransformScale(transform, scale, scale);
self.draggableView.transform = scaleTransform;
Where are these values and calculations like: 320, 1-fabs (strength) /4,.93, etc., outgoing? How do they contribute to eventual rotation?
On another note, Tinder appears to use a combination of scrolling and panning. Do they add swipes to the image, or do they just take panning speed into account?
source to share
There are many magic constants in this code , most of which are probably chosen because they resulted in something that "looked good". This can make it difficult to complete. It's not so much about the actual transformations as about the values used to create them.
Let's break it down, line by line, and see if that makes it clearer.
CGFloat rotationStrength = MIN(xDistance / 320, 1);
The value 320
is most likely considered device width (this was the portrait width of all iPhones until 6 and 6+ came out).
This means that it xDistance / 320
is a factor of how far along the x-axis (based on the name the xDistance)
user has dragged. This will be 0.0 when the user has not dragged any distance and 1.0 when the user has dragged 320 points.
MIN(xDistance / 320, 1)
Takes in the smallest drag distance factor and 1). This means if the user drags over 320 points (so the distance factor is greater than 1, the rotation force will never be greater than 1.0. It does not protect negative values again (if the user dragged to the left, xDistance will be a negative value, which will always be less 1. However, I'm not sure if the manual explains this (since 320 is full width, not half width.
So, the first row is a coefficient between 0 and 1 (if no negative values are present) of how many rotations should be applied.
CGFloat rotationAngle = (CGFloat) (2 * M_PI * rotationStrength / 16);
The next line calculates the actual rotation angle. The angle is in radians. Since 2π is a full circle (360 °), the rotation angle is between 0 and 1/16 of a full circle (22.5 °). The Th value was 1/16
probably chosen because it "looked good".
The two lines together mean that the view rotates more as the user moves further.
CGFloat scaleStrength = 1 - fabsf(rotationStrength) / 4;
From the name of the variable, it would look like it would calculate how much the scale should scale. But it actually calculates what scale factor should look like. Scale 1 means "normal" or unscaled size. When the rotational force is 0 (when xDistance is 0), the scale strength will be 1 (unscaled). As the force of rotation increases, approaching 1, this scale factor approaches 0.75 (from the moment when 1 - 1/4).
fabsf
is just an absolute floating point value ( fabsf(-0.3)
equals 0.3
)
CGFloat scale = MAX(scaleStrength, 0.93);
The next line calculates the actual scale factor. This is simply the largest scaleStrength and 0.93 (down to 93%). The meaning 0.93
is completely arbitrary, and probably exactly what the author found appealing.
Since the scale factor ranges from 1 to 0.75 and the scale factor is never less than 0.93, the scale factor only changes for the first third of xDistance. All scale hardness values in the next two-thirds will be less than 0.93 and therefore will not change the scale factor.
When scaleFactor and rotationAngle are calculated as above, the view is first rotated (by this angle) and then reduced (by this scale factor).
Summary
So, in short. As the gaze moves to the right (as xDistance approaches 320 points), the view rotates linearly from 0 ° to 22.5 ° compared to full drag and scales from 100% to 93% from the first third of the drag (and then stays at 93% for the rest of the drag-and-drop gestures).
source to share