If I want to take advantage of user-interactive animations via UIViewPropertyAnimator how do I animate an object 360º clockwise?
// Does not animate
let animator = UIViewPropertyAnimator(duration: 2, curve: .linear) {
let radians = Angle(360).radians // 6.28318530717959
view.transform = view.transform.rotated(by: CGFloat(radians))
}
// (Using RxSwift to handle the user interaction via UISlider,
// but that can be ignored as an implementation detail for this question.)
let scrubs = slider.rx.value.asDriver()
scrubs.drive(onNext: { (value:Float) -> Void in
animator.fractionComplete = CGFloat(value)
})
Fortunately, UIViewPropertyAnimator makes this very simple (if not slightly hackish?). Just make two animations, each for 180º.:
let animator = UIViewPropertyAnimator(duration: 2, curve: .linear) {
let radians = Angle(180).radians // 3.14159265358979
view.transform = view.transform.rotated(by: CGFloat(radians))
}
animator.addAnimations {
let radians = Angle(180).radians
view.transform = view.transform.rotated(by: radians)
}
This will act like one animation which can be started, stopped, paused, finished or "scrubbed" via fractionComplete.
Related
I'm playing around with custom and interactive view controller transistion, with UIPercentDrivenInteractiveTransition. I'm building an app that present a card (other view controller) modally. I've made custom transistions with UIViewControllerAnimatedTransitioning that is animating the card view controller a lot like the standart model presentation style.
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
{...}
let fullScreenFrame = transitionContext.finalFrame(for: cardVC)
let offsetFrame = cardVC.view.frame.offsetBy(dx: 0, dy: cardVC.view.frame.height)
let finalFrame = presenting ? fullScreenFrame : offsetFrame
cardVC.view.frame = presenting ? offsetFrame : fullScreenFrame
containerView.addSubview(cardVC.view)
UIView.animateKeyframes(
withDuration: transitionDuration(using: transitionContext),
delay: 0,
options: UIViewKeyframeAnimationOptions.calculationModeLinear,
animations: {
UIView.addKeyframe(
withRelativeStartTime: 0,
relativeDuration: 1,
animations: { [weak self] in
guard let strongSelf = self else { return }
backgroundView.alpha = strongSelf.presenting ? 1 : 0
})
UIView.addKeyframe(
withRelativeStartTime: 0,
relativeDuration: 1,
animations: {
cardVC.view.frame = finalFrame
})
}, completion: { finished in
backgroundView.removeFromSuperview()
gradientView.alpha = 1
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
And then I use a pan gesture recognizer to interactively drive the dismiss animation:
func handleGesture(_ gestureRecognizer: UIScreenEdgePanGestureRecognizer) {
let translation = gestureRecognizer.translation(in: gestureRecognizer.view)
var progress = (translation.y / (UIScreen.main.bounds.height - 70))
progress = CGFloat(fminf(fmaxf(Float(progress), 0.0), 1.0))
switch gestureRecognizer.state {
case .began:
interactionInProgress = true
viewController.dismiss(animated: true, completion: nil)
case .changed:
shouldCompleteTransition = progress > 0.35
update(progress)
case .cancelled:
interactionInProgress = false
cancel()
case .ended:
interactionInProgress = false
if !shouldCompleteTransition {
cancel()
} else {
finish()
}
default:
print("Unsupported")
}
}
When I dismiss the presented view controller by dragging it down, it doesn't seem to move linearly with the gesture. It seems like the Interaction Controller is using some easeInEaseOut function. Maybe setting UIPercentDrivenInteractiveTransition's timingCurve to make the transition run linearly. Is that posible, or am I getting something wrong?
You yourself have given the animation a default ease in - ease out timing curve, by not setting the timing curve to anything different in your call to UIView.animateKeyframes. That applies even during interaction.
Note that setting the animation's options to UIViewKeyframeAnimationOptions.calculationModeLinear does not change the timing curve (in case that's what you thought you were accomplishing here). The way to add a linear timing curve to a linear calculation mode keyframe animation is like this:
var opts : UIViewKeyframeAnimationOptions = .calculationModeLinear
let opt2 : UIViewAnimationOptions = .curveLinear
opts.insert(UIViewKeyframeAnimationOptions(rawValue:opt2.rawValue))
// and now use `opts` as your `options`
I was having the same issue, was able to set a custom animation curve for animateKeyframes using UIView.setAnimationCurve like this:
UIView.animateKeyframes(withDuration: 4, delay: 0, options: [], animations: {
UIView.setAnimationCurve(.linear)
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.24, animations: {
// Animations...
})
// Other key frames...
})
In my case, It works with interruptibleAnimator(using:) by return UIViewPropertyAnimator
I'm using a UIViewPropertyAnimator to animate the position of a view. But, I also want to animate CALayer properties like borderColor along with it. Currently, it doesn't animate and instantly changes at the start, like this:
Here's my code:
class ViewController: UIViewController {
var animator: UIViewPropertyAnimator?
let squareView = UIView(frame: CGRect(x: 0, y: 40, width: 80, height: 80))
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(squareView)
squareView.backgroundColor = UIColor.blue
squareView.layer.borderColor = UIColor.green.cgColor
squareView.layer.borderWidth = 6
animator = UIViewPropertyAnimator(duration: 2, curve: .easeOut, animations: {
self.squareView.frame.origin.x = 100
self.squareView.layer.borderColor = UIColor.red.cgColor
})
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
self.animator?.startAnimation()
}
}
}
I looked at this question, How to synchronously animate a UIView and a CALayer, and the answer suggested using "an explicit animation, like a basic animation." It said,
If the timing function and the duration of both animations are the same then they should stay aligned.
However, if I use CABasicAnimation, I lose all the benefits of UIViewPropertyAnimator, like timing and stopping in the middle. I will also need to keep track of both. Is there any way to animate CALayer properties with UIViewPropertyAnimator?
CABasicAnimation has timing as well as keyframe animation to stop in the middle. But, to replicate your animation above:
squareView.layer.transform = CATransform3DMakeTranslation(100, 0, 0)
let fromValue = squareView.transform
let toValue = 100
let translateAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.transform))
translateAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
translateAnimation.fromValue = fromValue
translateAnimation.toValue = toValue
translateAnimation.valueFunction = CAValueFunction(name: .translateX)
let fromColor = squareView.layer.borderColor
let toColor = UIColor.red.cgColor
let borderColorAnimation = CABasicAnimation(keyPath: "borderColor")
borderColorAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
borderColorAnimation.fromValue = fromColor
borderColorAnimation.toValue = toColor
let groupAnimation = CAAnimationGroup()
groupAnimation.animations = [translateAnimation, borderColorAnimation]
groupAnimation.duration = 5
squareView.layer.add(groupAnimation, forKey: nil)
I have a simple pulse animation which runs perfectly
UIView.animate(withDuration: 1, animations: {
myAnimatableView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
}) { _ in
UIView.animate(withDuration: 1, animations: {
myAnimatableView.transform = .identity
})
}
I want to make the same animation, but now with UIViewPropertyAnimator. Is it possible to replicate this pulse effect elegantly with the new API?
I'm doing it this way
let animator = UIViewPropertyAnimator(duration: 1, curve: .linear) {
animatableView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
}
animator.addCompletion { _ in
animator.isReversed = true
animator.startAnimation()
}
animator.startAnimation()
but my animatableView is just stuck scaled to 1.2.
It seems that the property animator removes animations after completion (which would explain that starting it again would have no effect) - see SO question. Based on that, You might try hacking it through pausesOnCompletion, but I would expect that that would not be as easy as you might think. Simply because the documentation says:
When the value of this property is true, the animator remains in the active state when the animation finishes, and it does not execute its completion handler.
That means that completion handler won't get called, if the pauseOnCompletion is set to true. According to the same documentation, you can determine when the animator ended (and thus when you should restart the animation) by observing isRunning property of the animator. However, when I tried to implement that, I found out that KVO on isRunning does not get called during the lifecycle of the animator. Thus my recommendation in the end is to simply use two animators, because it seems much easier to implement:
let animator = UIViewPropertyAnimator(duration: 1, curve: .linear) {
animatableView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
}
animator.addCompletion { _ in
let secondAnimator = UIViewPropertyAnimator(duration: 1, curve: .linear) {
animatableView.transform = CGAffineTransform.identity
}
secondAnimator.startAnimation()
}
animator.startAnimation()
I think your code is more appropiated translated like this
Try with this code
let animator = UIViewPropertyAnimator(duration: 1, curve: .linear) {
self.animatableView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
}
animator.addAnimations({
self.animatableView.transform = CGAffineTransform.identity
}, delayFactor: 0.5)
animator.startAnimation()
Or you can try with UILayer animations
Try using UILayer animations
let layerAnimation = CABasicAnimation(keyPath: "transform.scale")
layerAnimation.fromValue = 1
layerAnimation.toValue = 1.2
layerAnimation.isAdditive = false
layerAnimation.duration = CFTimeInterval(1)
layerAnimation.fillMode = kCAFillModeForwards
layerAnimation.isRemovedOnCompletion = true
layerAnimation.repeatCount = .infinity
layerAnimation.autoreverses = true
self.animatableView.layer.add(layerAnimation, forKey: "growingAnimation")
In my application implemented TabBarController Transitions using reference code by Apple Objective-C link And Swift link. But when switch fast between two tabs some times I am getting blank screen, I tried many answers in Stack Overflow but no luck.
Please check below code for reference while doing TabBarController Transitions using Swift
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
let fromViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)!
let toViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)!
let containerView = transitionContext.containerView
let fromView: UIView
let toView: UIView
// In iOS 8, the viewForKey: method was introduced to get views that the
// animator manipulates. This method should be preferred over accessing
// the view of the fromViewController/toViewController directly.
if #available(iOS 8.0, *) {
fromView = transitionContext.view(forKey: UITransitionContextViewKey.from)!
toView = transitionContext.view(forKey: UITransitionContextViewKey.to)!
} else {
fromView = fromViewController.view
toView = toViewController.view
}
let fromFrame = transitionContext.initialFrame(for: fromViewController)
let toFrame = transitionContext.finalFrame(for: toViewController)
// Based on the configured targetEdge, derive a normalized vector that will
// be used to offset the frame of the view controllers.
var offset: CGVector
if self.targetEdge == UIRectEdge.left {
offset = CGVector(dx: -1.0, dy: 0.0)
} else if self.targetEdge == .right {
offset = CGVector(dx: 1.0, dy: 0.0)
} else {
fatalError("targetEdge must be one of UIRectEdgeLeft, or UIRectEdgeRight.")
}
// The toView starts off-screen and slides in as the fromView slides out.
fromView.frame = fromFrame
toView.frame = toFrame.offsetBy(dx: toFrame.size.width * offset.dx * -1,
dy: toFrame.size.height * offset.dy * -1)
// We are responsible for adding the incoming view to the containerView.
containerView.addSubview(toView)
let transitionDuration = self.transitionDuration(using: transitionContext)
UIView.animate(withDuration: transitionDuration, animations: {
fromView.frame = fromFrame.offsetBy(dx: fromFrame.size.width * offset.dx,
dy: fromFrame.size.height * offset.dy)
toView.frame = toFrame
}, completion: {finshed in
let wasCancelled = transitionContext.transitionWasCancelled
// When we complete, tell the transition context
// passing along the BOOL that indicates whether the transition
// finished or not.
transitionContext.containerView.addSubview(toView)
transitionContext.completeTransition(!wasCancelled)
})
}
Below is the screen shot
It seems Like you have taken UINavigationController for your second tab. But somehow your connection from UINavigationController to your secondViewController is lost. Please check the image of a storyboard which may be in your scenario.
I also get the same as a blank screen and I fixed it by making the current view it the initial view controller.
check is Initial View Controller
I am having a hard time trying to pause and continue from the current state of the rotation any UIView rotation technique.
Tried:
CGAffineTransformRotate
CGAffineTransformMakeRotation
CATransform3DMakeRotation
CABasicAnimation
Basically, if i call view.layer.removeAllAnimations() or, layer.speed = 0 , they all reset current rotation degree.
Also tried snapshotting the view for using the image instead the true rotation, but with no luck, since the snapshot ignored rotation.
Finally got it, with more than one answer on SO, many in objective-c, put them all together in an UIView extension, and even documented:
extension UIView {
/**
Will rotate `self` for ever.
- Parameter duration: The duration in seconds of a complete rotation (360º).
- Parameter clockwise: If false, will rotate counter-clockwise.
*/
func startRotating(duration duration: Double, clockwise: Bool) {
let kAnimationKey = "rotation"
var currentState = CGFloat(0)
// Get current state
if let presentationLayer = layer.presentationLayer(), zValue = presentationLayer.valueForKeyPath("transform.rotation.z"){
currentState = CGFloat(zValue.floatValue)
}
if self.layer.animationForKey(kAnimationKey) == nil {
let animate = CABasicAnimation(keyPath: "transform.rotation")
animate.duration = duration
animate.repeatCount = Float.infinity
animate.fromValue = currentState //Should the value be nil, will start from 0 a.k.a. "the beginning".
animate.byValue = clockwise ? Float(M_PI * 2.0) : -Float(M_PI * 2.0)
self.layer.addAnimation(animate, forKey: kAnimationKey)
}
}
/// Will stop a `startRotating(duration: _, clockwise: _)` instance.
func stopRotating() {
let kAnimationKey = "rotation"
var currentState = CGFloat(0)
// Get current state
if let presentationLayer = layer.presentationLayer(), zValue = presentationLayer.valueForKeyPath("transform.rotation.z"){
currentState = CGFloat(zValue.floatValue)
}
if self.layer.animationForKey(kAnimationKey) != nil {
self.layer.removeAnimationForKey(kAnimationKey)
}
// Leave self as it was when stopped.
layer.transform = CATransform3DMakeRotation(currentState, 0, 0, 1)
}
}
Use it like yourView.startRotating(duration: 1, clockwise: true), later to stop do yourView.stopRotating().