UIView subclass that bends its edges when its position changes.

Overview

AHKBendableView

CocoaPods

BendableView is a UIView subclass that bends its edges when its position change is animated. Internally, BendableView contains CAShapeLayer, which acts as its background. The layer's path changes during animations, creating an effect of bending. Subviews stay intact. You can find a more extensive description on my blog: Recreating Skype's Action Sheet Animation and Follow-Up Post.

Demo GIF

Usage

BendableView contains three public properties:

var damping: CGFloat // set to animate the view's edges differently than the whole view (used in an internal spring animation)
var initialSpringVelocity: CGFloat // same as above
var fillColor: UIColor // "background" color of the bendable layer

You should set them before animating the position change of the view. I propose to use slightly lower values for damping and initialSpringVelocity than the values used when calling +animateWithDuration:delay:usingSpringWithDamping: initialSpringVelocity:options:animations:completion:, just like in this example:

let bv = BendableView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.addSubview(bv)

// bending setup
bv.fillColor = UIColor.redColor()
bv.damping = 0.7
bv.initialSpringVelocity = 0.8

UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: .BeginFromCurrentState | .AllowUserInteraction, animations: {
        bv.frame.origin = CGPoint(x: 200, y: 300)
        bv.frame.size = CGSize(width: 150, height: 150)
    }, completion: nil)

Have fun!

Example project

To run the example project, clone the repo, and open Example/AHKBendableView.xcodeproj.

Requirements

  • iOS 7.0
  • ARC

Installation

AHKBendableView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "AHKBendableView"

Author

Arkadiusz Holko:

You might also like...
A framework which helps you attach observers to `UIView`s to get updates on its frame changes

FrameObserver is a framework that lets you attach observers to any UIView subclass and get notified when its size changes. It doesn't use any Method S

Example of adding marching ants selection to the edges of the image.
Example of adding marching ants selection to the edges of the image.

JMCMarchingAnts Library that lets you add marching ants (animated) selection to the edges of the images. Usage: * Copy the JMCMarchingAnts.swift file

Scanner for decks of cards with bar codes printed on card edges
Scanner for decks of cards with bar codes printed on card edges

The Nettle Magic Project This deck of cards has a bar code printed on the edge of each card. Scanning these bar codes would reveal where every card is

A swift PropertyWrapper to provide automatic NSView/UIView invalidation when the properties value changes.

A swift PropertyWrapper to provide automatic NSView/UIView invalidation when the properties value changes. It duplicates the @Invalidating propertyWrapper for build targets prior to macOS 12 and iOS 15.

RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing.
RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing.

RichEditorView RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing. Written in Swift 4 Supports iOS 8+ through Cocoapod

DynamicBlurView is a dynamic and high performance UIView subclass for Blur.
DynamicBlurView is a dynamic and high performance UIView subclass for Blur.

DynamicBlurView DynamicBlurView is a dynamic and high performance UIView subclass for Blur. Appetize's Demo Since using the CADisplayLink, it is a hig

FancyGradient is a UIView subclass which let's you animate gradients in your iOS app. It is purely written in Swift.
FancyGradient is a UIView subclass which let's you animate gradients in your iOS app. It is purely written in Swift.

FancyGradient is a UIView subclass which let's you animate gradients in your iOS app. It is purely written in Swift. Quickstart Static gradient let fa

UIView+CameraBackground - Show camera layer as a background to any UIView.
UIView+CameraBackground - Show camera layer as a background to any UIView.

UIView+CameraBackground Show camera layer as a background to any UIView. Features Both front and back camera supported. Flash modes: auto, on, off. Co

TextDrawer, is a UIView allows you to add text, with gesture, on UIView, or UIImage
TextDrawer, is a UIView allows you to add text, with gesture, on UIView, or UIImage

TextDrawer TextDrawer, is a UIView allows you to add text, with gesture, on UIView, or UIImage. About Annotating Images TextDrawer is the easiest way

Custom UIView class that hosts an array of UIbuttons that have an 'underline' UIView beneath them which moves from button to button when the user presses on them.
Custom UIView class that hosts an array of UIbuttons that have an 'underline' UIView beneath them which moves from button to button when the user presses on them.

Swift-Underlined-Button-Bar Custom UIView class that hosts an array of UIbuttons that have an 'underline' UIView beneath them which moves from button

An assignment for ios Dev intern position
An assignment for ios Dev intern position

iOS Assignment An assignment for ios Dev intern position Design Process A UI design for the project is made in FIGMA. Link here Figma Sneek Peek Descr

Mousemory remembers cursor position across multiple monitors.
Mousemory remembers cursor position across multiple monitors.

Mousemory remembers cursor positions across multiple monitors. Mousemory A simple macOS utility that remebers mouse position across different monitors

