Centre animation on every screen size

Question

I created this animation in the centre of the screen on a 6-inch size view. How can I make sure the ratio stays the same when it adapts to let's say an iPhone 5s. I'm not talking about Auto-Layout or constraints. I added the animation code below. This works the way I want it in a 6-inch size, but again, When I resize everything for iPhone 5s, Everything looks fine, besides the animation itself. How can I fix this?

[

iphone 6 animation screen above (This is the correct animation and how I want it to be position on the other screen size.)

override func viewDidLoad() 
    super.viewDidLoad() {
    circleAnimationView.frame = CGRect(x: 20.0, y: 90.0, width: 300, height: 300)
    self.view.addSubview(circleAnimationView)
    }

The animation code is on on seperate viewcontroller, here it is:

import UIKit

class CirlceAnimationView: UIView {

var replicatorLayer1 = CAReplicatorLayer()
var dot = CALayer()

// Animation starts running

func animation2() {

    // A layer that creates a specified number of copies of its sublayers (the source layer), each copy potentially having geometric, temporal, and color transformations applied to it.
    replicatorLayer1 = CAReplicatorLayer()

    // The layer’s bounds rectangle. Animatable.

    replicatorLayer1.bounds = self.bounds

    // The radius to use when drawing rounded corners for the layer’s background. Animatable.
    replicatorLayer1.cornerRadius = 10.0

    // The background color of the receiver. Animatable.
    replicatorLayer1.backgroundColor = UIColor(white: 0.0, alpha: 0.0).cgColor

    // The layer’s position in its superlayer’s coordinate space. Animatable.
    replicatorLayer1.position = self.center

    // calling this method creates an array for that property and adds the specified layer to it.
    self.layer.addSublayer(replicatorLayer1)


    // connectng the animation to the content

    // An object that manages image-based content and allows you to perform animations on that content
    dot = CALayer()

    // The layer’s bounds rectangle. Animatable.
    dot.bounds = CGRect(x: 0.0, y: 0.0, width: 12.0, height: 12.0)

    //The layer’s position in its superlayer’s coordinate space. Animatable.
    dot.position = CGPoint(x: 150.0, y: 40.0)

    //The background color of the receiver. Animatable.
    dot.backgroundColor = UIColor(white: 0.2, alpha: 1.0).cgColor

    // The color of the layer’s border. Animatable.
    dot.borderColor = UIColor(white: 1.0, alpha: 1.0).cgColor

    // The width of the layer’s border. Animatable.
    dot.borderWidth = 1.0

    //The radius to use when drawing rounded corners for the layer’s background. Animatable.
    dot.cornerRadius = 5.0


    //Appends the layer to the layer’s list of sublayers.
    replicatorLayer1.addSublayer(dot)

    // number of copies of layer is instanceCount

    let nrDots: Int = 1000

    //The number of copies to create, including the source layers.
    replicatorLayer1.instanceCount = nrDots

    // The basic type for floating-point scalar values in Core Graphics and related frameworks.
    let angle = CGFloat(2*M_PI) / CGFloat(nrDots)

    // The transform matrix applied to the previous instance to produce the current instance. Animatable.
    replicatorLayer1.instanceTransform = CATransform3DMakeRotation(angle, 0.0, 0.0, 1.0)

    // Type used to represent elapsed time in seconds.
    let duration: CFTimeInterval = 10.0

    // animation capabilities for a layer property.

    // An object that provides basic, single-keyframe animation capabilities for a layer property.
    let shrink = CABasicAnimation(keyPath: "transform.scale")

    // Defines the value the receiver uses to start interpolation.
    shrink.fromValue = 1.0

    // Defines the value the receiver uses to end interpolation.
    shrink.toValue = 0.1

    // Specifies the basic duration of the animation, in seconds.
    shrink.duration = duration

    // Determines the number of times the animation will repeat.
    shrink.repeatCount = Float.infinity

    // Add the specified animation object to the layer’s render tree.
    dot.add(shrink, forKey: "shrink")

    // Specifies the delay, in seconds, between replicated copies. Animatable.
    replicatorLayer1.instanceDelay = duration/Double(nrDots)

    // The transform applied to the layer’s contents. Animatable.
    dot.transform = CATransform3DMakeScale(0.01, 0.01, 0.01)
   }
}

see this http://stackoverflow.com/questions/11251988/how-to-center-a-subview-of-uiview — Anbu.Karthik, Mar 05 '17 at 04:14

score 0 · Answer 1 · answered Mar 05 '17 at 04:00

0

circleAnimationView.frame = CGRect(x: 20.0, y: 90.0, width: 300, height: 300)

Instead of hard coding those numbers, calculate them based on the superview bounds.

(But it would be better to position the circle animation view using auto layout.)

answered Mar 05 '17 at 04:00

matt

515,959
87
875
1,141

Thanks for the help. What would be the best way to go about using auto layout to sort this out? How could I make the animation an image view and the set the layout? – Mar 05 '17 at 04:10

score 0 · Accepted Answer · answered Mar 05 '17 at 16:03

Declare a variable for device width :

var DEVICE_WIDTH = ""

Then in ViewDidLoad :

let screenSize: CGRect = UIScreen.main.bounds
let screenWidth = screenSize.width
print(screenWidth)

 // Detect the screen width (format purpose)
 switch screenWidth {

    case 320.0:
        DEVICE_WIDTH = "320"
    case 375.0:
        DEVICE_WIDTH = "375"
    case 414.0:
        DEVICE_WIDTH = "414"
    default:    //320.0
        DEVICE_WIDTH = "320"
    }

Then in viewDidAppear :

 switch DEVICE_WIDTH { 

    case "375": // 4/5
    // according to your need    
    circleAnimationView.frame = CGRect(x: 20.0, y: 90.0, width: 250, height: 250)

    case "414": //6    
    circleAnimationView.frame = CGRect(x: 20.0, y: 90.0, width: 300, height: 300)

    default: //6+ (414)    
    // according to your need    
    circleAnimationView.frame = CGRect(x: 20.0, y: 90.0, width: 350, height: 350)

    }

Centre animation on every screen size

2 Answers2