Повторяем стопки карт как в Apple Wallet в 50 строк кода
На выхах залип на анимацию из Apple Wallet и решил попробовать воспроизвести с минимальным количеством кода.
Если всю физику жеста можно определить как единый прогресс, то когда тянем вниз, можно представить, что видимое смещение мы делим на длину нашего хода.
Но тут есть подводный камень. Если мы будем анимировать всю стопку одинаково, то на выходе получим скучную, приклеенную однотипную анимашку, это не круто.
Поэтому можно разбавить свои кэфом пружины (просто каждую чуть медленее, чем предыдущую)🎩
ForEach(Array(colors.enumerated()), id: \.offset) { index, color in
RoundedRectangle(cornerRadius: 26, style: .continuous)
.fill(color.gradient)
.offset(y: CGFloat(index) * (peek + (openStep - peek) * progress))
.animation(.interactiveSpring(response: 0.30 + Double(index) * 0.035,
dampingFraction: 0.74),
value: progress)
}
А в Notion уже доступен не только этот пример, но ещё и расширенный и целая тонна полезных фишек.
Creator has disabled comments for this post.