Menu controller with expandable item groups, custom position and appearance animation written with Swift. Similar to ActionSheet style of UIAlertController.
Menu controller with expandable item groups, custom position and appearance animation written with Swift. Similar to ActionSheet style of UIAlertController.

Easy to implement controller with expanding menu items. Design is very similar to iOS native ActionSheet presentation style of a UIAlertController. As

A lightweight app to play videos from the Files app in a better (dark) interface which avoids losing your playback position.
A lightweight app to play videos from the Files app in a better (dark) interface which avoids losing your playback position.

Playerly Playerly is a very lightweight Swift app that allows you to select a file (video or movie) from the built in Document Browser, and play it in

A realistic reflective shimmer to SwiftUI Views that uses device orientation. Position any View relative to device orientation to appear as if through a window or reflected by the screen.
A realistic reflective shimmer to SwiftUI Views that uses device orientation. Position any View relative to device orientation to appear as if through a window or reflected by the screen.

A 3d rotation effect that uses Core Motion to allow SwiftUI views to appear projected in a specific direction and distance relative to the device in r

Record your position and export your trip in GPX with GPS Stone on iOS.

GPS Stone Register your trips and export them as GPX files. Notes We currently have included a UIRequiredDeviceCapabilities with a location-services v

Kfm-ios-test - Test online for iOS Developer position in Kimia Farma or PT. Buana Varia Komputama
Kfm-ios-test - Test online for iOS Developer position in Kimia Farma or PT. Buana Varia Komputama

kfm-ios-test Kimia Farma Mobile iOS Test Test online for iOS Developer position

Challenge app for Moises.ai iOS Developer position

CSGOTV Description Challenge app for Moises.ai iOS Developer position For this challenge you have to implement an app to display all CS:GO matches in

Comments
  • AHKBendableView reacting to scroll view velocity

    AHKBendableView reacting to scroll view velocity

    I'd like to make a scroll view that contains a single AHKBendableView which responds to vertical scroll velocity.

    It looks like BendableView updates itself based on current/previous position inside animation blocks, but it's not clear to me how this would work in a scroll view. Sorry I'm pretty new at this stuff.

    I could map velocity -> control points like BRFlabbyTable does. But maybe the animation feels more realistic using springs as you do, and maybe it's less code to write. You think this is a good use case for AHKBendableView, maybe by plugging vertical velocity into it, or by manually tracking it's position to match the scrollview?

    opened by SimplGy 3
  • Use Mesh Transform?

    Use Mesh Transform?

    I've just learned (while going through my Pocket queue) about mesh transforms on iOS. BCMeshTransformView could be used to bend the whole view, not just its background.

    enhancement 
    opened by fastred 0
jasu 29 Dec 20, 2022
Reading animation allows you to click on the different page numbers and accordingly it will animate page changes in a cool way. It has a very attractive UI and is very easy to use.

Reading Animation Cool Reading Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 42 Oct 4, 2022
A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

AnimatedCollectionViewLayout Normally a UICollectionView has no transition effects when you scroll from one item to another. There are lots of ways to

Jin Wang 4.5k Jan 1, 2023
UIImageView subclass that allows you to display a looped video and dynamically switch it.

AKVideoImageView Motivation AKVideoImageView was created because I wasn't satisfied with the standard AVPlayer when I was implementing a video backgro

Oleksandr Kirichenko 125 Apr 5, 2022
Simple UIButton subclass with additional state change animations (e.g. backgroundColor) and missing features

SimpleButton UIButton subclass with animated, state-aware attributes. Easy to subclass and configure! Full API docs Usage Just create your own SimpleB

Andreas Tinoco Lobo 169 Sep 14, 2022
A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together!

ver 2.0 NB! Breaking changes in 2.0 - due to a lot of requests EasyAnimation does NOT automatically install itself when imported. You need to enable i

Marin Todorov 3k Dec 27, 2022
DaisyChain is a micro framework which makes UIView animations chaining dead simple.

DaisyChain DaisyChain is a micro framework which makes UIView animations chaining dead simple. It uses the exact same interface you are familiars with

Ali Karagoz 31 Nov 3, 2022
UIView category that adds shake animation

UIView category that adds a shake animation like the password field of the OSX login screen. Screenshot Setup with CocoaPods Add pod 'UIView+Shake' to

Andrea Mazzini 498 Nov 20, 2022
Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle.

Twinkle ✨ Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle. This library creates several CAEmitterLayers and animate

patrick piemonte 600 Nov 24, 2022
Chain multiple UIView animations without endlessly nesting in completion closures.

⛓ Chain multiple UIView animations without endlessly nesting in completion closures. Used in some of the more superfluous animations in the OK Video app.

Pim 78 Dec 26, 2022