da1lbi3 da1lbi3 - 1 year ago 55
Swift Question

Elastic rubber band effect on circle

I want to make an elastic rubber effect when I swipe over my circle. I create my circle on this way:

import UIKit

class ViewController: UIViewController {

let screenSize: CGRect = UIScreen.mainScreen().bounds
let g = ShapeView(origin: CGPoint(x: UIScreen.mainScreen().bounds.width / 2, y: UIScreen.mainScreen().bounds.height / 2))

override func viewDidLoad() {

override func didReceiveMemoryWarning() {
// Dispose of any resources that can be recreated.

override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
for touch: AnyObject in touches {
let location = touch.locationInView(self.view) //Location of your finger
print((location.x / screenSize.width))

self.view.test((location.x / screenSize.width), v: g);


import UIKit

extension UIView {

func test(t : CGFloat, v : UIView){
v.transform = CGAffineTransformMakeScale(CGFloat(t) + 1,1);

class ShapeView: UIView {

let size: CGFloat = 150.0

init(origin: CGPoint) {
super.init(frame: CGRectMake(0.0, 0.0, size, size))
self.center = origin
self.backgroundColor = UIColor.clearColor()

// We need to implement init(coder) to avoid compilation errors
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")

override func drawRect(rect: CGRect) {

var path = UIBezierPath(ovalInRect: rect)


This works as expected. I get this view:

enter image description here
But what I want is that when Im swiping over te image, that its get an 'sticky' effect. Something like this:

enter image description here

The blue line is the middle of te actual circle. And it is pulled to the right. It is becoming an eclipse from the right half of the circle. This is going on touch. So if im moving back it is becoming the circle it was. How can I do this?

Answer Source

Use a scale transform. If the user is pulling to the right, this would be a scale transform whose x component is greater than 1 in proportion to the degree of pull, and whose y component is 1.

Note that transforms are applied around the center by default, so this will also cause the image to shift to the left. I assume that that isn't what you want, so you will also need to compensate at the same time with a translate transform that pushes back to the right.