画线动画
Draw line animated
我想在屏幕中央有一条线，让它像蛇一样动画
这是我要制作的分步动画
我该怎么做？
一种方法是使用具有背景颜色的 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)
}
有了这个，你可以实现任意量的红线移动。
另一种方法是实际画一条线。我不会详细介绍，但会推荐 this article。
最后一件事...关于堆栈溢出，我们感谢那些表明他们在提出问题之前已对主题进行了适当研究的人。使用 google，我能够快速想出许多关于如何做你正在寻找的东西的教程。尝试自己进行研究，因为教程通常包含比堆栈溢出答案重要得多的详细信息。
您可以在 CAShapeLayer 上为 path 的笔划末端设置动画，例如，
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
}
结果：
显然，您可以将 UIBezierPath 更改为您感兴趣的任何内容。例如，路径中可以有空格。或者你甚至不需要直线路径：
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))
您还可以在 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")
产量：
CoreAnimation 使您可以对描边路径的渲染方式进行大量控制。
我的需求与此类似 - 想让形状的运动在场景中追踪一条线，但是很难将 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)
结果：
这个技术也可以用，它添加为边框你可以按照你的方式塑造它。首先创建一个路径，然后相应地在其上画线
let path = UIBezierPath()
我已经根据需要给了x,y值，你可以根据自己的需要改
path.move(to: CGPoint(x: 134, y: 209))//
path.addLine(to: CGPoint(x: (131 + 93), y: 209))// for drawing line
path.addQuadCurve(to: CGPoint(x: (131 + 97), y: 212) , controlPoint: CGPoint(x: (131 + 93), y: 209))// for drawing a curve
path.addLine(to: CGPoint(x: (131 + 97) , y: (209 + 33 )))
path.addQuadCurve(to: CGPoint(x: (131 + 93), y: (209 + 37)), controlPoint: CGPoint(x: (131 + 97) , y: (209 + 33 )))
path.addLine(to: CGPoint(x: 135, y: (209 + 37)))
path.addQuadCurve(to: CGPoint(x: 131, y: 209 + 33), controlPoint: CGPoint(x: 135, y: 209 + 37))
path.addLine(to: CGPoint(x: 131, y: 213))
path.addQuadCurve(to: CGPoint(x: 134, y: 209), controlPoint:CGPoint(x: 131, y: 213) )
let shapelayer = CAShapeLayer()//create shape layer object
shapelayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
shapelayer.strokeColor = #colorLiteral(red: 0.06274510175, green: 0, blue: 0.1921568662, alpha: 1).cgColor
shapelayer.lineWidth = 2
shapelayer.path = path.cgPath
view.layer.addSublayer(shapelayer)
let animation = CABasicAnimation(keyPath: "strokeEnd")// create animation and add it to shape layer
animation.fromValue = 0
animation.duration = 3
shapelayer.add(animation, forKey: "MyAnimation")
self.shapelayer = shapelayer
就是这样。希望它可以帮助某人，因为我在几个小时的努力后也实现了这一点，因为没有找到确切的解决方案。还要检查这个 link：
我想在屏幕中央有一条线，让它像蛇一样动画
这是我要制作的分步动画
我该怎么做？
一种方法是使用具有背景颜色的 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)
}
有了这个，你可以实现任意量的红线移动。
另一种方法是实际画一条线。我不会详细介绍，但会推荐 this article。
最后一件事...关于堆栈溢出，我们感谢那些表明他们在提出问题之前已对主题进行了适当研究的人。使用 google，我能够快速想出许多关于如何做你正在寻找的东西的教程。尝试自己进行研究，因为教程通常包含比堆栈溢出答案重要得多的详细信息。
您可以在 CAShapeLayer 上为 path 的笔划末端设置动画，例如，
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
}
结果：
显然，您可以将 UIBezierPath 更改为您感兴趣的任何内容。例如，路径中可以有空格。或者你甚至不需要直线路径：
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))
您还可以在 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")
产量：
CoreAnimation 使您可以对描边路径的渲染方式进行大量控制。
我的需求与此类似 - 想让形状的运动在场景中追踪一条线，但是很难将 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)
结果：
这个技术也可以用，它添加为边框你可以按照你的方式塑造它。首先创建一个路径，然后相应地在其上画线
let path = UIBezierPath()
我已经根据需要给了x,y值，你可以根据自己的需要改
path.move(to: CGPoint(x: 134, y: 209))//
path.addLine(to: CGPoint(x: (131 + 93), y: 209))// for drawing line
path.addQuadCurve(to: CGPoint(x: (131 + 97), y: 212) , controlPoint: CGPoint(x: (131 + 93), y: 209))// for drawing a curve
path.addLine(to: CGPoint(x: (131 + 97) , y: (209 + 33 )))
path.addQuadCurve(to: CGPoint(x: (131 + 93), y: (209 + 37)), controlPoint: CGPoint(x: (131 + 97) , y: (209 + 33 )))
path.addLine(to: CGPoint(x: 135, y: (209 + 37)))
path.addQuadCurve(to: CGPoint(x: 131, y: 209 + 33), controlPoint: CGPoint(x: 135, y: 209 + 37))
path.addLine(to: CGPoint(x: 131, y: 213))
path.addQuadCurve(to: CGPoint(x: 134, y: 209), controlPoint:CGPoint(x: 131, y: 213) )
let shapelayer = CAShapeLayer()//create shape layer object
shapelayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
shapelayer.strokeColor = #colorLiteral(red: 0.06274510175, green: 0, blue: 0.1921568662, alpha: 1).cgColor
shapelayer.lineWidth = 2
shapelayer.path = path.cgPath
view.layer.addSublayer(shapelayer)
let animation = CABasicAnimation(keyPath: "strokeEnd")// create animation and add it to shape layer
animation.fromValue = 0
animation.duration = 3
shapelayer.add(animation, forKey: "MyAnimation")
self.shapelayer = shapelayer
就是这样。希望它可以帮助某人，因为我在几个小时的努力后也实现了这一点，因为没有找到确切的解决方案。还要检查这个 link：