我想画一个无限符号,在那条路上,我必须移动一个圆圈来覆盖所有的路径。并且它应该是可定制的,就像某些价值它应该留在左侧而且对于某些价值它会转到另一边。 Is this possible first of all ?
现在我可以绘制一个圆圈,我可以使用以下方法在该路径上移动圆圈:
let circlePath = UIBezierPath(arcCenter: CGPoint(x:self.view.frame.midX, y:self.view.frame.midY), radius: self.view.frame.size.width/3, startAngle: 0, endAngle:CGFloat(Double.pi)*2, clockwise: true)
circlePathSize = circlePath.bounds.size
// circleLayer is only used to locate the circle animation path
circleLayer.path = circlePath.cgPath
circleLayer.strokeColor = UIColor.white.cgColor
circleLayer.shadowColor = UIColor.darkGray.cgColor
circleLayer.shadowOpacity = 7.0
circleLayer.shadowRadius = 2.0
circleLayer.shadowOffset = CGSize(width: -1, height: 0)
circleLayer.lineWidth = 3.0
circleLayer.fillColor = UIColor.clear.cgColor
self.view.layer.addSublayer(circleLayer)
let animation = CAKeyframeAnimation(keyPath: "position");
animation.duration = 5.0
animation.repeatCount = MAXFLOAT
animation.path = circlePath.cgPath
//whatever the value of origin for squareView will not affect the animation
squareView.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
squareView.layer.cornerRadius = 10
squareView.layer.shadowColor = UIColor.darkGray.cgColor
squareView.layer.shadowOpacity = 7.0
squareView.layer.shadowRadius = 3.0
squareView.layer.shadowOffset = CGSize(width: 2, height: 0)
squareView.backgroundColor = UIColor.white
self.view.addSubview(squareView)
// You can also pass any unique string value for key
squareView.layer.add(animation, forKey: nil)
我也可以使用这个绘制正弦曲线:
let origin = CGPoint(x: width * (1 - graphWidth) / 2, y: height * 0.50)
let path = UIBezierPath()
path.move(to: origin)
for angle in stride(from: 5.0, through: 360.0, by: 5.0) {
let x = origin.x + CGFloat(angle/360.0) * width * graphWidth
let y = origin.y - CGFloat(sin(angle/180.0 * Double.pi)) * height * amplitude
path.addLine(to: CGPoint(x: x, y: y))
}
UIColor.white.setStroke()
path.stroke()
但我无法将它们混合起来以获得我想要的东西。任何帮助,将不胜感激。谢谢。
最后我能够实现它。对于想要这样做的人来说,这是我的UIView类:
class InfinitySymbolView: UIView {
var path: UIBezierPath!
let circleLayer = CAShapeLayer()
var circlePathSize:CGSize?
let circleView = UIView()
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.white
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
let height = self.frame.height
let width = self.frame.width
let heightFactor = height/4
let widthFactor = width/4
path = UIBezierPath()
path.lineWidth = 3.0
path.move(to: CGPoint(x:widthFactor, y: heightFactor * 3))
path.addCurve(to: CGPoint(x:widthFactor, y: heightFactor), controlPoint1: CGPoint(x:0, y: heightFactor * 3), controlPoint2: CGPoint(x:0, y: heightFactor))
path.move(to: CGPoint(x:widthFactor, y: heightFactor))
path.addCurve(to: CGPoint(x:widthFactor * 3, y: heightFactor * 3), controlPoint1: CGPoint(x:widthFactor * 2, y: heightFactor), controlPoint2: CGPoint(x:widthFactor * 2, y: heightFactor * 3))
path.move(to: CGPoint(x:widthFactor * 3, y: heightFactor * 3))
path.addCurve(to: CGPoint(x:widthFactor * 3, y: heightFactor), controlPoint1: CGPoint(x:widthFactor * 4 + 5, y: heightFactor * 3), controlPoint2: CGPoint(x:widthFactor * 4 + 5, y: heightFactor))
path.move(to: CGPoint(x:widthFactor * 3, y: heightFactor))
path.addCurve(to: CGPoint(x:widthFactor, y: heightFactor * 3), controlPoint1: CGPoint(x:widthFactor * 2, y: heightFactor), controlPoint2: CGPoint(x:widthFactor * 2, y: heightFactor * 3))
UIColor.purple.setStroke()
path.stroke()
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.fillColor = UIColor.clear.cgColor
self.layer.addSublayer(shapeLayer)
animateCircleOnPath()
}
func animateCircleOnPath(){
let animation = CAKeyframeAnimation(keyPath: "position");
animation.duration = 5.0
animation.repeatCount = MAXFLOAT
animation.path = path.cgPath
circleView.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
circleView.layer.cornerRadius = 10
circleView.layer.shadowColor = UIColor.darkGray.cgColor
circleView.layer.shadowOpacity = 7.0
circleView.layer.shadowRadius = 3.0
circleView.layer.shadowOffset = CGSize(width: 2, height: 0)
circleView.backgroundColor = UIColor.white
self.addSubview(circleView)
circleView.layer.add(animation, forKey: nil)
}
}
对于仍然使用Objective-C的旧守卫:
float loopHeight = 50;
float loopWidth = 80;
float heightFactor = loopHeight / 4;
float widthFactor = loopWidth / 4;
UIView * infinityView = [UIView new];
infinityView.frame = CGRectMake((w-loopWidth)/2, h-loopHeight-20, loopWidth, loopHeight);
[self.view addSubview:infinityView];
UIBezierPath * infinityPath = [UIBezierPath bezierPath];
[infinityPath moveToPoint:CGPointMake(widthFactor, heightFactor * 3)];
[infinityPath addCurveToPoint:CGPointMake(widthFactor, heightFactor) controlPoint1:CGPointMake(0, heightFactor * 3) controlPoint2:CGPointMake(0, heightFactor)];
[infinityPath addCurveToPoint:CGPointMake(widthFactor * 3, heightFactor * 3) controlPoint1:CGPointMake(widthFactor * 2, heightFactor) controlPoint2:CGPointMake(widthFactor * 2, heightFactor * 3)];
[infinityPath addCurveToPoint:CGPointMake(widthFactor * 3, heightFactor) controlPoint1:CGPointMake(widthFactor * 4, heightFactor * 3) controlPoint2:CGPointMake(widthFactor * 4, heightFactor)];
[infinityPath addCurveToPoint:CGPointMake(widthFactor, heightFactor * 3) controlPoint1:CGPointMake(widthFactor * 2, heightFactor) controlPoint2:CGPointMake(widthFactor * 2, heightFactor * 3)];
CAShapeLayer * infinityShape = [CAShapeLayer layer];
infinityShape.path = infinityPath.CGPath;
infinityShape.lineWidth = 3.0f;
infinityShape.strokeColor = [UIColor whiteColor].CGColor;
infinityShape.fillColor = [UIColor clearColor].CGColor;
[infinityView.layer addSublayer:infinityShape];