标签: cashapelayer

我正在使用UIBezierPath和CAShapeLayer绘制一条线并将其作为子层添加到视图中。一切工作正常，现在我必须调整“线”及其父视图的大小，并严格保持线与视图的比例相同。

下面是创建一条线的代码：

let line = UIBezierPath.arrow(from: startPoint, to: endPoint, tailWidth: 5, headWidth: 20, headLength: CGFloat(inputLength * 0.1))
let shapeLayer = CAShapeLayer()
shapeLayer.path = line .cgPath
self.view.layer.addSublayer(shapeLayer)

我在UIView中将CAShapeLayer居中时遇到麻烦。我已经搜索过，大多数解决方案来自2015年以前的Obj C版本，或者尚未解决。

附件是图像的外观。当我检查它时，它在红色视图内，但是idk为什么它没有居中。我试图调整它的大小，但仍然无法正常工作。

let progressView: UIView = {
    let view = UIView()
    view.backgroundColor = .red
    return view
}()

//MARK: - ViewDidLoad
override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(progressView)
progressView.anchor(top: nil, left: nil, bottom: nil, right: nil, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 200, height: 200)
    progressView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    progressView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

    setupCircleLayers()
}

var shapeLayer: CAShapeLayer!

private func setupCircleLayers() {
    let trackLayer = createCircleShapeLayer(strokeColor: UIColor.rgb(red: 56, green: 25, blue: 49, alpha: 1), fillColor: #colorLiteral(red: 0.9686274529, green: …

我有一个CAShapeLayer()顶部有渐变的动画，但不知何故它看起来如下图所示：

怎么看起来是这个样子？

我的代码：

override func viewDidLayoutSubviews() {
    displayLine()
}

override func viewDidAppear(_ animated: Bool) {
    animateStroke()
}

func displayLine() {
    let trackLayer = CAShapeLayer()
    let rect = CGRect(x: topView.frame.width * 0.15, y: topView.frame.size.height / 1.5, width: topView.frame.width * 0.7, height: 2)
    let path = UIBezierPath(roundedRect: rect, cornerRadius: 1)

    trackLayer.path = path.cgPath
    trackLayer.strokeColor = UIColor.groupTableViewBackground.cgColor
    trackLayer.lineWidth = 3
    trackLayer.fillColor = UIColor.clear.cgColor

    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.green.cgColor
    shapeLayer.lineWidth = 4
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeEnd = 0

    topView.layer.addSublayer(trackLayer)
    topView.layer.addSublayer(shapeLayer)

    let …

我正在尝试使用CABasicAnimation关键路径但是对图层路径属性进行动画处理。没有得到准确的结果

我正在寻找的路径动画的变化如下

预期动画

注意：-请忽略开关..我的重点只是从动画circular到moon动画的路径变化

我尝试过什么

这是我尝试获取此路径转换动画的代码

@IBDesignable class CustomView: UIView {

 private lazy var shapeLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
        
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    private func commonInit() {
        shapeLayer.frame = bounds
        shapeLayer.fillColor = UIColor.black.cgColor
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.lineWidth = 3
        layer.addSublayer(shapeLayer)
        
    }
    
    override func layoutSubviews() {
        
        shapeLayer.path = drawSunShape(bounds)
    }
    private func drawSunShape(_ group:CGRect) -> CGPath {
        let bezierPath = UIBezierPath()
        let radius = …

我正在尝试实现与下面所示完全相同的动画

。

我使用 UIBezierPath 和 CABasicAnimation 的输出如下。

这是我的LoaderView代码

class LoaderView: UIView {

private let lineWidth : CGFloat = 5
internal var backgroundMask = CAShapeLayer()


override init(frame: CGRect) {
    super.init(frame: frame)
    setUpLayers()
    createAnimation()
}


required init?(coder: NSCoder) {
    super.init(coder: coder)
    setUpLayers()
    createAnimation()
}

func setUpLayers()
{
    backgroundMask.lineWidth = lineWidth
    backgroundMask.fillColor = nil
    backgroundMask.strokeColor = UIColor.blue.cgColor
    layer.mask = backgroundMask
    layer.addSublayer(backgroundMask)
}

func createAnimation()
{
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.duration = 1
    animation.repeatCount = .infinity
    backgroundMask.add(animation, forKey: …

方法1

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
 [CATransaction begin];
    {
        [CATransaction setAnimationDuration:15];//Dynamic Duration
        [CATransaction setCompletionBlock:^{

        }];

        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
        animation.autoreverses = NO;
        animation.removedOnCompletion = NO;
        animation.fromValue = @0;
        animation.toValue = @1;
        animation.timeOffset = 0;
        animation.fillMode = kCAFillModeForwards;
        [self.pathLayer addAnimation:animation forKey:animationKey];

    }
    [CATransaction commit];

我在我的视图中添加了CAShapeLayer(pathLayer),我想让它在具有笔触效果的视图周围动画,上面的代码可以完成工作,但我的问题是以3个相等的比例更改颜色.所以我假设是重复上面的代码3次,并按相应的顺序更改以下行.

为第1

    animation.fromValue = @0;
    animation.toValue = @(1/3);
    animation.timeOffset = 0;

第二名

    animation.fromValue = @(1/3);
    animation.toValue = @(2/3);
    animation.timeOffset = 0;// I don't know how to exactly set this  active local 
time since the duration which is …

我试图了解如何使用Swift创建三角形.我发现这个代码创建了一个三角形.

class TriangleLayer: CAShapeLayer {

  let innerPadding: CGFloat = 30.0  

  override init() {
    super.init()
    fillColor = Colors.red.CGColor
    strokeColor = Colors.red.CGColor
    lineWidth = 7.0
    lineCap = kCALineCapRound
    lineJoin = kCALineJoinRound
    path = trianglePathSmall.CGPath
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  var trianglePathSmall: UIBezierPath {
     let trianglePath = UIBezierPath()
     trianglePath.moveToPoint(CGPoint(x: 5.0 + innerPadding, y: 95.0))     // #1
     trianglePath.addLineToPoint(CGPoint(x: 50.0, y: 12.5 + innerPadding)) // #2
     trianglePath.addLineToPoint(CGPoint(x: 95.0 - innerPadding, y: 95.0)) // #3
     trianglePath.closePath()
     return trianglePath
 } …

我是iOS新手,我需要做以下动画:

将圆转换为矩形应该是平滑的,但在上面的动画中它不是很平滑.

我所做的是使用本教程中的以下代码创建一个圆和一个矩形:

  Circle : 
        class OvalLayer: CAShapeLayer {

        let animationDuration: CFTimeInterval = 0.3

        override init() {
            super.init()
            fillColor = Colors.red.CGColor
            path = ovalPathSmall.CGPath
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        var ovalPathSmall: UIBezierPath {
            return UIBezierPath(ovalInRect: CGRect(x: 50.0, y: 50.0, width: 0.0, height: 0.0))
        }

        var ovalPathLarge: UIBezierPath {
            return UIBezierPath(ovalInRect: CGRect(x: 2.5, y: 17.5, width: 95.0, height: 95.0))
        }

        var ovalPathSquishVertical: UIBezierPath {
            return UIBezierPath(ovalInRect: CGRect(x: 2.5, y: 20.0, width: 95.0, …

我正在使用swift 2.2并且我正在处理这样的问题:我有一个UIBezier对象的数组,我需要为它们创建一个笔划作为一个路径.

我以前有一个特殊的功能,但这种方法的优点,它创建了几个层.这符合我的要求,因为我需要一层

 func createStroke(line: UIBezierPath) {

        self.currentPath = CAShapeLayer()
        currentPath.path = line.CGPath
        currentPath.strokeColor = UIColor.blackColor().CGColor
        currentPath.fillColor = UIColor.clearColor().CGColor
        currentPath.lineWidth = 1
        self.view.layer.addSublayer(currentPath)

    }

从贝塞尔线阵列创建多路径的最佳方法是什么？第一个想法是创建一个for循环循环,但我认为它不是一个干净的方式.

我想在绘制的路径上为我的拇指图层添加动画效果.我可以根据值为动画层设置动画,但是移动整个图层不起作用.

func setProgress(_ value:Double, _ animated :Bool) {
    let progressAnimation = CABasicAnimation(keyPath: "strokeEnd")
    progressAnimation.duration = animated ? 0.6 : 0.0
    progressAnimation.fromValue = currentValue
    progressAnimation.toValue = value
    progressAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
    progressLayer.strokeEnd = CGFloat(value)
    progressLayer.add(progressAnimation, forKey: "animateprogress")
}

使用此功能,我可以为进度图层设置动画.而且我被困在动画拇指位置上.

我尝试了一些东西,但它没有用.

尝试失败1

    guard let path = thumbLayer.path else {return}
    let center = CGPoint(x: frame.width/2, y: frame.height/2)
    let radius = min(frame.width, frame.height)/2 - max(trackWidth, max(progressWidth, thumbWidth))/2
    let thumbAngle = 2 * .pi * currentValue - (.pi/2)
    let thumbX = CGFloat(cos(thumbAngle)) * radius
    let …