Swift Animate lines with dots
0
I have created multiple circles (points) using CAShapeLayer and multiple lines connecting to those circles. Then i animate those circles. what i want to do is animate connected lines along with dots. But only circles are animating not the lines. How can i achieve this? is there a way to update lines position?`
`
var points: [CAShapeLayer] =
let positions: [CGPoint] = [CGPoint(x: 70, y: 100),
CGPoint(x: 140, y: 100),
CGPoint(x: 210, y: 100),
CGPoint(x: 70, y: 200),
CGPoint(x: 140, y: 200),
CGPoint(x: 210, y: 200)]
var lines:[CAShapeLayer] =
override func viewWillAppear(_ animated: Bool)
super.viewWillAppear(animated)
createPoints()
override func viewDidLoad()
super.viewDidLoad()
func createPoints()
for (index,position) in positions.enumerated()
let point = CAShapeLayer()
point.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 10, height: 10), cornerRadius: 5).cgPath
point.frame = CGRect(x: position.x, y: position.y, width: 10, height: 10)
point.fillColor = UIColor.red.cgColor
points.append(point)
view.layer.addSublayer(points[index])
animatePosition(point: points[0])
drawLines()
func drawLines()
for (index,_) in positions.enumerated()
let path = UIBezierPath()
//Not completed
//set line's start position to dots position
path.move(to: points[index].position)
//set line's end position to dots position
path.addLine(to: points[index+1].position)
let line = CAShapeLayer()
line.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
line.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor
line.lineWidth = 1
line.strokeStart = 0
line.path = path.cgPath
lines.append(line)
view.layer.addSublayer(line)
func animatePosition(point: CAShapeLayer)
let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = [10, 10 ]
animation.toValue = [100, 100]
animation.autoreverses = true
animation.repeatCount = .infinity
animation.isAdditive = true
point.add(animation, forKey: "pointStart")
// line.add(animation, forKey: "positionLine")
self.view.setNeedsLayout()
What i want is some thing like this:
ios swift calayer uibezierpath cabasicanimation
asked Nov 14 '18 at 10:16
NickNick
3810
|
show 1 more comment
0
I have created multiple circles (points) using CAShapeLayer and multiple lines connecting to those circles. Then i animate those circles. what i want to do is animate connected lines along with dots. But only circles are animating not the lines. How can i achieve this? is there a way to update lines position?`
`
var points: [CAShapeLayer] =
let positions: [CGPoint] = [CGPoint(x: 70, y: 100),
CGPoint(x: 140, y: 100),
CGPoint(x: 210, y: 100),
CGPoint(x: 70, y: 200),
CGPoint(x: 140, y: 200),
CGPoint(x: 210, y: 200)]
var lines:[CAShapeLayer] =
override func viewWillAppear(_ animated: Bool)
super.viewWillAppear(animated)
createPoints()
override func viewDidLoad()
super.viewDidLoad()
func createPoints()
for (index,position) in positions.enumerated()
let point = CAShapeLayer()
point.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 10, height: 10), cornerRadius: 5).cgPath
point.frame = CGRect(x: position.x, y: position.y, width: 10, height: 10)
point.fillColor = UIColor.red.cgColor
points.append(point)
view.layer.addSublayer(points[index])
animatePosition(point: points[0])
drawLines()
func drawLines()
for (index,_) in positions.enumerated()
let path = UIBezierPath()
//Not completed
//set line's start position to dots position
path.move(to: points[index].position)
//set line's end position to dots position
path.addLine(to: points[index+1].position)
let line = CAShapeLayer()
line.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
line.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor
line.lineWidth = 1
line.strokeStart = 0
line.path = path.cgPath
lines.append(line)
view.layer.addSublayer(line)
func animatePosition(point: CAShapeLayer)
let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = [10, 10 ]
animation.toValue = [100, 100]
animation.autoreverses = true
animation.repeatCount = .infinity
animation.isAdditive = true
point.add(animation, forKey: "pointStart")
// line.add(animation, forKey: "positionLine")
self.view.setNeedsLayout()
What i want is some thing like this:
ios swift calayer uibezierpath cabasicanimation
asked Nov 14 '18 at 10:16
NickNick
3810
you want to show the seven dots initially (without animation) and then animate a line that joins all the dots? Is that what you want?
– Jen Jose
Nov 14 '18 at 10:27
@JenJose Thank you for the reply, i have updated the question with an animated gif. That is what i want to accomplish. Please suggest me a way
– Nick
Nov 14 '18 at 11:10
1
I don't think this is something which you can do with Beizier paths. Becuase the beizier path points are drawn in 2D and the gif cleary shows that the points are in 3D and are rotating there. check this stackoverflow.com/questions/28190604/scnshape-with-bezier-path
– Jen Jose
Nov 14 '18 at 14:15
1
Here is an example in iOS: stackoverflow.com/questions/43740338/…
– E.Coms
Nov 14 '18 at 15:06
@JenJose i doesn't have to be in 3D space.I only need the movement. basically move the lines along with the dots.
– Nick
Nov 14 '18 at 18:09
|
show 1 more comment
0
0
0
1
I have created multiple circles (points) using CAShapeLayer and multiple lines connecting to those circles. Then i animate those circles. what i want to do is animate connected lines along with dots. But only circles are animating not the lines. How can i achieve this? is there a way to update lines position?`
`
var points: [CAShapeLayer] =
let positions: [CGPoint] = [CGPoint(x: 70, y: 100),
CGPoint(x: 140, y: 100),
CGPoint(x: 210, y: 100),
CGPoint(x: 70, y: 200),
CGPoint(x: 140, y: 200),
CGPoint(x: 210, y: 200)]
var lines:[CAShapeLayer] =
override func viewWillAppear(_ animated: Bool)
super.viewWillAppear(animated)
createPoints()
override func viewDidLoad()
super.viewDidLoad()
func createPoints()
for (index,position) in positions.enumerated()
let point = CAShapeLayer()
point.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 10, height: 10), cornerRadius: 5).cgPath
point.frame = CGRect(x: position.x, y: position.y, width: 10, height: 10)
point.fillColor = UIColor.red.cgColor
points.append(point)
view.layer.addSublayer(points[index])
animatePosition(point: points[0])
drawLines()
func drawLines()
for (index,_) in positions.enumerated()
let path = UIBezierPath()
//Not completed
//set line's start position to dots position
path.move(to: points[index].position)
//set line's end position to dots position
path.addLine(to: points[index+1].position)
let line = CAShapeLayer()
line.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
line.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor
line.lineWidth = 1
line.strokeStart = 0
line.path = path.cgPath
lines.append(line)
view.layer.addSublayer(line)
func animatePosition(point: CAShapeLayer)
let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = [10, 10 ]
animation.toValue = [100, 100]
animation.autoreverses = true
animation.repeatCount = .infinity
animation.isAdditive = true
point.add(animation, forKey: "pointStart")
// line.add(animation, forKey: "positionLine")
self.view.setNeedsLayout()
What i want is some thing like this:
ios swift calayer uibezierpath cabasicanimation
asked Nov 14 '18 at 10:16
NickNick
3810
I have created multiple circles (points) using CAShapeLayer and multiple lines connecting to those circles. Then i animate those circles. what i want to do is animate connected lines along with dots. But only circles are animating not the lines. How can i achieve this? is there a way to update lines position?`
`
var points: [CAShapeLayer] =
let positions: [CGPoint] = [CGPoint(x: 70, y: 100),
CGPoint(x: 140, y: 100),
CGPoint(x: 210, y: 100),
CGPoint(x: 70, y: 200),
CGPoint(x: 140, y: 200),
CGPoint(x: 210, y: 200)]
var lines:[CAShapeLayer] =
override func viewWillAppear(_ animated: Bool)
super.viewWillAppear(animated)
createPoints()
override func viewDidLoad()
super.viewDidLoad()
func createPoints()
for (index,position) in positions.enumerated()
let point = CAShapeLayer()
point.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 10, height: 10), cornerRadius: 5).cgPath
point.frame = CGRect(x: position.x, y: position.y, width: 10, height: 10)
point.fillColor = UIColor.red.cgColor
points.append(point)
view.layer.addSublayer(points[index])
animatePosition(point: points[0])
drawLines()
func drawLines()
for (index,_) in positions.enumerated()
let path = UIBezierPath()
//Not completed
//set line's start position to dots position
path.move(to: points[index].position)
//set line's end position to dots position
path.addLine(to: points[index+1].position)
let line = CAShapeLayer()
line.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
line.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor
line.lineWidth = 1
line.strokeStart = 0
line.path = path.cgPath
lines.append(line)
view.layer.addSublayer(line)
func animatePosition(point: CAShapeLayer)
let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = [10, 10 ]
animation.toValue = [100, 100]
animation.autoreverses = true
animation.repeatCount = .infinity
animation.isAdditive = true
point.add(animation, forKey: "pointStart")
// line.add(animation, forKey: "positionLine")
self.view.setNeedsLayout()
What i want is some thing like this:
ios swift calayer uibezierpath cabasicanimation
ios swift calayer uibezierpath cabasicanimation
asked Nov 14 '18 at 10:16
NickNick
3810
asked Nov 14 '18 at 10:16
NickNick
3810
edited Nov 14 '18 at 11:08
Nick
asked Nov 14 '18 at 10:16
NickNick
3810
asked Nov 14 '18 at 10:16
NickNick
3810
asked Nov 14 '18 at 10:16
NickNick
3810
3810
you want to show the seven dots initially (without animation) and then animate a line that joins all the dots? Is that what you want?
– Jen Jose
Nov 14 '18 at 10:27
@JenJose Thank you for the reply, i have updated the question with an animated gif. That is what i want to accomplish. Please suggest me a way
– Nick
Nov 14 '18 at 11:10
1
I don't think this is something which you can do with Beizier paths. Becuase the beizier path points are drawn in 2D and the gif cleary shows that the points are in 3D and are rotating there. check this stackoverflow.com/questions/28190604/scnshape-with-bezier-path
– Jen Jose
Nov 14 '18 at 14:15
1
Here is an example in iOS: stackoverflow.com/questions/43740338/…
– E.Coms
Nov 14 '18 at 15:06
@JenJose i doesn't have to be in 3D space.I only need the movement. basically move the lines along with the dots.
– Nick
Nov 14 '18 at 18:09
|
show 1 more comment
you want to show the seven dots initially (without animation) and then animate a line that joins all the dots? Is that what you want?
– Jen Jose
Nov 14 '18 at 10:27
@JenJose Thank you for the reply, i have updated the question with an animated gif. That is what i want to accomplish. Please suggest me a way
– Nick
Nov 14 '18 at 11:10
1
I don't think this is something which you can do with Beizier paths. Becuase the beizier path points are drawn in 2D and the gif cleary shows that the points are in 3D and are rotating there. check this stackoverflow.com/questions/28190604/scnshape-with-bezier-path
– Jen Jose
Nov 14 '18 at 14:15
1
Here is an example in iOS: stackoverflow.com/questions/43740338/…
– E.Coms
Nov 14 '18 at 15:06
@JenJose i doesn't have to be in 3D space.I only need the movement. basically move the lines along with the dots.
– Nick
Nov 14 '18 at 18:09
you want to show the seven dots initially (without animation) and then animate a line that joins all the dots? Is that what you want?
– Jen Jose
Nov 14 '18 at 10:27
you want to show the seven dots initially (without animation) and then animate a line that joins all the dots? Is that what you want?
– Jen Jose
Nov 14 '18 at 10:27
@JenJose Thank you for the reply, i have updated the question with an animated gif. That is what i want to accomplish. Please suggest me a way
– Nick
Nov 14 '18 at 11:10
@JenJose Thank you for the reply, i have updated the question with an animated gif. That is what i want to accomplish. Please suggest me a way
– Nick
Nov 14 '18 at 11:10
1
1
I don't think this is something which you can do with Beizier paths. Becuase the beizier path points are drawn in 2D and the gif cleary shows that the points are in 3D and are rotating there. check this stackoverflow.com/questions/28190604/scnshape-with-bezier-path
– Jen Jose
Nov 14 '18 at 14:15
I don't think this is something which you can do with Beizier paths. Becuase the beizier path points are drawn in 2D and the gif cleary shows that the points are in 3D and are rotating there. check this stackoverflow.com/questions/28190604/scnshape-with-bezier-path
– Jen Jose
Nov 14 '18 at 14:15
1
1
Here is an example in iOS: stackoverflow.com/questions/43740338/…
– E.Coms
Nov 14 '18 at 15:06
Here is an example in iOS: stackoverflow.com/questions/43740338/…
– E.Coms
Nov 14 '18 at 15:06
@JenJose i doesn't have to be in 3D space.I only need the movement. basically move the lines along with the dots.
– Nick
Nov 14 '18 at 18:09
@JenJose i doesn't have to be in 3D space.I only need the movement. basically move the lines along with the dots.
– Nick
Nov 14 '18 at 18:09
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297762%2fswift-animate-lines-with-dots%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297762%2fswift-animate-lines-with-dots%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you want to show the seven dots initially (without animation) and then animate a line that joins all the dots? Is that what you want?
– Jen Jose
Nov 14 '18 at 10:27
@JenJose Thank you for the reply, i have updated the question with an animated gif. That is what i want to accomplish. Please suggest me a way
– Nick
Nov 14 '18 at 11:10
1
I don't think this is something which you can do with Beizier paths. Becuase the beizier path points are drawn in 2D and the gif cleary shows that the points are in 3D and are rotating there. check this stackoverflow.com/questions/28190604/scnshape-with-bezier-path
– Jen Jose
Nov 14 '18 at 14:15
1
Here is an example in iOS: stackoverflow.com/questions/43740338/…
– E.Coms
Nov 14 '18 at 15:06
@JenJose i doesn't have to be in 3D space.I only need the movement. basically move the lines along with the dots.
– Nick
Nov 14 '18 at 18:09