Skip to content

Instantly share code, notes, and snippets.

@Inncoder
Last active August 27, 2020 17:41
Show Gist options
  • Select an option

  • Save Inncoder/5ee95dccb9ccfa5de0d1cff7506a1cdf to your computer and use it in GitHub Desktop.

Select an option

Save Inncoder/5ee95dccb9ccfa5de0d1cff7506a1cdf to your computer and use it in GitHub Desktop.
SwiftUI credit card flip animation
//
// CreditCardFlip.swift
// CreditCardFlip
//
// Created by Inncoder on 05/06/2020.
// Copyright © 2020 Inncoder AS. All rights reserved.
//
struct CreditCardFlip: View {
@State private var animating = false
@State private var isImageFlipped = false
@State private var rotation: Double = 0
var body: some View {
ZStack {
if isImageFlipped {
Image("credit-card-back")
.scaleEffect(0.6)
.rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
} else {
Image("credit-card-front")
.scaleEffect(0.6)
}
}
.rotation3DEffect(.degrees(rotation), axis: (x: 0, y: 1, z: 0))
.onTapGesture {
withAnimation(Animation.linear(duration: 0.3)) {
self.animating.toggle()
}
}
.onAppear {
Timer.scheduledTimer(withTimeInterval: 0.01, repeats: true) { _ in
if self.animating {
withAnimation(Animation.linear(duration: 0.01)) {
self.rotation += 3
}
if self.rotation == 90 || self.rotation == 270 {
self.isImageFlipped.toggle()
} else if self.rotation == 360 || self.rotation == 180 {
self.animating = false
}
if self.rotation == 360 {
self.rotation = 0
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment