Is it possible to animate a view in a circular path using the new iOS 10 UIViewPropertyAnimator?
I know that it can be done with CAKeyframeAnimation as per How do I animate a UIView along a circular path?
How can I achieve the same result with the new API?
I ended up with the following. Essentially, calculating the points on circle and using animateKeyFrames to move between them.
let radius = CGFloat(100.0)
let center = CGPoint(x: 150.0, y: 150.0)
let animationDuration: TimeInterval = 3.0
let animator = UIViewPropertyAnimator(duration: animationDuration, curve: .linear)
animator.addAnimations {
UIView.animateKeyframes(withDuration: animationDuration, delay: 0, options: [.calculationModeLinear], animations: {
let points = 1000
let slice = 2 * CGFloat.pi / CGFloat(points)
for i in 0..<points {
let angle = slice * CGFloat(i)
let x = center.x + radius * CGFloat(sin(angle))
let y = center.y + radius * CGFloat(cos(angle))
let duration = 1.0/Double(points)
let startTime = duration * Double(i)
UIView.addKeyframe(withRelativeStartTime: startTime, relativeDuration: duration) {
ninja.center = CGPoint(x: x, y: y)
}
}
})
}
animator.startAnimation()
Related
I have an animation like this:
bubble.frame.origin = CGPoint(x: 75, y: -120)
UIView.animate(
withDuration: 2.5,
animations: {
self.bubble.transform = CGAffineTransform(translationX: 0, y: self.view.frame.height * -1.3)
}
)
However, the animation goes in a straight line. I want the animation to do a little back and forth action on its way to its destination. Like a bubble. Any ideas?
If you want to animate along a path you can use CAKeyframeAnimation. The only question is what sort of path do you want. A dampened sine curve might be sufficient:
func animate() {
let box = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
box.backgroundColor = .blue
box.center = bubblePoint(1)
view.addSubview(box)
let animation = CAKeyframeAnimation(keyPath: "position")
animation.path = bubblePath().cgPath
animation.duration = 5
box.layer.add(animation, forKey: nil)
}
where
private func bubblePath() -> UIBezierPath {
let path = UIBezierPath()
path.move(to: bubblePoint(0))
for value in 1...100 {
path.addLine(to: bubblePoint(CGFloat(value) / 100))
}
return path
}
/// Point on curve at moment in time.
///
/// - Parameter time: A value between 0 and 1.
/// - Returns: The corresponding `CGPoint`.
private func bubblePoint(_ time: CGFloat) -> CGPoint {
let startY = view.bounds.maxY - 100
let endY = view.bounds.minY + 100
let rangeX = min(30, view.bounds.width * 0.4)
let midX = view.bounds.midX
let y = startY + (endY - startY) * time
let x = sin(time * 4 * .pi) * rangeX * (0.1 + time * 0.9) + midX
let point = CGPoint(x: x, y: y)
return point
}
Yielding:
I have an animation of a bubble, like so:
func bubblePoint(_ value: CGFloat, midX: CGFloat) -> CGPoint {
let startY: CGFloat = UIScreen.main.bounds.height
let endY: CGFloat = -100
let rangeX: CGFloat = UIScreen.main.bounds.width * 0.1
let y = startY + (endY - startY) * value
let x = sin(value * 4 * .pi) * rangeX * (0.1 + value * 0.9) + midX * UIScreen.main.bounds.width
let point = CGPoint(x: x, y: y)
return point
}
func bubblePath(midX: CGFloat) -> UIBezierPath {
let path = UIBezierPath()
path.move(to: bubblePoint(0, midX: midX))
for value in stride(from: CGFloat(0.01), through: 1, by: 0.01) {
path.addLine(to: bubblePoint(value, midX: midX))
}
return path
}
func createAnimation(midX: CGFloat, duration: CFTimeInterval) -> CAKeyframeAnimation {
let animation = CAKeyframeAnimation(keyPath: "position")
animation.path = bubblePath(midX: midX).cgPath
animation.duration = duration
animation.repeatCount = Float.infinity
return animation
}
func createBubble(midX: CGFloat, duration: CFTimeInterval) -> (UIImageView, CAKeyframeAnimation) {
return (
view: UIImageView().then {
$0.image = image
},
animation: createAnimation(midX: midX, duration: duration)
)
}
let bubbles = createBubble(midX: 100, duration: 11, )
bubble.layer.add(animation, forKey: nil)
I want to pause the bubble when the user goes to another screen (and then resume the animation when the user comes back). I have looked into a solution like this, but I would have no idea how to do this with an animation that uses a path like mine. Is it practical to do this?
There are two main ways to pause (freeze) an animation. One is to set the layer speed to zero. The other is to wrap the animation in a UIViewPropertyAnimator and pause the animator (you can do this even with a keyframe animation).
Notice, however, that when "user goes to another screen" the animation may be removed entirely. You may thus need to store info about where in the animation we were and start from there when your view controller comes back on screen.
I want to animate a view alongside a path (without CAKeyframeAnimation) instead with UIViewPropertyAnimator.
For that I have a path with start- and endpoint and a controlpoint to make a quadcurve.
let path = UIBezierPath()
path.move(to: view.center)
path.addQuadCurve(to: target.center, controlPoint: CGPoint(x: view.center.x-10, y: target.center.y+160))
My animator uses a UIView.animateKeyframes animation to animate the position alongside the path.
let animator = UIViewPropertyAnimator(duration: duration, curve: .easeIn)
animator.addAnimations {
UIView.animateKeyframes(withDuration: duration, delay: 0, options: [.calculationModeLinear], animations: {
let points = 100
for i in 1...points {
let pos = Double(i)/Double(points)
let x = self.quadBezier(pos: pos,
start: Double(view.center.x),
con: Double(view.center.x-10),
end: Double(target.center.x))
let y = self.quadBezier(pos: pos,
start: Double(view.center.y),
con: Double(target.center.y+160),
end: Double(target.center.y))
let duration = 1.0/Double(points)
let startTime = duration * Double(i)
UIView.addKeyframe(withRelativeStartTime: startTime, relativeDuration: duration) {
view.center = CGPoint(x: x, y: y)
}
}
})
}
To calculate the points I use the same function as #rmaddy, think we have the same source here.
func quadBezier(pos: Double, start: Double, con: Double, end: Double) -> Double {
let t_ = (1.0 - pos)
let tt_ = t_ * t_
let tt = pos * pos
return Double(start * tt_) + Double(2.0 * con * t_ * pos) + Double(end * tt)
}
First I thought the calulation is wrong because it felt like the calculated points going through the controlpoint or something:
But after iterating through the same forloop and adding blue points to the calculated x/y positions shows that the positions are correct.
So I wonder why my animation don't follow that path.
I found this question and posted my question as an answer but I guess nobody recognized that.
View.center is changing during animation, make it fixed then there is no problem:
try the following:
let cent = view.center
UIView.animateKeyframes(withDuration: duration, delay: 0, options: [.beginFromCurrentState], animations: {
let points = 100
for i in 1...points {
let pos = Double(i)/Double(points)
let x = self.quadBezier(pos: pos,
start: Double(cent.x), //here
con: Double(cent.x-10), //here
end: Double(square.center.x))
let y = self.quadBezier(pos: pos,
start: Double(cent.y), //here
con: Double(square.center.y+160),
end: Double(square.center.y))
let duration = 1.0 / Double(points)
let startTime = duration * Double(i)
print("Animate: \(Int(x)) : \(Int(y))")
UIView.addKeyframe(withRelativeStartTime: startTime, relativeDuration: duration) {
view.center = CGPoint(x: x, y: y)
}
}
})
}
I want to create animation with a rotating image. I have two variants of code.
First
I want to create animation like on this video:
https://yadi.sk/i/ek-3Pydc3ZfZFW - this animation fits me.
I use this code to create animation:
func animation() {
self.book1ImageView = UIImageView(frame: CGRect(x: self.view.frame.size.width / 2 - 120, y: (self.view.frame.size.height / 2) - ( (self.view.frame.width / 2) / 2 ), width: ( (self.view.frame.width / 2) / 8) * 7, height: self.view.frame.width / 2))
self.book2ImageView = UIImageView(frame: CGRect(x: self.view.frame.size.width / 2 - 120, y: (self.view.frame.size.height / 2) - ( (self.view.frame.width / 2) / 2 ), width: ( (self.view.frame.width / 2) / 8) * 7, height: self.view.frame.width / 2))
book1ImageView.image = UIImage(named:"attachment_83090027.jpg")
book2ImageView.image = UIImage(named:"2.jpg")
book1ImageView?.layer.anchorPoint = CGPoint(x: 0, y: 0.5)
book2ImageView?.layer.anchorPoint = CGPoint(x: 0, y: 0.5)
var transform = CATransform3DIdentity
transform.m34 = 1.0 / -2000.0
book1ImageView?.layer.transform = transform
UIView.animate(withDuration: 3, delay: 0.0,
options: [], animations: {
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
self.book1ImageView.image = UIImage(named:"2.jpg")
}
self.book1ImageView.layer.transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
self.view.layoutIfNeeded()
}, completion: {_ in
})
self.view.addSubview(self.book2ImageView)
self.view.addSubview(self.book1ImageView)
}
My image should changes in 90 degrees like in firs video. But sometimes my image changes before or after 90 degrees. like in this video: https://yadi.sk/i/MACrcIhM3ZfaKH
Also I have second variant of code:
Second
But this code not fits me because image rotating with delay on 90 degrees.
video: https://yadi.sk/i/_gNG8FBA3ZfaUe
code:
func pageFlipAnimation()
{
self.myImageView.image = UIImage.init(named: "firstImage")
var transform = CATransform3DIdentity
let transform1 = CATransform3DRotate(transform, -CGFloat(Double.pi)*0.5, 0, 1, 0)
let transform2 = CATransform3DRotate(transform, -CGFloat(Double.pi), 0, 1, 0)
transform.m34 = 1.0 / -5000.0
self.setAnchorPoint(anchorPoint: CGPoint(x: 0, y: 0.5), forView: self.myImageView)
UIView.animate(withDuration: 0.5, animations:
{
self.myImageView.layer.transform = transform1
})
{
(bFinished) in
self.myImageView.image = UIImage.init(named: "secondImage")
UIView.animate(withDuration: 0.75, animations:
{
self.myImageView.layer.transform = transform2
})
}
}
//This should ideally be a UIView Extension
func setAnchorPoint(anchorPoint: CGPoint, forView view: UIView)
{
var newPoint = CGPoint(x:view.bounds.size.width * anchorPoint.x, y:view.bounds.size.height * anchorPoint.y)
var oldPoint = CGPoint(x:view.bounds.size.width * view.layer.anchorPoint.x, y:view.bounds.size.height * view.layer.anchorPoint.y)
newPoint = newPoint.applying(view.transform)
oldPoint = oldPoint.applying(view.transform)
var position = view.layer.position
position.x -= oldPoint.x
position.x += newPoint.x
position.y -= oldPoint.y
position.y += newPoint.y
view.layer.position = position
view.layer.anchorPoint = anchorPoint
}
How to solve the problem?
The second one is the right idea, because you divide it into two stages: you open to 90 degrees, you change the image, and then you open it the rest of the way. So that is the one I would suggest fixing.
The reason for the delay is merely that you have not changed the timing function, so you get the default: an EaseInOut to 90 degrees and then another EaseInOut from 90 degrees to 180 degrees. Thus we slow down to zero and start up again at 90 degrees.
Just give the first animation an EaseIn timing function and give the second animation an EaseOut timing function and you should be all set.
Hi I am trying to rotate a triangle shaped CAShapeLayer. The northPole CAShapeLayer is defined in a custom UIView class. I have two functions in the class one to setup the layer properties and one to animate the rotation. The rotation animate works fine but after the rotation completes it reverts back to the original position. I want the layer to stay at the angle given (positionTo = 90.0) after the rotation animation.
I am trying to set the position after the transformation to retain the correct position after the animation. I have also tried to get the position from the presentation() method but this has been unhelpful. I have read many articles on frame, bounds, anchorpoints but I still cannot seem to make sense of why this transformation rotation is not working.
private func setupNorthPole(shapeLayer: CAShapeLayer) {
shapeLayer.frame = CGRect(x: self.bounds.width / 2 - triangleWidth / 2, y: self.bounds.height / 2 - triangleHeight, width: triangleWidth, height: triangleHeight)//self.bounds
let polePath = UIBezierPath()
polePath.move(to: CGPoint(x: 0, y: triangleHeight))
polePath.addLine(to: CGPoint(x: triangleWidth / 2, y: 0))
polePath.addLine(to: CGPoint(x: triangleWidth, y: triangleHeight))
shapeLayer.path = polePath.cgPath
shapeLayer.anchorPoint = CGPoint(x: 0.5, y: 1.0)
The animate function:
private func animate() {
let positionTo = CGFloat(DegreesToRadians(value: degrees))
let rotate = CABasicAnimation(keyPath: "transform.rotation.z")
rotate.fromValue = 0.0
rotate.toValue = positionTo //CGFloat(M_PI * 2.0)
rotate.duration = 0.5
northPole.add(rotate, forKey: nil)
let present = northPole.presentation()!
print("presentation position x " + "\(present.position.x)")
print("presentation position y " + "\(present.position.y)")
CATransaction.begin()
northPole.transform = CATransform3DMakeRotation(positionTo, 0.0, 0.0, 1.0)
northPole.position = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
CATransaction.commit()
}
To fix the problem, in the custom UIView class I had to override layoutSubviews() with the following:
super.layoutSubviews()
let northPoleTransform: CATransform3D = northPole.transform
northPole.transform = CATransform3DIdentity
setupNorthPole(northPole)
northPole.transform = northPoleTransform