Начертайте логото на Apple като форма на SwiftUI и покажете оставащото време отдолу
Първо ще пресъздам логото на Apple като SwiftUI път. За да улесня начертаването на пътя, създадох обект, който автоматично създава всички необходими точки.
Създава се чрез предаване на стойностите maxX и maxY на рамката, в която се чертае, тъй като всички точки се чертаят по отношение на тези максимални стойности.
Тези точки бяха избрани като оценки от мен, така че може да не сте съгласни относно това как се оказва цялостната форма.
Ако искате да преместите точки във формата, можете да го направите тук, като се уверите, че сте умножили по maxX или maxY, за да получите относителна позиция, а не твърдо кодирана. Формата може да бъде с всякакъв размер, така че фиксирана позиция потенциално би била извън рамката и няма да се мащабира.
Умножаването по максимума в двете посоки прави стойност 1 равна на този максимум.
Контролните точки, които казват на кривите къде да се огъват, могат да бъдат под нула или над 1, тъй като те всъщност не са начертани като част от формата.
Но точките, които искате да останете в рамката, трябва да са между нула и 1, когато се умножат по максимума.
Нека превърнем тези точки във форма!
Тази форма все още няма щрих или запълване, но това е добре.
Таймерът за обратно броене
Числата ще бъдат показани с етикет под тях в заоблен правоъгълник.
Това ще се използва повторно за дните, часовете, минутите и секундите, така че трябва да бъде отделен изглед.
Сега мога да комбинирам 4 от тях в LazyVGrid, което ще ги покаже като 2 реда по 2. Колоните са гъвкави, така че могат да преоразмеряват сами, за да запълнят наличното пространство.
Тук има и таймер, който ще изчислява колко време остава всяка секунда.
Сега можем да комбинираме изгледите в ZStack.
Има AngularGradient фон, тъй като това прави по-лесно да се види, че Material.ultraThinMaterial се използва като запълване за AppleLogoShape. Това означава, че замъглява всичко, което е под него, но все още можете да видите през него. Ако вместо това използвате плътен цветен фон, няма да можете да видите много добре ефекта на замъгляване.
Разбира се, не е необходимо да използвате полупрозрачен материал като пълнеж за AppleLogoShape. Всъщност можете да извикате .fill() без параметри и foregroundColor, който впоследствие приложите, ще бъде цветът на формата.
Можете да използвате модификатора .stroke(lineWidth: 5) , за да начертаете и контур на формата, но в момента е невъзможно да използвате едновременно щрих и запълване.
Ако искате едновременно щрих и запълване, за съжаление сте останали с отделно щрихирано и запълнено копие на фигура в ZStack.
Като алтернатива можете да добавите щрихиран екземпляр на формата като наслагване върху запълнен екземпляр.
Want to Connect? This story was also published on my Substack channel: Typesafely.
