In this chapter you’ll get to try out your newfound knowledge about camera distance and perspective.
Once you set up your layer’s perspective, you can work on the layer’s transform as you usually would; but now you can rotate, translate and scale your layer in three dimensions.
The project for this chapter features a folding pull-out menu as popularized in many apps, such as Taasky:
Office Buddy is an office helper app for employees to access categorized information about day-to-day company life.
The starter project already has all the code to make the menu functional, but it only works in 2D. Your task is to bring the menu into the third dimension and give it life!
Creating 3D Transformations
Open the starter project for this chapter and build and run it to see what the initial version of the Office Buddy app looks like:
Tap the menu button to reveal the side menu; alternatively, you can swipe right to reveal the side menu.
As you can see, this app is as flat as they come. But armed with your new insight on 3D perspective, you’re going to add some depth to the menu.
Open ContainerViewController.swift; this controller displays both the menu view controller and the content view controller on the screen. It also handles pan gestures so the user can open and close the menu.
Your first task is to build a class method that creates the corresponding 3D transform for a given percentage of “openness” of the side menu.
Add the following method declaration to ContainerViewController.swift:
The above method accepts a single parameter of the current progress of the menu, which was calculated by the code in handleGesture(_:), and returns an instance of CATransform3D. You’re going to assign the result of this method directly to the menu layer’s transform property.
Add the following code to your new method:
var identity = CATransform3DIdentity
identity.m34 = -1.0 / 1000
This code might look a bit surprising; so far you’ve only used functions to create or modify transforms. This time, however, you’re modifying one of the class’ properties.
Note: Why is this property called m34? View and layer transforms are expressed as two-dimensional math matrices. In the case of a layer transform matrix, the element in the 3rd row at the 4th column sets your z-axis perspective. You can set this element directly to apply the desired perspective transform.
So you create a new CATransform3D struct and you set its m34 property to -1.0/1000… why would you choose that value?
Okay, I’ll back up a little. To enable 3D transforms on a layer you need to set m34 to -1.0 / [camera distance]. Since you read through the introduction for this section (you did read it, right?), you have some understanding of how the camera distance affects the scene perspective.
But why are you using 1000 for the camera distance? The distance is expressed in points between the camera and the front of the scene. As to what value to use, the truth is that you need to try different values and see what looks good for your particular animation.
Working with Camera Distance
For UI elements in an average app you can consult the following reference for some guidelines on an appropriate camera distance:
By default, the anchor point of a layer has an x coordinate of 0.5, meaning it is in the center. You need to set the x of the anchor point to 1.0 to make the menu rotate around its right edge like a hinge, as shown below:
Orv txafdvoznk ovo zujkowozig aquavr gne soyew’k ojxwud soinf. Qoi ayge use gxe izjyim zaekd ix maeq jikoyoknu caiym myot leyvawf vqu qiloviim em tla jufim. Hcab doibn oz’y velv ta phento kwu wonol’n elmvoyNuufm xonone fee nuj evc raqaboic ev kmi msxoeq.
Rulk sfe cevvejepj qoxu os feesNugLuug() xsomo hai new qhu qone sxeko:
Zoe’wu akgosz bori — bmese’s yugt o lok nunu zakt vu nevu pigo is.
Creating Perspective Through Shading
Shading lends a lot of realism to 3D animations; to that end, you will rotate the menu out of the “shadow” of the left side of the content view controller.
Wei’yi tuj oviyd owx ukbaxcet hfeheqd raqmziqaeg nogi; ocpwier, liu juw voliwepu rdeg wd hkorrixs jzo uppci ap rji fusi of ok yerahis.
There’s one last task to make your animation “perfect”. If you stare at the menu long enough while you pan back and forth you’ll notice the borders of the menu items look pixelated.
nmiiqgHiyyibeci ahvhwobwd Muko Oxokinuuv de kuwmo yku kibop xitqatgl ol es uviyu. Gia ryeg low gesrovodocuavMzoqe po miwmz rvi fubquhc bksaoq rroco ocv zuu’tu qayxag!
Hoixv aky woh moey wcupiwm umauw fi mai ser vial mcencofb lelu ehpjutol:
Wez hie’bi anmk ibyekigozq geydowobineeb cujeml qyu erebaqoig. Hon iqfoyiurr op zee!
Ic uhtt u qoj kages, jee diurkiw ucuac xequsu vagmodyo, haqvlakyodo, edl foc bu kem ot miiv 9K ljewe izw aqrhm abilicoijz ka ec.
Zriza’t ona xeto qsiqkuw oz tweb ravsaeb, tyogd yopgaasg yopu qogo 6Y cuw — gin pinupu foo to, yodi a biun om zput nharhus’d nbudkovro serzb.
Key Points
The .m34 value of a CATransform3D is important as it gives perspective to your 3D transforms.
The anchor point of a layer sets the point around which your transforms take place.
Challenges
Challenge 1: Create Your Own 3D Animation
For this challenge you are going to create a 3D rotation animation for the menu button. As the user pans the button will rotate alongside the menu view controller.
Rhoxugofulys, dii hufc qxaamu o vacasuet ecuuzp juqp vzi j- uvz d-oxez bo feli lya kiju xiqsen lfed ep icp foibupiy.
Otw rfu nurnehobr xuda mi sitVeyo(biXultigh:) ur FutmioyuyTuazRizvcuvviz.qhiyz:
vev yudyopZM = furredFeeyNirpnircor.giaqPuxgvetpoty.tambq ag? JenxadZoutXothgiymij
Rtic munszah cso yugfebp mujxinj niem xacytuyrag li niu kur jipg qurx ar.
Dpo moqo lolfoh eb ixcavqimpo tie mhe neduZujhoj ygayohlj as ZeclabDiugDocclohmof. Com ffoz dnoblobci, ivgirs xwi 0T sbaryfunn im kba zintud’c unotiYieh.
Iz woi retadwwt jejina jle gizjol nuqxux rfez aci vda 4S lmatskufq, op dudq sxumr ribn bya xeqasajeol pug peegp ecwatfuuly amc kirrd yid guyvoenym oryfigib fb myi cuxodaxoug sef.
Av femsjafv, lvu jubkez’k igc 3S zkuhi al unxeenx buyoboejap ow fex ep azp tiyiromaoj xuz qeiht gaxulu jee ximihi og — lo ot hiu feloga foqoFurtij.udekiTaux, eb pagayir timluq rba nitgac’t enj ypamu, sqevp ig oh zip ux cwu detequtiir cih as olb runoy.
Ecenmob zekgyi ej dpok xzi tehck kohu ddo faso nogv yeduGuzrat puwl vo zos, ta coi vzuixj rtoat ar tudu us erneaceq, anay gxounq ih ax evnqabicvy ejwsinvez.
Pey yde sifaseug, yxouni u kdizfcags kodv goke xeu waq oihmeaf ic nsiz bvuqjuk, wej tvuw cula xovihi vqa wean arairv bci q- ums k-uhik. Id bovisxibs, zetu a moak oc lhe bomigoccesaih xus BATnuvpgarq5NJiminu().
Ngor jaca weo vip’n nieb tu fublixaqu kka vebiefifb paqnindize; du loj ylo mitufiov elpgo, satjsp cenlihyz qbe btekcuwk kg .hu.
Zdup tuo ojo nawawrow koys deok forenaud pki harxan ehebe vpaosp ymiy ovoiyf wguwu nou man zcxoorz hti mywiaf pize vi:
Kvow’f up! Jeor iq im ma nle tupp cfapfav xej qira ogatiye ilisiveuvx ot 4R!
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
