简体   繁体   English

斯威夫特-如何生动地画线不正确? 只能画直肠吗?

[英]Swift - how to animatedly draw line NOT rect? Can only draw rect?

I have looked around about this before but have yet to find an answer. 我之前已经环顾四周,但尚未找到答案。 I've been at this for a while and need to know how to animate a LINE as opposed to a rectangle. 我已经有一段时间了,需要了解如何为LINE(而非矩形)设置动画。

From what I can see the animation is very different going from a stroke to a box. 从我可以看到的动画中,从笔触到盒子,动画有很大的不同。 Just need some pointers here- 这里只需要一些指针-

I have a border that is drawn on view load (not with an animation, it just draws it) here: 我在视图加载时绘制了一个边框(没有动画,它只是绘制了边框)在这里:

 override public func drawRect(rect: CGRect){
        super.drawRect(rect)

        let borderColor = self.hasError! ? kDefaultActiveColor : kDefaultErrorColor

        let textRect = self.textRectForBounds(rect)

        let context = UIGraphicsGetCurrentContext()
        let borderlines : [CGPoint] = [CGPointMake(0, CGRectGetHeight(textRect) - 1),
            CGPointMake(CGRectGetWidth(textRect), CGRectGetHeight(textRect) - 1)]

        if  self.enabled  {

            CGContextBeginPath(context);
            CGContextAddLines(context, borderlines, 2);
            CGContextSetLineWidth(context, 1.3);
            CGContextSetStrokeColorWithColor(context, borderColor.CGColor);
            CGContextStrokePath(context);

I got this from another answer and am trying to take it apart. 我是从另一个答案中得到的,并试图将其分解。 I need the line to animate/grow out from its centre when the view loads, as in grow to the same width and size as it is drawn here but animated. 当视图加载时,我需要该线从其中心进行动画处理/生长,因为该线的宽度和大小与在此处绘制但具有动画效果的宽度和大小相同。

I do not know how to accomplish this, however another answer achieved the effect I need by setting the border to a size of zero here: 我不知道如何完成此操作,但是另一个答案通过将边框设置为零来达到我需要的效果:

self.activeBorder = UIView(frame: CGRectZero)
self.activeBorder.backgroundColor = kDefaultActiveColor
//self.activeBorder.backgroundColor = kDefaultActiveBorderColor
self.activeBorder.layer.opacity = 0
self.addSubview(self.activeBorder)

and animating using: 并使用以下动画制作:

self.borderlines.transform = CATransform3DMakeScale(CGFloat(0.01), CGFloat(1.0), 1)
self.activeBorder.layer.opacity = 1

CATransaction.begin()
self.activeBorder.layer.transform = CATransform3DMakeScale(CGFloat(0.03), CGFloat(1.0), 1)
let anim2 = CABasicAnimation(keyPath: "transform")
let fromTransform = CATransform3DMakeScale(CGFloat(0.01), CGFloat(1.0), 1)
let toTransform = CATransform3DMakeScale(CGFloat(1.0), CGFloat(1.0), 1)
anim2.fromValue = NSValue(CATransform3D: fromTransform)
anim2.toValue = NSValue(CATransform3D: toTransform)
anim2.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
anim2.fillMode = kCAFillModeForwards
anim2.removedOnCompletion = false
self.activeBorder.layer.addAnimation(anim2, forKey: "_activeBorder")

CATransaction.commit()

This seems to be using entirely different code than my original drawRect and I don't know how to combine the two. 这似乎使用的代码与原始的drawRect完全不同,并且我不知道如何将两者结合起来。 Where am I going wrong here? 我在哪里错了? How can I draw out from the centre my first border as I do the second, active border? 当我做第二个活动边框时,如何从中心画出我的第一个边框?

Use CAShapeLater , UIBezierPath and CABasicAnimation to animatedly draw line. 使用CAShapeLaterUIBezierPathCABasicAnimation动画绘制线条。

Here is the sample code: 这是示例代码:

class SampleView: UIView {

    override public func drawRect(rect: CGRect) {
        let leftPath = UIBezierPath()
        leftPath.moveToPoint(CGPointMake(CGRectGetMidX(frame), CGRectGetHeight(frame)))
        leftPath.addLineToPoint(CGPointMake(0, CGRectGetHeight(frame)))

        let rightPath = UIBezierPath()
        rightPath.moveToPoint(CGPointMake(CGRectGetMidX(frame), CGRectGetHeight(frame)))
        rightPath.addLineToPoint(CGPointMake(CGRectGetWidth(frame), CGRectGetHeight(frame)))

        let leftShapeLayer = CAShapeLayer()
        leftShapeLayer.path = leftPath.CGPath
        leftShapeLayer.strokeColor = UIColor.redColor().CGColor;
        leftShapeLayer.lineWidth = 1.3
        leftShapeLayer.strokeEnd = 0
        layer.addSublayer(leftShapeLayer)

        let rightShpaeLayer = CAShapeLayer()
        rightShpaeLayer.path = rightPath.CGPath
        rightShpaeLayer.strokeColor = UIColor.redColor().CGColor;
        rightShpaeLayer.lineWidth  = 1.3
        rightShpaeLayer.strokeEnd = 0
        layer.addSublayer(rightShpaeLayer)

        let drawLineAnimation = CABasicAnimation(keyPath: "strokeEnd")
        drawLineAnimation.toValue = NSNumber(float: 1)
        drawLineAnimation.duration = 1
        drawLineAnimation.fillMode = kCAFillModeForwards
        drawLineAnimation.removedOnCompletion = false

        leftShapeLayer.addAnimation(drawLineAnimation, forKey: nil)
        rightShpaeLayer.addAnimation(drawLineAnimation, forKey: nil)
    }

}

The code in viewDidLoad of ViewController ViewController viewDidLoad中的代码

// ...
let sampleView = SampleView()
sampleView.frame = CGRectMake(10, 60, 240, 50)
sampleView.backgroundColor = UIColor.lightGrayColor()
view.addSubview(sampleView)

Here is the capture: 这是捕获的内容:

在此处输入图片说明

Note: If you run the code in iOS9 Simulator (I have not tested the earlier version), the animation may get blocked. 注意:如果您在iOS9 Simulator中运行代码(我尚未测试较早版本),则动画可能会被阻止。 Choose to run it in a real device or in iOS10 Simulator. 选择在真实设备或iOS10模拟器中运行它。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM