IOS Core Animation Advanced techniques-Transform

On four chapters:

1. Layer Tree
2. Layer's Homestay Map
3. Layer geometry
4. Layer Visual effects

This essay mainly describes the layer transformations.

• Transform:
  • A cgaffinetransform that rotates, places, or distorts a layer can transform a flat object into a catransform3d of a three-dimensional space object.
• Affine (the parallel two lines in the layer remain parallel in the transformation's successor):
  • Cgaffinetransform property (only valid for 2D transformations)
    • For rotation, scaling, and panning in two-dimensional space

The AffineTransform property of Calayer is a Cgaffinetransform type object, UIView corresponding property is transform property
The Transform property of Calayer is a catransform3d type and not a cgaffinetransform type
The system provides the main 3 methods for creating Cgaffinetransform instance objects:

1. 1. Cgaffinetransformmakerotation (cgfloat angle);//rotation
   2. Cgaffinetransformmakescale (cgfloat sx,cgfloat sy);//Zoom
   3. Cgaffinetransformmaketranslation (cgfloat tx,cgfloat ty);//Pan

• • • Examples of Use:
    • Cgaffinetransform transform=cgaffinetransformmakerotation (m_pi_4);//ios transform functions use radians instead of angles as units
    • Myview.layer.affinetransform=transform;

• Mixed transformations:

Make a deeper transformation based on a transformation, such as a transformation that is both scaled and rotated, using the following 3 functions:

1. 1. Cgaffinetransformrotate (Cgaffinetransform t, cgfloat angle)
   2. Cgaffinetransformscale (Cgaffinetransform T, cgfloat SX, CGFloat Sy)
   3. Cgaffinetransformtranslate (Cgaffinetransform t, cgfloat tx, cgfloat ty)

• • In the implementation process, Mr. General becomes a null value of type Cgaffinetransform, obtained by the cgaffinetransformidentity () function
  • If you need to mix two existing transformation matrices, you can create a new transformation based on two transformations using the following method:
  • Cgaffinetransform Totalaffinetransform=cgaffinetransformconcat (cgaffinetransform t1, CGAffineTransform T2);
    • Examples of Use:
    • The implementation shrinks by 50%, rotates 30 degrees, and then moves 200 pixels to the right.
    • Cgaffinetransform transform=cgaffinetransformidentity;
    • Transform=cgaffinetransformscale (transform,0.5,0.5);
    • Transform=cgaffinetransformrotate (Transform, m_pi/180.0 * 30.0);
    • Transform = Cgaffinetransformtranslate (transform, 200, 0);
    • Myview.layer.affinetransform=transform;

Attention:

When you do the transformation in order, the result of the previous transformation will affect the subsequent transformations, so the 200-pixel right shift is also rotated by 30 degrees, shrinking by 50%, so it actually moves diagonally 100 pixels

means that the order of the transformations affects the final result, that is, the rotation after the translation and panning after the rotation may be different

• Shear Transformations:

As a rectangle becomes a parallelogram (tilt)

• • Examples of Use:
  • Cgaffinetransform transform=cgaffinetransformidentity;
  • transform.c=-1.0f;
  • transform.b=0f;
  • Myview.layer.affinetransform=transform;

• 3D Transformations:
  • Transform Property
    • is a catransform3d type with no corresponding attribute on UIView
    • CG prefixes are part of the core graphics framework (2D drawing API), Cgaffinetransform only valid for 2D transformations
    • The system provides the main 3 ways to create a Catransform3d instance object: (Compare the 2D function of the core graphics with the z-axis parameters)

1. 1. 1. Catransform3dmakerotation (cgfloat angle, cgfloat x, cgfloat y, CGFloat z);
      2. Catransform3dmakescale (cgfloat sx, CGFloat sy, cgfloat sz);
      3. Catransform3dmaketranslation (gloat tx, cgfloat ty, cgfloat tz);

• • • • Examples of Use:
      • Catransform3d transform=catransform3dmakerotation (m_pi_4,0,1,0);
      • Myview.layer.transform=transform;
      • Note: If you do not set the perspective projection effect, the view does not appear to have oblique perspective effects
• Perspective projection:
  • Catransform3d's M34 property is used to do perspective
    • m34 Default value is 0
    • apply perspective to -1.0/d by setting M34, D for perspective and object distance, usually set to 500-1000
    • Use example:
    • catransform3d transform=catransform3didentity;
    • transform.m34=-1.0/500.0;
    • transform=catransform3drotate (transform,m_pi_4,0,1,0);
    • Myview.layer.transform=transform;
• Sublayertransform Properties:
  • is a catransform3d type, setting this property affects all sublayers, transforms the container containing the layers at once, and all sublayers automatically inherit the transform method
    • Examples of Use:
    • [Mycontainerview Addsubview:myview1];
    • [Mycontainerview Addsubview:myview2];
    • Catransform3d perspective=catransform3didentity;
    • perspective.m34=-1.0/500.0;
    • mycontainerview.layer.sublayertransform=perspective;
    • Catransform3d Transform1 = catransform3dmakerotation (m_pi_4, 0, 1, 0);
    • Myview1.layer.transform=transform1;
    • Catransform3d transform2=catransform3dmakerotation (-m_pi_4,0,1,0);
    • Myview2.layer.transform=transform2;
• Back:
  • The default layer is drawn on both sides, and the opposite side shows a mirrored image of the front (which wastes resources when not needed)
  • Do not draw the back of the host map content by setting the Doublesided property on Calayer
• Flatten layers:
  • The inner layer does the opposite transformation relative to the outer layer, and the two transformations will be offset against each other (transformations made around the z-axis);
    • Such as:
    • Catransform3d outer = catransform3dmakerotation (m_pi_4, 0, 0, 1);
    • OuterView.layer.transform = outer;
    • Catransform3d inner = catransform3dmakerotation (-m_pi_4, 0, 0, 1);
    • InnerView.layer.transform = inner;
  • Instead of the z-axis transformations, but the y-axis, because each layer of the 3D scene is flattened, that is, a layer of simulated stereoscopic scene, when tilted, the sub-layer is still flattened on the parent view, the parent-child plane is always parallel, at this time the two opposite changes do not render the offset effect
    • Such as:
    • Catransform3d outer = catransform3didentity;
    • OUTER.M34 = -1.0/500.0;
    • outer = catransform3drotate (outer, m_pi_4, 0, 1, 0);
    • Self.outerView.layer.transform = outer;
    • Catransform3d inner = catransform3didentity;
    • INNER.M34 = -1.0/500.0;
    • Inner = catransform3drotate (inner,-m_pi_4, 0, 1, 0);
    • Self.innerView.layer.transform = inner;
• Solid objects:
  • A solid 3D object is actually a technically so-called hollow object, but the whole is presented in solid state
  • A piece of solid, such as an example of use, is rotated by a few facets of the layer by displacement:
    • @interface Viewcontroller ()
    • @property (nonatomic, weak) Iboutlet UIView *containerview;
    • @property (nonatomic, Strong) Iboutletcollection (UIView) Nsarray *faces;
    • @end
    • @implementation Viewcontroller
    • -(void) Addface: (nsinteger) Index Withtransform: (CATRANSFORM3D) transform{
    • Get the face view and add it to the container
    • UIView *face = Self.faces[index];
    • [Self.containerview Addsubview:face];
    • Center The face view within the container
    • Cgsize containersize = self.containerView.bounds.size;
    • Face.center = Cgpointmake (containersize.width/2.0, containersize.height/2.0);
    • Apply the Transform
    • Face.layer.transform = transform;
    • }
    • -(void) viewdidload{
    • [Super Viewdidload];
    • Set up the container sublayer transform
    • Catransform3d perspective = catransform3didentity;
    • PERSPECTIVE.M34 = -1.0/500.0;
    • Perspective = catransform3drotate (Perspective,-m_pi_4, 1, 0, 0);
    • Perspective = catransform3drotate (Perspective,-m_pi_4, 0, 1, 0);
    • Self.containerView.layer.sublayerTransform = perspective;
    • Add cube face 1
    • Catransform3d transform = catransform3dmaketranslation (0, 0, 100);
    • [Self addface:0 withtransform:transform];
    • Add Cube Face 2
    • Transform = catransform3dmaketranslation (100, 0, 0);
    • Transform = Catransform3drotate (transform, m_pi_2, 0, 1, 0);
    • [Self addface:1 withtransform:transform];
    • Add Cube face 3
    • Transform = catransform3dmaketranslation (0,-100, 0);
    • Transform = Catransform3drotate (transform, m_pi_2, 1, 0, 0);
    • [Self addface:2 withtransform:transform];
    • Add Cube face 4
    • Transform = catransform3dmaketranslation (0, 100, 0);
    • Transform = Catransform3drotate (transform,-m_pi_2, 1, 0, 0);
    • [Self addface:3 withtransform:transform];
    • Add Cube face 5
    • Transform = catransform3dmaketranslation (-100, 0, 0);
    • Transform = Catransform3drotate (transform,-m_pi_2, 0, 1, 0);
    • [Self addface:4 withtransform:transform];
    • Add Cube face 6
    • Transform = catransform3dmaketranslation (0, 0,-100);
    • Transform = Catransform3drotate (transform, M_PI, 0, 1, 0);
    • [Self addface:5 withtransform:transform];
    • }
    • @end
• Light and Shadow:
  • Can be adjusted by changing the background color of each face or by directly using a picture with a light effect
  • Using the Glkit frame to do the calculation of vectors (slightly)
• Click events:
  • The processing of click events is determined by the order of the views in the parent view, not the z-order in 3D space
  • Solution: When stereoscopic display views cause event interception due to response order issues
  • The Userinteractionenabled property is set to No to suppress event passing except for the surface.
  • Or simply overwrite the view with the code to intercept the event.

IOS Core Animation Advanced techniques-Transform