Card flip animation by pan gesture.

Related tags

Cards CardAnimation
Overview

CardAnimation

Design from Dribble. Design from Dribble

实现思路在这里

Two Solutions

At the begin, I didn't encapsulate code, @luxorules refactor code into class and improve it to support not only image, then I encapsulate my code into class. So, there are two choices.

CardContainerView by seedante

Here is CardContainerView API reference. CardContainerView supports custom card size, pan gesture.

Example:

let cardContainerView = CardContainerView(frame: aFrame)// with defalut card size.
cardContainerView.dataSource = id<CardContainerDataSource>

Done.

public protocol CardContainerDataSource: class{
    func numberOfCards(for cardContainerView: UICardContainerView) -> Int
    func cardContainerView(_ cardContainerView: UICardContainerView, imageForCardAt index: Int) -> UIImage?
}

CardAnimationView by @luxorules

CardAnimationView supports custom card size, pan gesture.

Usage is simple also:

let cardAnimationView = CardAnimationView.init(frame: aFrame)// with defalut card size.
cardAnimationView.dataSourceDelegate = id<CardAnimationViewDataSource>

It adds a little complexity to exchange for: custom card view(not only image).

protocol CardAnimationViewDataSource : class {
    func numberOfVisibleCards() -> Int
    func numberOfCards() -> Int
    // Return view displayed in the CardAnimationView. If reusedView is not nil,
    // you could configure and return it to reuse it.
    func cardNumber(number:Int, reusedView:BaseCardView?) -> BaseCardView
}

Classes:

  • CardAnimationView: UIView, the view to display a list of card view.
  • BasedCardView: UIView, all custom card view must be inherited from this class.
  • ImageCardView: BasedCardView, child class of BasedCardView, if you just want to use image, use this class.

Requirements

  • iOS 8.0/Swift 4.0

Installation

Two solutions are both single file. They are in Classes folder. Just need to import file into your project.

Other

The project is released under the MIT LICENSE. And relative technical points are moved to wiki.

You might also like...
🔥 A multi-directional card swiping library inspired by Tinder
🔥 A multi-directional card swiping library inspired by Tinder

Made with ❤️ by Mac Gallagher Features 💡 Advanced swipe recognition based on velocity and card position 💡 Manual and programmatic actions 💡 Smooth

An iOS library to create beautiful card transitions.
An iOS library to create beautiful card transitions.

CSCardTransition CSCardTransition is a small library allowing you to create wonderful push and pop transition animations like in the App Store. It wor

SimpleCardView-SwiftUI is a very simple card view written with SwiftUI
SimpleCardView-SwiftUI is a very simple card view written with SwiftUI

SimpleCardView-SwiftUI is a very simple card view written with SwiftUI

GLScratchCard - Scratch card effect
GLScratchCard - Scratch card effect

I loved the way payments app's like Google pay and PhonePe used scratch card option to reward it's user. Hence with 💛 cloned the same scratch card effect for you guys out there

Appstore card animation transition. UICollectionView and UITableView card expand animated transition
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

iOS simple project to create half-screen modal view controller with pan
iOS simple project to create half-screen modal view controller with pan

Simple Half-screen view controller, draggable and less code (learning purpose)

SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader
SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader

SwiftUI, peek scrolling animation and card tapped animation, using GeometryReader, follow the livestream tutorial by MengTo.

[iOS] Animated analog flip numbers like airport/train-station displays (SwiftUI)
[iOS] Animated analog flip numbers like airport/train-station displays (SwiftUI)

A SwiftUI FlipNumberView A small universal (iOS + macOS) app displaying the current time with a flip animation. This is still WIP and doesn't support

Flip is a book tracking app built for iOS and iPadOS. Coming soon to watchOS and macOS.
Flip is a book tracking app built for iOS and iPadOS. Coming soon to watchOS and macOS.

Flip Flip is a project aimed at helping users manage their library of books. It has a clean user interface, allows users to sort and filter their libr

Awesome IOS Styling with SwiftUI, Animation, Effects, Gesture ⭐️

Awesome SwiftUI Styling with SwiftUI ⭐️ This repository is dedicated to IOS styling using SwiftUI. (often using Other Libraries.) I started collecting

card.io provides fast, easy credit card scanning in mobile apps
card.io provides fast, easy credit card scanning in mobile apps

card.io SDK for iOS card.io provides fast, easy credit card scanning in mobile apps. NEW!!! card.io is now an open-source project! As of December 2014

Swipe able, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI
Swipe able, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI

Swipable, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI Сocoapods installation Add in your Podfile: po

Ios-card-transition - iOS CocoaPod to create beautiful card transitions
Ios-card-transition - iOS CocoaPod to create beautiful card transitions

CSCardTransition CSCardTransition is a small library allowing you to create wond

Card Decks is a small utility application for your iPhone, iPod touch and iPad which brings you simple, configurable, colored, multi-line text cards that are grouped into card decks

Card Decks is a small utility application for your iPhone, iPod touch and iPad which brings you simple, configurable, colored, multi-line text cards that are grouped into card decks.

SwiftUI-Card - Simple card ui designed using SwiftUI
SwiftUI-Card - Simple card ui designed using SwiftUI

SwiftUI - Card Simple card ui designed using SwiftUI Preview

IOS Card Game - A simple card game using SwiftUI
IOS Card Game - A simple card game using SwiftUI

