Question

我在6英寸大小的视图中在屏幕中央创建了这个动画。如果适应让我们说iPhone 5s，我怎么能确保比率保持不变。我不是在谈论自动布局或约束。我在下面添加了动画代码。这可以按照我想要的6英寸大小的方式工作，但同样，当我为iPhone 5s调整大小时，除了动画本身外，一切看起来都很好。我该如何解决这个问题？

[

上面的iphone 6动画画面（这是正确的动画以及我希望它在其他屏幕尺寸上的位置。）

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

动画代码在单独的viewcontroller上打开，这里是：

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)
   }
}

Answer 1

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

不是对这些数字进行硬编码，而是根据超视图边界计算它们。

（但最好使用自动布局定位圆圈动画视图。）

Answer 2

声明设备宽度的变量：

var DEVICE_WIDTH = ""

然后在 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"
    }

然后在 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)

    }

每个屏幕尺寸的中心动画

2 个答案: