VBFJellyView

VBFJellyView is a custom view made out using UIKit Dynamics and with a very funny effect when adding behaviours to it.

Github星跟蹤圖

VBFJellyView

VBFJellyView is a custom view made out using UIKit Dynamics and with a very funny effect when adding behaviours to it.

JellyViewGif

Introduction

This view was inspired by Skype app for iOS.
Apart from that, I have to thank @arekholko for this post. I took from there the trick of using CADisplayLink for changing the path of the CAShapeLayer used in this example.

Find in the following video some examples of stuff you can achieve with this view.

Example Video

How to use it

Download the project. You will find the main view called VBFJellyView. This class has 2 designated initializers:

	//DESIGNATED INITALIZER FOR DEFAULT VALUES
- (id)initWithFrame:(CGRect)frame
      jellyViewSize:(CGSize)viewSize
          fillColor:(UIColor *)jellyViewColor;

//DESIGNATED INITALIZER SETTING YOUR OWN VALUES
- (id) initWithFrame:(CGRect)frame
     jellyViewSize:(CGSize)viewSize
 	      fillColor:(UIColor *)jellyViewColor
 	     elasticity:(CGFloat)elasticity
 	        density:(CGFloat)density
 	        damping:(CGFloat)damping
 	      frequency:(CGFloat)frequency;

Use the first one for default values.
You won’t see anything on the screen until you call:
- (void) show;
By calling that method, the CAShapeLayer used for showing the JellyView will be added as a sublayer.
I have used this approach to make it easier when you subclass it (like you will see in the AlertView example).

By default, VBFJellyView class does not have any behaviour attached to it.

Important
Before knowing how you should interact with it, you should know that VBFJellyView it’s made from 9 subviews, connected to the one next to each other using UIAttachmentBehaviour.
That means, you should add behaviours to this 9 subviews (by accessing jellyView.subviews array). The views are positioned like the figure below illustrates:

Subview Layout

There are 2 ways of interacting with it:

  1. Use its public property mainAnimator to add behaviours (examples 1 and 4).
  2. Subclass it to create your own custom stuff (examples 2 and 3)

I extremely recommend you to visit my blog, victorbaro.com to understand a bit better how VBFJellyView is made.

The project

Inside the project you will find 5 Viewcontrollers:

  1. VBFJellyView with UIPanGestureRecognizer.
  2. JellyButton: a pushBehaviour is applied to the control points (midpoints) when the button is tapped
  3. JellyAlert: using VBFJellyView as AlertView. UIGravityBehaviour and UICollisionBehaviour are used in this example
  4. VBFJellyView with gravity + panGesture + collision
  5. VBFJellyView showing how its made

主要指標

概覽
名稱與所有者victorBaro/VBFJellyView
主編程語言Objective-C
編程語言Objective-C (語言數: 1)
平台
許可證
所有者活动
創建於2014-07-04 05:35:36
推送於2021-08-03 03:26:39
最后一次提交2021-08-03 03:26:39
發布數0
用户参与
星數649
關注者數19
派生數41
提交數15
已啟用問題?
問題數4
打開的問題數0
拉請求數0
打開的拉請求數0
關閉的拉請求數0
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?