Animated line drawing

Question

I want to have a line in the center of the screen and animate it like a snake

This is the turn-based animation I want to do

How can i do this?

Answer 1

You can animate the end of the move pathon CAShapeLayer, for example,

weak var shapeLayer: CAShapeLayer?

@IBAction func didTapButton(_ sender: Any) {
    // remove old shape layer if any

    self.shapeLayer?.removeFromSuperlayer()

    // create whatever path you want

    let path = UIBezierPath()
    path.move(to: CGPoint(x: 10, y: 50))
    path.addLine(to: CGPoint(x: 200, y: 50))
    path.addLine(to: CGPoint(x: 200, y: 240))

    // create shape layer for that path

    let shapeLayer = CAShapeLayer()
    shapeLayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
    shapeLayer.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor
    shapeLayer.lineWidth = 4
    shapeLayer.path = path.cgPath

    // animate it

    view.layer.addSublayer(shapeLayer)
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.duration = 2
    shapeLayer.add(animation, forKey: "MyAnimation")

    // save shape layer

    self.shapeLayer = shapeLayer
}

This gives:

Clearly, you can change UIBezierPathto what suits you. For example, you may have spaces along the way. Or you don't even need to have straight paths:

let path = UIBezierPath()
path.move(to: CGPoint(x: 10, y: 130))
path.addCurve(to: CGPoint(x: 210, y: 200), controlPoint1: CGPoint(x: 50, y: -100), controlPoint2: CGPoint(x: 100, y: 350))

You can also combine the animation of both the beginning and the end of the move in CAAnimationGroup:

// create shape layer for that path (this defines what the path looks like when the animation is done)

let shapeLayer = CAShapeLayer()
shapeLayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
shapeLayer.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor
shapeLayer.lineWidth = 5
shapeLayer.path = path.cgPath
shapeLayer.strokeStart = 0.8

let startAnimation = CABasicAnimation(keyPath: "strokeStart")
startAnimation.fromValue = 0
startAnimation.toValue = 0.8

let endAnimation = CABasicAnimation(keyPath: "strokeEnd")
endAnimation.fromValue = 0.2
endAnimation.toValue = 1.0

let animation = CAAnimationGroup()
animation.animations = [startAnimation, endAnimation]
animation.duration = 2
shapeLayer.add(animation, forKey: "MyAnimation")

Yielding:

CoreAnimation gives you great control over how a stroked path is rendered.

Answer 2

- - , , CAShapeLayer SKScene.

, :

import SpriteKit
import PlaygroundSupport
import AVFoundation

let start = CGPoint(x: 100, y: 50)
let end = CGPoint(x: 200, y: 50)
let control = CGPoint(x: 150, y: 100);
var motion: SKAction = SKAction();

let radius: CGFloat = 20;
let bounds = CGRect(x: 0, y: 0, width: 400, height: 200)
let skview = SKView(frame: bounds)
PlaygroundPage.current.liveView = skview
PlaygroundPage.current.needsIndefiniteExecution = true

class MyScene: SKScene,AVSpeechSynthesizerDelegate {
    var motionComplete = false
    var redline: SKShapeNode = SKShapeNode();
    var greenball: SKShapeNode = SKShapeNode();
    override func sceneDidLoad() {

        greenball = SKShapeNode(circleOfRadius: radius);
        greenball.position = start;
        greenball.fillColor = .green;

        let motionpath = CGMutablePath();

        motionpath.move(to: start)
        motionpath.addQuadCurve(to: end, control: control)

        motion = SKAction.follow(motionpath, asOffset: false, orientToPath: true,duration: 2);

        let linepath = CGMutablePath();
        linepath.move(to: start);
        redline = SKShapeNode(path: linepath);
        redline.strokeColor = .red;
        redline.lineWidth = 5;

        greenball.run(motion) {
            self.motionComplete = true;
        };

        self.addChild(greenball);
        self.addChild(redline);
    }

    override func update(_ currentTime: TimeInterval) {

        if (motionComplete == false) {
            let cgpath = self.redline.path as! CGMutablePath;
            cgpath.addLine(to: greenball.position);
            self.redline.path = cgpath;

        }
    }


}



let scene = MyScene(size: CGSize(width: 400, height: 200));
scene.scaleMode = SKSceneScaleMode.aspectFill
scene.size = skview.bounds.size
skview.presentScene(scene)

:

Answer 3

UIView . - .

let screenWidth = UIScreen.main.bounds.width
let screenHeight = UIScreen.main.bounds.height
let redLine = UIView()
redline.backgroundColor = UIColor.red
redLine.frame = GCRect(x: screenWidth / 2, y: screenHeight / 2, width: 0, height: 0)

UIView.animate(withDuration: 2, animations: {
    redLine.frame = GCRect(x: screenWidth / 2, y: screenHeight / 2, width: 0, height: (screenHeight / 2) - 4)
}) { finished in
    redLine.frame = GCRect(x: screenWidth / 2, y: (screenHeight / 2) - 4, width: 0, height: 1)
}

.

- . , .

... , , , . Google, , , . , , , .