let path = CGMutablePath()
path.move(to: CGPoint(x:0.0, y:10.5))
path.addLine(to: CGPoint(x: (self.frame.width/2), y:20.5))
let pathInit = CGMutablePath()
pathInit.move(to: CGPoint(x: 0, y:0))
pathInit.addLine(to: CGPoint(x: self.frame.width/2, y: 0))
// update the path property on the mask layer, using a CATransaction to prevent an implicit animation
let mask = CAShapeLayer()
mask.path = pathInit
let maskLayer: CAShapeLayer = CAShapeLayer()
maskLayer.path = pathInit
self.layer.mask = maskLayer
let anim = CABasicAnimation(keyPath: "path")
anim.fromValue = maskLayer.path
anim.toValue = path
anim.duration = 0.25
anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
maskLayer.add(anim, forKey: nil)
CATransaction.begin()
CATransaction.setDisableActions(true)
maskLayer.path = path
CATransaction.commit()
After I migrate to swift 3 this function not work, I think it because CABasicAnimation or CGMutablePath
please help,
Related
I am working on an animation where an image moves with line in a curved path. I am able to draw the line and also move the plane but I am getting a black filled up part in the path. How do I remove it? Please check here
Following is my code to create the animation:
func animate(image: UIView, fromPoint start: CGPoint, toPoint end: CGPoint) {
// The animation
let animation = CAKeyframeAnimation(keyPath: "strokeEnd")
// Animation's path
let path = UIBezierPath()
// Move the "cursor" to the start
path.move(to: start)
path.addLine(to: start)
// Calculate the control points
let c1 = CGPoint(x: end.x - 30, y: start.y)
let c2 = CGPoint(x: end.x, y: start.y - 30)
// Draw a curve towards the end, using control points
path.addCurve(to: end, controlPoint1: c1, controlPoint2: c2)
// Use this path as the animation's path (casted to CGPath)
animation.path = path.cgPath
// The other animations properties
animation.fillMode = CAMediaTimingFillMode.forwards
animation.isRemovedOnCompletion = false
animation.duration = 3.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
// Apply it
image.layer.add(animation, forKey: "position")
let shapeLayer = CAShapeLayer()
shapeLayer.strokeColor = R.color.MyPurple()?.cgColor
shapeLayer.lineWidth = 3
shapeLayer.path = path.cgPath
self.view.layer.addSublayer(shapeLayer)
}
Please add following line:
shapeLayer.fillColor = UIColor.clear.cgColor
I have an animation where a line is drawn and then with that another image moves. The animation works good but as the animation completes the image disappears from the view. The image should stay after completion of the animation. My code for the animation:
private func addPlaneAnimation() {
let image = UIImageView(frame: CGRect(x: -30, y: view.height*0.8, width: 30, height: 30))
image.image = R.image.plane()
view.addSubview(image)
let path = UIBezierPath()
path.move(to: image.center)
path.addLine(to: CGPoint(x: (view.width*0.85), y: (view.height*0.40)))
let shapeLayer = CAShapeLayer()
shapeLayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
shapeLayer.strokeColor = R.color.Purple()?.cgColor
shapeLayer.lineWidth = 3
shapeLayer.path = path.cgPath
view.layer.addSublayer(shapeLayer)
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.duration = 4
animation.beginTime = CACurrentMediaTime() + 0.2
animation.isRemovedOnCompletion = false
let pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.path = path.cgPath
pathAnimation.duration = 4
pathAnimation.autoreverses = false
pathAnimation.isRemovedOnCompletion = false
shapeLayer.add(animation, forKey: "MyAnimation")
image.layer.add(pathAnimation, forKey: "position")
view.bringSubviewToFront(cardBarcode)
}
Can someone please help me here?
Just add two more properties.
For strokeEnd animation
animation.fillMode = CAMediaTimingFillMode.backwards
and for pathAnimation
pathAnimation.fillMode = CAMediaTimingFillMode.forwards
Here is my code to draw dashed line
func drawLine() {
let shapeLayer = CAShapeLayer()
shapeLayer.bounds = viewDraw.bounds
shapeLayer.position = CGPoint(x: viewDraw.bounds.width/2, y: viewDraw.bounds.height/2)
shapeLayer.fillColor = nil
shapeLayer.strokeColor = ColorConstants.ThemeColor.cgColor
shapeLayer.lineWidth = 3
shapeLayer.lineJoin = CAShapeLayerLineJoin.round // Updated in swift 4.2
shapeLayer.lineDashPattern = [10]
let path = UIBezierPath(roundedRect: viewDraw.bounds, cornerRadius: viewDraw.bounds.size.height/2)
shapeLayer.path = path.cgPath
viewDraw.layer.addSublayer(shapeLayer)
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.duration = 1
shapeLayer.add(animation, forKey: "MyAnimation")
}
Now as per my screenshot I want to animate blue dot to red dot within that dashed line infinite time. When blue dot reaches red dot then it will start again with blue dot points.
Note: This whole screen is dynamic so, Line draw is also dynamic according to screen height
Any help would be appreciated
You are almost there
Now you have to add animation using CAKeyframeAnimation which has property path where you can pass the path where you want to animate
here is working sample code
func drawLine() {
let shapeLayer = CAShapeLayer()
shapeLayer.bounds = self.view.bounds
shapeLayer.position = CGPoint(x: self.view.bounds.width/2, y: self.view.bounds.height/2)
shapeLayer.fillColor = nil
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 3
shapeLayer.lineJoin = CAShapeLayerLineJoin.round // Updated in swift 4.2
shapeLayer.lineDashPattern = [10]
let path = UIBezierPath(roundedRect: self.view.bounds, cornerRadius: self.view.bounds.size.height/2)
shapeLayer.path = path.cgPath
self.view.layer.addSublayer(shapeLayer)
let animation1 = CABasicAnimation(keyPath: "strokeEnd")
animation1.fromValue = 0
animation1.duration = 1
shapeLayer.add(animation1, forKey: "MyAnimation")
// Create squareView and add animation
let animation = CAKeyframeAnimation(keyPath: #keyPath(CALayer.position))
animation.duration = 1
animation.repeatCount = MAXFLOAT
animation.path = path.cgPath
let squareView = UIView()
// Don't worry about x,y and width and height it will not affect the animation
squareView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
squareView.backgroundColor = .lightGray
view.addSubview(squareView)
// You can also pass any unique string value for key
squareView.layer.add(animation, forKey: nil)
}
You can see this tutorial for more help http://mathewsanders.com/animations-in-swift-part-two/
I have a view with .brown backgroundColor.
In that view I have a backgroundView, which has backgroundColor: UIColor.black.withAlphaComponent(0.5).
I then want to have a transparent box in this backgroundView which shows the underlaying view. And I have achieved that, but I can't do it by animating its transparency, my code only grows the "cut out area" until desired size instead of animating it's transparency.
Brown view with the backgroundView and it's 0.5 alpha
Added layer to backgroundView shows part of the brown view
The code I've written to get what I have now is this:
func addIndicatorTo(global frame: CGRect) {
let shape = CAShapeLayer()
let targetRect = convert(frame, from: nil).insetBy(dx: -4, dy: -4)
let animation = CABasicAnimation(keyPath: "path")
let toPath = CGMutablePath()
toPath.addRect(bounds)
toPath.addPath(UIBezierPath(roundedRect: targetRect,
byRoundingCorners: .allCorners,
cornerRadii: CGSize(width: 4, height: 4)).cgPath)
toPath.closeSubpath()
let fromPath = CGMutablePath()
fromPath.addRect(bounds)
fromPath.addPath(UIBezierPath(roundedRect: targetRect.insetBy(dx: targetRect.width / 2,
dy: targetRect.height / 2),
byRoundingCorners: .allCorners,
cornerRadii: CGSize(width: 4, height: 4)).cgPath)
fromPath.closeSubpath()
animation.fromValue = fromPath
animation.toValue = toPath
animation.duration = 0.5
shape.fillRule = .evenOdd
shape.path = animation.fromValue as! CGPath
backgroundView.layer.mask = shape
shape.add(animation, forKey: nil)
CATransaction.begin()
CATransaction.setDisableActions(true)
shape.path = toPath
CATransaction.commit()
}
Not sure if this is a "good" solution. But I will go with this until someone tells shows me how to solve it more elegantly!
Basically I just create a mask with the box cut out, then I create a new boxLayer with draws in the area of the "cutout". Then I just animate the opacity of the boxLayer.
func addIndicatorTo(global frame: CGRect) {
let maskLayer = CAShapeLayer()
let boxLayer = CAShapeLayer()
let targetRect = convert(frame, from: nil).insetBy(dx: -4, dy: -4)
let animation = CABasicAnimation(keyPath: "opacity")
let toPath = CGMutablePath()
let boxPath = UIBezierPath(roundedRect: targetRect,
byRoundingCorners: .allCorners,
cornerRadii: CGSize(width: 4, height: 4)).cgPath
toPath.addRect(bounds)
toPath.addPath(boxPath)
toPath.closeSubpath()
boxLayer.fillColor = UIColor.black.withAlphaComponent(0.5).cgColor
boxLayer.path = boxPath
animation.fromValue = 1.0
animation.toValue = 0.0
animation.duration = 0.5
maskLayer.fillRule = .evenOdd
maskLayer.path = toPath
backgroundView.layer.mask = maskLayer
layer.addSublayer(boxLayer)
boxLayer.add(animation, forKey: nil)
CATransaction.begin()
CATransaction.setDisableActions(true)
boxLayer.opacity = 0.0
CATransaction.commit()
}
In my app I have a checkmark inside a UIView which I reveal or conceal depending on the button the user clicks on to create the effect that the checkmark is being drawn or erased. I am using Bezier path with a mask to animate the checkmark being revealed or concealed with the code shown below. However, in the code to conceal it, the checkmark is being concealed from right to left and I would like to do it from left to right. What am I missing?
Code to reveal the checkmark
func checkmarkAnimationToReveal(view: UIView) {
let path = UIBezierPath(rect: CGRectMake(0, 0, view.bounds.width / 10, view.bounds.height))
let mask = CAShapeLayer()
mask.anchorPoint = CGPointMake(0.5, 1.0)
mask.path = path.CGPath
view.layer.mask = mask
let anim = CABasicAnimation(keyPath: "path")
anim.fromValue = path.CGPath
anim.toValue = UIBezierPath(rect:view.bounds).CGPath
anim.duration = 1.0
anim.fillMode = kCAFillModeForwards
anim.removedOnCompletion = false
view.layer.mask!.addAnimation(anim, forKey: "anim")
}
Code to conceal the checkmark
func checkmarkAnimationToConceal(view: UIView) {
CATransaction.begin()
CATransaction.setCompletionBlock({
print("completion reached")
self.checkmarkLabel.hidden = true
})
let path = UIBezierPath(rect: CGRectMake(0, 0, view.bounds.width / 10, view.bounds.height))
let mask = CAShapeLayer()
mask.anchorPoint = CGPointMake(0.5, 1.0)
mask.path = path.CGPath
view.layer.mask = mask
let anim = CABasicAnimation(keyPath: "path")
anim.fromValue = UIBezierPath(rect:view.bounds).CGPath
anim.toValue = path.CGPath
anim.duration = 1.0
anim.fillMode = kCAFillModeRemoved
anim.removedOnCompletion = false
view.layer.mask!.addAnimation(anim, forKey: "anim")
}