Project 18, part 3

퀴즈 기록

• When creating a custom alignment guide we must provide a default value. This will be used if we don't attach the alignmentGuide() modifier to a view.
• Although SwiftUI rounds off its numbers when rendering, those numbers are stored as floating-point values for accuracy.
• A view is always and exactly the same size as its body. When we apply size rules to a view, we are just applying those rules to whatever is in its body.

Challenge

1. Make views near the top of the scroll view fade out to 0 opacity – I would suggest starting at about 200 points from the top.
2. Make views adjust their scale depending on their vertical position, with views near the bottom being large and views near the top being small. I would suggest going no smaller than 50% of the regular size.
3. For a real challenge make the views change color as you scroll. For the best effect, you should create colors using the Color(hue:saturation:brightness:) initializer, feeding in varying values for the hue.

Solution

화면에서의 위치를 기준으로 변환했기 때문에 global space를 활용했다.

1. 요소가 화면의 위로 이동할수록 투명도를 높이기

.opacity(proxy.frame(in: .global).minY/200)

커밋 링크

2. 요소가 바닥에 가까울수록 크고, 위에 가까울수록 작게 만들기

.scaleEffect(max(proxy.frame(in: .global).maxY/400, 0.5))

커밋 링크
max()를 이용해서 0.5보다 적은 값이 나오면 0.5를 반환하도록 설정했다.

3. 스크롤에 따라 요소의 색 바꾸기

.background(Color(hue: min(proxy.frame(in: .global).minY/800, 1.0), saturation: min(8.0 - proxy.frame(in: .global).maxY/100, 1.0), brightness: 1.0))

커밋 링크
min()을 이용해서 1.0보다 큰 값이 나오면 1.0을 반환하도록 설정했다.