IOS_Card_Game A simple card game using Swift UI.

An easy-to-use Collection View Layout for card-like animation.
An easy-to-use Collection View Layout for card-like animation.

CarLensCollectionViewLayout An easy-to-use Collection View Layout for card-like animation 🎉 CarLensCollectionViewLayout was created out of the implem

Swift interpolation for gesture-driven animations
Swift interpolation for gesture-driven animations

Interpolate Interpolate is a powerful Swift interpolation framework for creating interactive gesture-driven animations. Usage The 🔑 idea of Interpola

PinpointKit is an open-source iOS library in Swift that lets your testers and users send feedback with annotated screenshots using a simple gesture.
PinpointKit is an open-source iOS library in Swift that lets your testers and users send feedback with annotated screenshots using a simple gesture.

PinpointKit is an open-source iOS library in Swift that lets your testers and users send feedback with annotated screenshots using a simple gesture. F

Comments
  • Update to Swift 3 and Request for Open Source License

    Update to Swift 3 and Request for Open Source License

    I love this animation! It looks great! I have updated the syntax to Swift 3.0 and uploaded a Google translate PDF of your blog post (to English).

    I also added the Apache 2.0 Open Source license and retained your copyright (as instructed in that license) on all of the class files.

    If you are willing to grant license and allow others to use your wonderful animation in their projects please accept my pull request.

    Many thanks in advance.

    Translation Below is from Google Translate iTools: (http://itools.com/tool/google-translate-web-page-translator)

    我喜欢这个动画! 看起来不错! 我更新了Swift 3.0的语法,并将您的博客文章的Google翻译PDF(英文)上传。

    我还添加了Apache 2.0开源许可证,并保留了您对所有类文件的版权(如该许可证中所述)。

    如果您愿意授予许可证并允许他人在项目中使用您的美妙动画,请接受我的拉扯请求。

    提前谢谢了。

    opened by codenameDuchess 1
  • CardAnimation in a separated class with reuse of views.

    CardAnimation in a separated class with reuse of views.

    Soooo... I extracted the code in the ViewController to an independent class which could be easily used in any project. No need to declare all of your cards and constraints in the storyboard, just drop in this CardAnimationView, set the delegate and enjoy it.

    To do so I had to tweak a bit the way the code was done, I think you will find it pretty familiar but I had to tweak a few things. in exchange for this I added view reusability.

    A few stuff:

    • You can set card size, it doesn't take the width of the superview in consideration anymore or uses any aspect ratio constrain.
    • Got rid of the border. Developers provide cards through the delegate, if they want border it should be in his card implementation (no layer tweaks in the card).
    • All custom cards should be children of BaseCardView. An example ImageCardView is provided.
    • Everything works as before, should at least. The flipUp flipDown animations (not the pan) still hides/shows the content abruptly. This should be a bug/todo.

    Lots of room for improvement but at least now it can be easily customized and added to any project :+1:

    You can see an example of how the new CardAnimationView is used in the ComponentExampleViewController.

    Cheers!

    opened by luxorules 1
Owner
null
IOS Card Game - A simple card game using SwiftUI

IOS_Card_Game A simple card game using Swift UI.

Md. Masum Musfique 1 Mar 25, 2022
A reactive, card-based UI framework built on UIKit for iOS developers.

CardParts - made with ❤️ by Intuit: Example Requirements Installation Communication & Contribution Overview Quick Start Architecture CardsViewControll

Intuit 2.5k Jan 4, 2023
A SwiftUI based custom sheet card to show information in iOS application.

A SwiftUI based custom sheet card to show any custom view inside the card in iOS application.

Mahmud Ahsan 4 Mar 28, 2022
A SwiftUI card view, made great for setup interactions.

SlideOverCard A SwiftUI card design, similar to the one used by Apple in HomeKit, AirPods, Apple Card and AirTag setup, NFC scanning, Wi-Fi password s

João Gabriel 716 Dec 29, 2022
This UI attempts to capture the Quibi Card Stack and the associated User Interaction.

RGStack This UI attempts to capture the Quibi Card Stack and the associated User Interaction. Required A View that conforms to the ConfigurableCard pr

RGeleta 96 Dec 18, 2022
Card-based view controller for apps that display content cards with accompanying maps, similar to Apple Maps.

TripGo Card View Controller This is a repo for providing the card-based design for TripGo as well as the TripKitUI SDK by SkedGo. Specs 1. Basic funct

SkedGo 6 Oct 15, 2022
Awesome looking Dial like card selection ViewController

KVCardSelectionVC Awesome looking Dial like card selection ViewController An updated Swift 3 working version of : https://github.com/atljeremy/JFCardS

Kunal Verma 23 Feb 1, 2021
🃏 Tinder like card interface

Features Swift 3 Custom views for the card & overlay Generic Dynamically add new cards on top or on the bottom Lazy view loading Setup pod 'DMSwipeCar

Dylan Marriott 250 Nov 15, 2022
Cusom CollectionView card layout

MMCardView Example To run the example project, clone the repo, and run pod install from the Example directory first. Demo 1.Card Requirements iOS 8.0+

Millman Yang 556 Dec 5, 2022
:star: Custom card-designed CollectionView layout

CardsLayout CardsLayout is a lightweight Collection Layout. Installation CocoaPods You can use CocoaPods to install CardsLayout by adding it to your P

Filipp Fediakov 798 Dec 28, 2022