개발 환경별 애니메이션 지원 속성
각 환경별로 어떤 애니메이션 속성과 트랜지션 커브값을 지원하는지 알아야 개발이 가능하며, 더 자세한 모션 제작이 가능
아래는 각 iOS, Android, Web 환경에서 기본적으로 지원하는 애니메이션 속성과 커브이다.
🍎 iOS
속성
anchorPoint
backgroundColor
backgroundFilters ex) 제어센터 내리면 백그라운드 블러처리되는 효과
borderColor
borderWidth
bounds 참고: frame과 bounds의 차이
compositingFilter
contents
contentsRect
cornerRadius
doubleSided 페이지 넘김 효과
filters 기본 필터기능 ex) 세피아 필터
frame 참고: 영역 크기와 위치
hidden
mask
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowPath
shadowRadius
sublayers
sublayerTransform
transform
zPosition
커브
linear | easeIn |
easeOut | easeInOut |
spring | |
출처 : Apple Developer
참고 링크 🔗
UICubicTimingParameters (커스텀 커브 가능)
🤖 Android
속성
Translate: View(오브젝트)의 위치를 움직임.
Rotate
Alpha
Scale
커브 : Interpolator
안드로이드에서는 애니메이션 커브값을 interpolator라고 한다. 지원 가능한 종류는 다음과 같다.
Linear
Accelerate
Decelerate
AccelerateDecelerate
Overshoot
Anticipate
AnticipateOvershot
Bounce
FastOutLinearIn
FastOutSlowIn
LinearOutSlowIn
출처 : Android Developer
참고 링크 🔗
그 외 요소
repeatCount: 추가 반복 횟수. Default는 0이다. 반복은 “infinite”
Duration: 지속 시간. 1초 = 1000. 단위는 ms (milli-second 천분의 1초)
pivotX,Y: 기준점. 기본은 좌측 상단 끝부분. 중심은 50%로 표시.
⛵️ Web
디자인 전에 브라우저 지원 기능을 확인하여 사용자 환경에서 작동하는 애니메이션인지 확인하자. 지원이 안 되는 버전은 멈춘 상태의 화면을 제작해야 한다.
웹에서 CSS와 자바스크립트로 애니메이션을 만들 수 있다. 어느 것을 사용할지는 프로젝트의 기타 종속성과 원하는 효과의 종류에 따라 결정된다.
UI 요소 상태 전환과 같은 간단한 '원샷(one-shot)' 전환에 CSS 애니메이션을 사용한다.
바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과를 원할 경우에 자바스크립트 애니메이션을 사용한다.
자바스크립트로 애니메이션을 만드는 경우, Web Animations API 또는 최신 프레임워크를 사용한다.
CSS 속성
background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
clip
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-weight
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
object-position
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
text-decoration-color
text-indent
text-shadow
top
transform
transform-origin
vertical-align
visibility
width
word-spacing
z-index
커브
linear
easeIn
easeOut
easeInOut
커스텀 커브 가능 Cubic-Bezier Generator , 다양한 커브 예시
출처: w3schools
참고 링크 🔗
Last updated
