Skip to content

Latest commit

 

History

History
 
 

04-🔠-typeface-comparison

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
TypefaceComparison
TypefaceComparison
 
 
README.md
README.md
 
 

README.md

C04 - 🔠 Typeface Comparison

A 3D rotate typeface comparison.

Notes

Fixed Size

Use .fixedSize to set the width and height of view automatic. Code like:

Text("Typeface")
  .font(Font.custom("Futura", size: 120))
  .foregroundColor(Color.blue.opacity(0.5))
  .multilineTextAlignment(.leading)
  .padding(.leading)
  .fixedSize()

Composing View Gestures

Emmm...This is a long story. This article by Apple is really the one you must read it. If you want know more, this article will help you.

But all above two articles is sample of [LongPressGesture](https://www.google.com/search?client=safari&rls=en&q=LongPressGestures&ie=UTF-8&oe=UTF-8) which mens:

A gesture that ends once a long-press event sequence has been recognized.

It's not a common gesture but very useful to understand how .gesture() works. In this case, we use [DragGesture](https://developer.apple.com/documentation/swiftui/draggesture).

Define the Drag Gesture

First you should define the drag gesture include inactive state and active state with the amount of translation while dragging. Code Like:

enum DragState {
  case inactive
  case active(translation: CGSize)

  var translation: CGSize {
    switch self {
    case .inactive:
      return .zero
    case .active(let t):
      return t
    }
  }

  var isActive: Bool {
    switch self {
    case .inactive: return false
    case .active: return true
    }
  }
}

Defining Gesture State

Then define gesture state parameter for the gesture. Create a gesture which named dragGesture with.updating() method to update the property. Use .offset() method to the x and y properties. Full code:

@GestureState var dragState = DragState.inactive
@State var viewState = CGSize.zero

var body: some View {

  let dragGesture = DragGesture()
  	.updating($dragState) { (value, dragInfo, _) in
		dragInfo = .active(translation: value.translation)
	}

	return Text("A")
		.offset(
			x: viewState.width + dragState.translation.width,
			y: viewState.height
		)
		.gesture(dragGesture)
}

3D Rotation

In this case we use a slider to control the rotation of text. You can learn more about slider in my last challenge. Something different in this case a step declaration is necessary, like Slider(value: $rotationX, in: 0.0...45.0, step: 1.0) .

.rotation3DEffect() modifier lets us rotate views in 3D, very easy.

@State var rotationX: Double

var body: some View {
	Text("Placeholder")
		.rotation3DEffect(.degrees(rotationX), axis: (x: 0, y: 1, z: 0))
	Slider(value: $rotationX, in: 0.0...45.0, step: 1.0)
}

Animations

Use .animation() modifier like .animation(.spring()), looks pretty.

References