원하는 디자인의 SF symbol에 애니메이션을 적용해보자
🚨 iOS 17.0+
SF symbol 커스텀하기
먼저 SF Symbol 앱을 사용해서 원하는 SF symbol을 만들어보자..
예시에서는 두개의 심볼이미지를 합쳐보았다
먼저 원하는 두가지 이미지를 고르고 파일 -> 템플릿 내보내기를 통해 svg 이미지 템플릿을 추출하자
이제 Sketch에서 두가지 이미지를 합친다.
(따로 원하는 벡터 이미지가 있다면 가져온 SF symbol이 아니더라도 SF templete에만 맞게 커스텀해서 넣어주면 된다..!)
weight/scale에 맞춰서 각각 알맞게 커스텀해주었다면
SF symbol 템플릿에 맞춰서 각각 넣어준다..!(바로 템플릿에서 작업해도 상관없다)
원하는 커스텀 심볼을 템플릿에 알맞게 넣어주었다면 이제 svg 형식으로 추출해서 SF symbol로 가져가보자..
올바르게 템플릿 형식에 맞게 가져왔다면 SF symbol앱에 드래그해서 가져올 수 있다..!
SF symbol 애니메이션 적용하기
🚨 rotate 등 몇몇 애니메이션은 iOS 18.0+ 에서 사용가능
이제 SF symbol에 layer 별로 애니메이션을 지정해보자
원하는 애니메이션을 지정하고...
애니메이션을 넣어줄 레이어를 설정하자..!
완성!
적용해보기
예시의 rotate 애니메이션을 끝까지 적용해보려고 했지만 xcode 16이 문제가 생겨 다른 애니메이션을 적용해보겠다..ㅠ
원하는 SF symbol 이미지는 준비되었다고 치고,,
아래와 같이 SF symbol 앱에서 레이어만 조정한 커스텀 이미지를 적용해보았다(가변 색상 애니메이션을 사용해 이미지가 생성되는 느낌의 애니메이션 ㅎㅎ)
파일 -> 기호 내보내기를 통해 svg 이미지를 추출한 후
Asset에서 Symbol Image Set을 생성, 이미지를 넣어주면 된다
이제 애니메이션을 적용해보자
SwiftUI에선 symbolEffect modifier를 사용해 적용하면 된다.
UIKit에선 UIImageView내부의 addSymbolEffect 메서드를 사용..!
물론 UIButton에서도 확장을 통해 구현이 가능하다..
데모 앱
struct ContentView: View {
@State private var animationsRunning = false
var body: some View {
Button("Start Animations") {
withAnimation {
animationsRunning.toggle()
}
}
//가져온 symbol 이미지
Image("custom.photo.stack")
.resizable()
.frame(width: 100, height: 100)
.symbolEffect(.variableColor.cumulative, options: .repeating.speed(3), value: animationsRunning)
}
}완성!
앞으론 swift의 꽃인 애니메이션을 SF symbol에서 써먹어보자!
Reference
