I want to implement a 3D roration on a door Image on a layer, but it does not work.
I found the animation stoped the function invoke immediately at start. So I think this is the reason why animation does not work.
Below is my code:
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
// Do any additional setup after loading the view.
let doorLayer = CALayer()
doorLayer.frame = CGRect(x: 0, y: 0, width: 128, height: 256)
doorLayer.position = CGPoint(x: 150 - 64, y: 150)
doorLayer.anchorPoint = CGPoint(x: 0, y: 0.5)
doorLayer.contents = UIImage(named: "door")?.cgImage
self.view.layer.addSublayer(doorLayer)
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
self.view.layer.sublayerTransform = perspective
let animation = CABasicAnimation()
animation.keyPath = "transform.rotation.y"
animation.toValue = -Double.pi/2
animation.duration = 2.0
animation.repeatCount = 5
animation.autoreverses = true
animation.delegate = self
doorLayer.add(animation, forKey: "rotationAnimation")
}
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
print(#function)
}
When the View shows, the message shows immediately.
How shall I do ?
Related
We have created two CAShapeLayer and we have animated them by CABasicAnimation changing position like fromValue to toValue so far code works as excepted.
Two layers meeting at some points while animating, its moving one over another seems overlapping. We need to achieve like below image but we have got different output.
Desired output:
Output at Loading view::
Result we got after animating layers:
Code Below:
class MovingAnimationVC: UIViewController {
let layerSize = CGSize(width: 100, height: 100)
private var layerWidth : CGFloat = 100
private var layerHeight : CGFloat = 100
var circleA : CAShapeLayer! = nil
var circleB : CAShapeLayer! = nil
lazy var aPosition = CGPoint(x: -layerWidth/2 + 30, y: 100)
lazy var bPosition = CGPoint(x: (self.view.frame.width - layerWidth / 2) - 30 , y: 400)
override func viewDidLoad() {
super.viewDidLoad()
if circleA == nil{
circleA = CAShapeLayer()
let pa = UIBezierPath(ovalIn: CGRect(origin: aPosition, size: layerSize))
circleA.path = pa.cgPath
circleA.fillColor = UIColor.orange.cgColor
view.layer.addSublayer(circleA)
}
if circleB == nil{
circleB = CAShapeLayer()
let pa = UIBezierPath(ovalIn: CGRect(origin: bPosition, size: layerSize))
circleB.path = pa.cgPath
circleB.fillColor = UIColor.orange.cgColor
view.layer.addSublayer(circleB)
}
}
override func viewDidAppear(_ animated: Bool) {
animateCircleA()
animateCircleB()
}
fileprivate func animateCircleA(){
lazy var startPointA = CGPoint(x: -layerWidth/2 + 30, y: 0)
lazy var endPointA = CGPoint(x: (self.view.frame.width - layerWidth / 2), y: 300)
let animate = CABasicAnimation(keyPath: "position")
animate.timingFunction = CAMediaTimingFunction(name: .linear)
animate.fromValue = NSValue(cgPoint: startPointA)
animate.toValue = NSValue(cgPoint: endPointA)
animate.repeatCount = 2
animate.duration = 5.0
circleA.add(animate, forKey: "position")
}
fileprivate func animateCircleB(){
lazy var startPointB = CGPoint(x: 0, y: 0)
lazy var endPointB = CGPoint(x:-(self.view.frame.width - layerWidth / 2) - 30, y: -(self.view.frame.width - layerWidth / 2) + 30)
let animate = CABasicAnimation(keyPath: "position")
animate.timingFunction = CAMediaTimingFunction(name: .linear)
animate.fromValue = NSValue(cgPoint: startPointB)
animate.toValue = NSValue(cgPoint: endPointB)
animate.repeatCount = 2
animate.duration = 5.0
circleB.add(animate, forKey: "position")
}
}
Kindly suggest me right way to get started.
How to make both layer transparent while crossing each other?
The easiest way is to just set the alphas of the layers, but if you don't want the layers to be transparent, then that means you want a different blend mode for the layers.
According to this question, to change the blend mode of a layer, you can set CALayer.compositingFilter. From your desired output, it seems like the screen blend mode is appropriate:
circleA.compositingFilter = "screenBlendMode"
circleA.compositingFilter = "screenBlendMode"
Note that you should add your layers to a view with a transparent background, otherwise the background color of the view is also blended with the circles' colours. This view can be added as a subview of whatever view you were originally going to put the circles in, filling its entire bounds.
someView.backgroundColor = .clear
someView.layer.addSublayer(circleA)
someView.layer.addSublayer(circleB)
I am trying to have a view in which 3 dots would animate infinity and here is the code snippet(swift 5) for it
func showAnimatingDotsInImageView() {
let lay = CAReplicatorLayer()
lay.frame = CGRect(x: 0, y: 0, width: 15, height: 7) //yPos == 12
let circle = CALayer()
circle.frame = CGRect(x: 0, y: 0, width: 7, height: 7)
circle.cornerRadius = circle.frame.width / 2
circle.backgroundColor = UIColor.green.cgColor
lay.addSublayer(circle)
lay.instanceCount = 3
lay.instanceTransform = CATransform3DMakeTranslation(10, 0, 0)
let anim = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))
anim.fromValue = 1.0
anim.toValue = 0.2
anim.duration = 1
anim.repeatCount = .infinity
circle.add(anim, forKey: nil)
lay.instanceDelay = anim.duration / Double(lay.instanceCount)
test1.layer.addSublayer(lay)
}
In the above code test1 is a UIImageView.
The main issue is the dots are shown but it's static and doesn't animate.
I tried your code and it is animating just fine.
Any chance you are calling this from a thread which is different than the Main thread? Like for example something on the background is happening, which you want to triggers the loading?
Try adding:
DispatchQueue.main.async { [weak self] in
self?.showAnimatingDotsInImageView()
}
I'm trying to set up a CALayer to increase in width at the bottom of my viewcontroller by using CATransform3DMakeScale. I can get the layer to scale just fine, but when I try to apply the transformation through an animation, the layer transforms without any animation.
let progressBar1 = CALayer()
override func viewDidAppear() {
progressBar1.bounds = CGRect(x: 0, y: 0, width: 1, height: 5)
progressBar1.position = CGPoint(x: 0, y: 600)
progressBar1.backgroundColor = UIColor.white.cgColor
view.layer.addSublayer(progressBar1)
extendBar1()
}
func extendBar1(){
let transform1 = CATransform3DMakeScale(30, 1, 0)
let anim = CABasicAnimation(keyPath: "transform")
anim.isRemovedOnCompletion = false
anim.fillMode = kCAFillModeForwards
anim.toValue = NSValue(caTransform3D:transform1)
anim.duration = 10.00
progressBar1.add(anim, forKey: "transform")
}
I also tried the following with CATransaction but I get the same result
func extendBar3(){
let transform1 = CATransform3DMakeScale(30, 1, 0)
CATransaction.begin()
CATransaction.setAnimationDuration(7.0)
progressBar1.transform = transform1
CATransaction.commit()
}
The chief remaining problem is this line:
let transform1 = CATransform3DMakeScale(30, 1, 0)
Change the 0 to a 1.
(The result may still not be the animation you want, precisely, but at least you should see something — as long as (0,600) is not off the screen entirely, of course.)
I want a layer to behave like this:
Instead, it behaves like this:
The card flip animation is created by two CABasicAnimations applied in a CAAnimationGroup. The incorrect spin effect happens because the implicit animation from the CALayer property change runs first and then my animation specified in the CABasicAnimation runs. How can I stop the implicit animation from running so that only my specified animation runs?
Here's the relevant code:
class ViewController: UIViewController {
var simpleLayer = CALayer()
override func viewDidLoad() {
super.viewDidLoad()
let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
self.view.addGestureRecognizer(tap)
simpleLayer.frame = CGRect(origin: CGPoint(x: view.bounds.width / 2 - 50, y: view.bounds.height / 2 - 50), size: CGSize(width: 100, height: 100))
simpleLayer.backgroundColor = UIColor.blackColor().CGColor
view.layer.addSublayer(simpleLayer)
}
func handleTap() {
let xRotation = CABasicAnimation(keyPath: "transform.rotation.x")
xRotation.toValue = 0
xRotation.byValue = M_PI
let yRotation = CABasicAnimation(keyPath: "transform.rotation.y")
yRotation.toValue = 0
yRotation.byValue = M_PI
simpleLayer.setValue(M_PI, forKeyPath: "transform.rotation.y")
simpleLayer.setValue(M_PI, forKeyPath: "transform.rotation.x")
let group = CAAnimationGroup()
group.animations = [xRotation, yRotation]
group.duration = 0.6
group.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
simpleLayer.addAnimation(group, forKey: nil)
}
}
#LucasTizma had the correct answer.
Surround your animation with CATransaction.begin(); CATransaction.setDisableActions(true) and CATransaction.commit(). This will disable the implicit animation and make the CAAnimationGroup animate correctly.
Here's the final result:
This is the important snippet of code in Swift 3:
CATransaction.begin()
CATransaction.setDisableActions(true)
let xRotation = CABasicAnimation(keyPath: "transform.rotation.x")
xRotation.toValue = 0
xRotation.byValue = M_PI
let yRotation = CABasicAnimation(keyPath: "transform.rotation.y")
yRotation.toValue = 0
yRotation.byValue = M_PI
simpleLayer.setValue(M_PI, forKeyPath: "transform.rotation.x")
simpleLayer.setValue(M_PI, forKeyPath: "transform.rotation.y")
let group = CAAnimationGroup()
group.animations = [xRotation, yRotation]
simpleLayer.add(group, forKey: nil)
CATransaction.commit()
And this is the full code for the depicted animation with an iOS app:
class ViewController: UIViewController {
var simpleLayer = CALayer()
override func viewDidLoad() {
super.viewDidLoad()
let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
self.view.addGestureRecognizer(tap)
let ratio: CGFloat = 1 / 5
let viewWidth = view.bounds.width
let viewHeight = view.bounds.height
let layerWidth = viewWidth * ratio
let layerHeight = viewHeight * ratio
let rect = CGRect(origin: CGPoint(x: viewWidth / 2 - layerWidth / 2,
y: viewHeight / 2 - layerHeight / 2),
size: CGSize(width: layerWidth, height: layerHeight))
let topRightPoint = CGPoint(x: rect.width, y: 0)
let bottomRightPoint = CGPoint(x: rect.width, y: rect.height)
let topLeftPoint = CGPoint(x: 0, y: 0)
let linePath = UIBezierPath()
linePath.move(to: topLeftPoint)
linePath.addLine(to: topRightPoint)
linePath.addLine(to: bottomRightPoint)
linePath.addLine(to: topLeftPoint)
let maskLayer = CAShapeLayer()
maskLayer.path = linePath.cgPath
simpleLayer.frame = rect
simpleLayer.backgroundColor = UIColor.black.cgColor
simpleLayer.mask = maskLayer
// Smooth antialiasing
// * Convert the layer to a simple bitmap that's stored in memory
// * Saves CPU cycles during complex animations
// * Rasterization is set to happen during the animation and is disabled afterwards
simpleLayer.rasterizationScale = UIScreen.main.scale
view.layer.addSublayer(simpleLayer)
}
func handleTap() {
CATransaction.begin()
CATransaction.setDisableActions(true)
CATransaction.setCompletionBlock({
self.simpleLayer.shouldRasterize = false
})
simpleLayer.shouldRasterize = true
let xRotation = CABasicAnimation(keyPath: "transform.rotation.x")
xRotation.toValue = 0
xRotation.byValue = M_PI
let yRotation = CABasicAnimation(keyPath: "transform.rotation.y")
yRotation.toValue = 0
yRotation.byValue = M_PI
simpleLayer.setValue(M_PI, forKeyPath: "transform.rotation.x")
simpleLayer.setValue(M_PI, forKeyPath: "transform.rotation.y")
let group = CAAnimationGroup()
group.animations = [xRotation, yRotation]
group.duration = 1.2
group.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
simpleLayer.add(group, forKey: nil)
CATransaction.commit()
}
}
You are creating 2 separate animations and applying them in an animation group. When you do that they are applied as 2 discrete steps.
It looks like that's not what you want. If not, then don't create 2 separate animations, one on transform.rotation.x and the other on transform.rotation.y. Instead, concatenate both changes onto a transformation matrix and apply the changed transformation matrix as a single animation.
I want to animate out a shadow on my UIView, so that it starts visible, and by the end of the animation is invisible. I can do the opposite fine, but if I try to fade it out, the animation never occurs, in fact I never see a lick of shadow.
My code:
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
let foo = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
foo.backgroundColor = UIColor.greenColor()
applyShadowToView(foo)
view.addSubview(foo)
foo.layer.shadowOpacity = 1.0
let shadowAnimation = CABasicAnimation(keyPath: "shadowOpacity")
shadowAnimation.fromValue = 1.0
shadowAnimation.toValue = 0.0
shadowAnimation.duration = 0.5
shadowAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
foo.layer.addAnimation(shadowAnimation, forKey: "shadowOpacity")
foo.layer.shadowOpacity = 0.0
}
private func applyShadowToView(view: UIView) {
view.clipsToBounds = false
view.layer.shadowColor = UIColor(white: 0.4, alpha: 1.0).CGColor
view.layer.shadowOffset = CGSize(width: -5.0, height: 0.0)
view.layer.shadowRadius = 5.0
view.layer.shadowOpacity = 0.0
view.layer.shadowPath = UIBezierPath(rect: view.bounds).CGPath
view.layer.shouldRasterize = true
view.layer.rasterizationScale = UIScreen.mainScreen().scale
}
What am I doing wrong here exactly?