Trouble with Sprite Kit SKAction in Swift - swift

I am having an issue with an SKAction sequence I set up.
The goal of this sequence is to take an array of 9 sprite nodes and display one at a time. This sequence will then show the node to the right or to the left of the current node depending on which button is pressed (right button or left button).
I am experiencing something interesting here. It seems to work as it is now, but if I press button left or button right multiple times fast, it seems like it cannot keep up and the process fails. I don't get an error, the sprite nodes just don't display or don't display correctly.
I have attached my code below. Because it is working when I cycle through slowly, I believe it is a timing issue and maybe I need to add a completion block. I tried doing this but was unsuccessful.
My question is, does anything obvious stick out that looks wrong here and do you think a completion block could possibly solve the issue?
func pressedButtonRight(){
if currentDisplayedWorld < 8 {
var currentWorld:SKSpriteNode = worldArray[currentDisplayedWorld] as SKSpriteNode
var nextWorld:SKSpriteNode = worldArray[currentDisplayedWorld + 1] as SKSpriteNode
nextWorld.position = CGPointMake(self.frame.size.width, 50)
self.addChild(nextWorld)
let move = SKAction.moveByX(-self.frame.size.width, y: 0,
duration: 1.0, delay: 0,
usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5)
//currentWorld.runAction(move)
nextWorld.runAction(move)
currentWorld.removeFromParent()
currentDisplayedWorld++
}else if currentDisplayedWorld == 8 {
}
}
func pressedButtonLeft(){
if currentDisplayedWorld > 0 {
var currentWorld:SKSpriteNode = worldArray[currentDisplayedWorld] as SKSpriteNode
var previousWorld:SKSpriteNode = worldArray[currentDisplayedWorld - 1] as SKSpriteNode
previousWorld.position = CGPointMake(-self.frame.size.width, 50)
self.addChild(previousWorld)
let moveBack = SKAction.moveByX(self.frame.size.width, y: 0,
duration: 1.0, delay: 0,
usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5)
//currentWorld.runAction(moveBack)
previousWorld.runAction(moveBack)
currentWorld.removeFromParent()
currentDisplayedWorld--
}else if currentDisplayedWorld == 0 {
}
}

Worked out perfect. I posted my final code below for all to see. Thanks again for the help.
func pressedButtonRight(){
if currentDisplayedWorld < 8 {
if self.moving == false {
self.moving = true
var currentWorld:SKSpriteNode = self.worldArray[currentDisplayedWorld] as SKSpriteNode
var nextWorld:SKSpriteNode = self.worldArray[currentDisplayedWorld + 1] as SKSpriteNode
nextWorld.position = CGPointMake(self.frame.size.width, 50)
self.addChild(nextWorld)
let move = SKAction.moveByX(-self.frame.size.width, y: 0, duration: 1.0, delay: 0,usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5)
//currentWorld.runAction(move)
nextWorld.runAction(move, completion: {
self.moving = false
})
currentWorld.removeFromParent()
currentDisplayedWorld++
}
}else if currentDisplayedWorld == 8 {
}
}
func pressedButtonLeft(){
if currentDisplayedWorld > 0 {
if self.moving == false {
self.moving = true
var currentWorld:SKSpriteNode = self.worldArray[currentDisplayedWorld] as SKSpriteNode
var previousWorld:SKSpriteNode = self.worldArray[currentDisplayedWorld - 1] as SKSpriteNode
previousWorld.position = CGPointMake(-self.frame.size.width, 50)
self.addChild(previousWorld)
let moveBack = SKAction.moveByX(self.frame.size.width, y: 0, duration: 1.0, delay: 0,
usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5)
//currentWorld.runAction(moveBack)
previousWorld.runAction(moveBack, completion: {
self.moving = false
})
currentWorld.removeFromParent()
currentDisplayedWorld--
}
}else if currentDisplayedWorld == 0 {
}
}

Related

How do you do successive animations?

I’m wanting to do successive animations, like one after another instead of on a loop or one at a time. What does it look like when coding that?
Example: fade in # 100% opacity, then fade out # 20% opacity, then fade in 80%, then fade out 10%... so like a pulsing then at 0% change the label text and do the inverse (basically the same as the picture only every time I try and make it progressively fade out- it disrupts the whole animation)
The gif shows it's current state, not what I've tried thus far that didnt work.
import UIKit
class Belief2ViewController: UIViewController {
#IBOutlet var negBeliefLabelGlower: UILabel!
#IBOutlet var posBeliefLabelGlower: UILabel!
#IBOutlet var labelNegBeliefFinal: UILabel!
#IBOutlet var startButton: UIButton!
//PASSING INFO
var negBeliefLabelGlowerText = String()
var posBeliefLabelGlowerText = String()
override func viewDidLoad() {
super.viewDidLoad()
//PASSING INFO
negBeliefLabelGlower.text = negBeliefLabelGlowerText
posBeliefLabelGlower.text = posBeliefLabelGlowerText
//PASSING INFO
labelNegBeliefFinal.text = negBeliefLabelGlowerText
//GLOW
labelNegBeliefFinal.UILableTextShadow(color: UIColor.systemTeal)
//AniamtionOpacityLOOP
labelNegBeliefFinal.alpha = 0.3
// UIView.animate(withDuration: 5, animations: {self.labelNegBeliefFinal.alpha = 100}, completion: { _ in self.labelNegBeliefFinal.alpha = 90;})
UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat], animations: { self.labelNegBeliefFinal.alpha = 100 })
//AnimationBreathSizeLOOP
UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat], animations: { self.labelNegBeliefFinal.transform = CGAffineTransform(scaleX: 1.3, y: 1.3) })
}
#IBAction func startButtonPress(_ sender: Any) {
//self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText
// UIView.animate(withDuration: 10, animations: {self.labelNegBeliefFinal.alpha = 0}, completion: { _ in self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText;})
UIView.animate(withDuration: 10, delay: 0, animations: {self.labelNegBeliefFinal.alpha = 0}, completion: { _ in
self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText ;})
//
}
}
//GLOW
extension UILabel {
func UILableTextShadow1(color: UIColor){
textColor = UIColor.systemTeal
layer.shadowColor = UIColor.systemTeal.cgColor
layer.masksToBounds = false
layer.shadowOffset = .zero
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale
layer.shadowRadius = 5.0
layer.shadowOpacity = 5.0
}
}
EDIT
Okay so using the keyframes as suggest was a perfect suggestion
but I am running into a bit of an issue. I cannot key in the label text to change
UIView.animateKeyframes(withDuration: 15.0,
delay: 0.0,
options: [],
animations: {
UIView.addKeyframe(withRelativeStartTime: 1,
relativeDuration: 0.0,
animations: { self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText })
},
completion: nil)
So I wasn't able to incorporate the label into the keyframe animation so I just set a delay to the bale changing and it took a little tweaking but here is what I came up with
//CHANGE LABEL ON TIMER
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 13.5)
{ [self] in
self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText
}
Here is the glow loop and size loop as before, unrelated to the tween
//AniamtionGlowLOOP
UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat],
animations: { self.labelNegBeliefFinal.layer.shadowOpacity = 5.0 })
//AnimationBreathSizeLOOP
UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat],
animations: { self.labelNegBeliefFinal.transform = CGAffineTransform(scaleX:
1.3, y: 1.3) })
// }
Here is the tween code I came up with thanks to Matt for the point in the right direction. Had no idea you could tween in SwiftUI. One thing that threw me off is that if the duration is 30sec, relative duration being set to 0.5 is equal to 15 seconds as it's 0.5 of 30 seconds. Some of my tweens didn't seem to work because I didn't realize that.
UIView.animateKeyframes(withDuration: 30.0,
delay: 0,
options: [ ],
animations: {
UIView.addKeyframe(withRelativeStartTime:
0,
relativeDuration: 0.5,
animations: { self.labelNegBeliefFinal.alpha = 0 })
UIView.addKeyframe(withRelativeStartTime:
0.5,
relativeDuration: 0.5,
animations: { self.labelNegBeliefFinal.alpha = 1 })
},
completion: nil)
}
}
Glow style I got from a different post
//GLOW
extension UILabel {
func UILableTextShadow1(color: UIColor){
textColor = UIColor.systemTeal
layer.shadowColor = UIColor.systemTeal.cgColor
layer.masksToBounds = false
layer.shadowOffset = .zero
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale
layer.shadowRadius = 5.0
layer.shadowOpacity = 00.7
}
}

AnimateKeyframes animate for the UILabel's value

I ran the code below and the label was moved perfectly. But I want to increase the value of the label at the same time with each move. I have tried many ways but it doesn't work.
UIView.animateKeyframes(withDuration: 6, delay: 0, options: [], animations: {
UIView.addKeyframe(withRelativeStartTime: (0 / 6), relativeDuration: (2 / 6), animations: {
self.label.transform = label.transform.translatedBy(x: 0, y: 50) //OK
//I want the value of the label to be increased from 0 to 5 (exactly equal to the duration of this key frame)
})
UIView.addKeyframe(withRelativeStartTime: (2 / 6), relativeDuration: (2 / 6), animations: {
self.label.transform = label.transform.translatedBy(x: 50, y: 0) //OK
//Then I want the value of the label to decrease from 5 to 0
})
}, completion: nil)
Can you help me? Thanks in advance!
You will not be able to do it within the animation block, you can use Timer and change label's text property with it.
Example, in your case I would do it like this:
var tick = 0
let duration: TimeInterval = 6
let countTo = 5
Timer.scheduledTimer(withTimeInterval: duration / (2 * Double(countTo)), repeats: true) { timer in
tick += 1
let mod = tick % countTo
if tick >= countTo, tick < countTo * 2 {
label.text = String(countTo - mod)
} else {
label.text = String(mod)
}
if tick >= countTo * 2 {
timer.invalidate()
}
}
UIView.animateKeyframes(withDuration: duration, delay: 0, options: [], animations: {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5, animations: {
label.transform = label.transform.translatedBy(x: 0, y: 50)
})
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
label.transform = label.transform.translatedBy(x: 50, y: 0)
})
}, completion: nil)
This way you can set duration you need and to what number you want to count to and back to 0 within the duration.

Swift UIView zPosition issue, views overlap on other views

I am writing a calendar view, I added three other views to its super view, so the calendar view should be on the topper layer, it looks fine on the simulator
but later on, I found that I can't click the button, then I checked the view hierarchy, found that the other three views overlap on the calendar, it is so weird as the 3d preview and view on the simulator are different
Here is the code of UI Part
func updateUI() {
if calendarView != nil {
self.view.addSubview(calendarView!)
self.calendarView!.frame.origin = calendarViewPosition!
self.calendarView!.layer.zPosition = 5
self.calendarView!.layer.cornerRadius = self.setting.itemCardCornerRadius
self.calendarView!.layer.masksToBounds = true
self.calendarView!.setViewShadow()
UIView.animate(withDuration: 0.8, delay: 0, options: .curveEaseOut, animations: {
self.calendarView!.frame.origin.y += 50
}) { _ in
var newCalendarPageCordiateYDifference: CGFloat = 10
var newCalendarPageSizeDifference: CGFloat = 20
var zPosition: CGFloat = 4
for _ in 1 ... 3 {
let newCalendarPage = UIView()
newCalendarPage.frame = CGRect(x: self.calendarView!.frame.origin.x + newCalendarPageSizeDifference / 2, y: self.calendarView!.frame.origin.y, width: self.calendarView!.frame.width - newCalendarPageSizeDifference, height: self.calendarView!.frame.height - newCalendarPageSizeDifference)
newCalendarPage.backgroundColor = .white
newCalendarPage.layer.zPosition = zPosition
newCalendarPage.layer.cornerRadius = self.setting.itemCardCornerRadius
newCalendarPage.setViewShadow()
self.view.addSubview(newCalendarPage)
UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut, animations: {
newCalendarPage.frame.origin.y -= newCalendarPageCordiateYDifference
})
zPosition -= 1
newCalendarPageCordiateYDifference += 10
newCalendarPageSizeDifference += 50
}
}
}
}
Remove self.view.addSubview(newCalendarPage) this from for loop and
Add subview like this
self.view.insertSubview(newCalendarPage, belowSubview: calendarView)
Another way is to disable user interaction like
newCalendarPage.isUserInteractionEnabled = false

View don't appear the second time [Swift]

In my swift app I've create these two functions:
func presentAlertView() {
backgroundLogOutView.frame = UIScreen.main.bounds
backgroundLogOutView.backgroundColor = currentTheme.backgroundColor.withAlphaComponent(0.5)
logOutAlertView.frame.size = CGSize(width: 200, height: 200)
logOutAlertView.center = CGPoint(x: view.frame.width / 2, y: view.frame.height / 2 - (navigationController?.navigationBar.frame.size.height)!)
view.addSubview(backgroundLogOutView)
backgroundLogOutView.addSubview(logOutAlertView)
logOutAlertView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
logOutAlertView.alpha = 0
UIView.animate(withDuration: 0.4, animations: {
self.logOutAlertView.alpha = 1
self.logOutAlertView.transform = CGAffineTransform.identity
})
}
#objc func removeAlertView() {
UIView.animate(withDuration: 0.4, animations: {
self.logOutAlertView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
self.logOutAlertView.alpha = 0
self.backgroundLogOutView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
self.backgroundLogOutView.alpha = 0
}) {(success: Bool) in
self.logOutAlertView.removeFromSuperview()
self.backgroundLogOutView.removeFromSuperview()
self.tableView.deselectRow(at: [0,4], animated: true)
}
}
By tapping a button the function presentAlertView() is invoked and the views appear then when the function removeAlertView() is invoked the views disapeear. And here all ok.
But when I tapped the button the second time the views don't appear!
Why this happened?
Thank you
self.backgroundLogOutView.alpha = 0
is present in removeAlertView().
self.backgroundLogOutView.alpha = 1
may be missing in presentAlertView().

Animate video UIView to go full screen like YouTube App

I have a view controller that has a UIView that I call playerView. In playerView, I use an AVLayer and AVPlayerLayer to show the user a video. Image the Youtube app when you first click on any video.
How do I manipulate the frame of this playerView so that it can take up the entire screen. (Go full screen)
This is the current frame:
//16 x 9 is the aspect ratio of all HD videos
let height = view.frame.width * 9 / 16
let playerFrame = CGRect(x: 0, y: 0, width: view.frame.width, height: height)
playerView.frame = videoPlayerFrame
I was testing around in the YouTube app and their app only supports Portrait orientation (just like mine) due to how the animation of a video going full screen looks. How can I do this at the the tap of a button and even further when the user holds the device horizontally?
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.playerView.frame = ?
}, completion: nil)
Edit: Tried this but it doesn't really work how I want it... it doesn't take up the whole screen
UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.playerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.height, height: self.view.frame.width)
self.playerView.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))
}, completion: nil)
I figured it out.
I create a global variable called isExpanded that will be set to true when we're in full screen mode. Also, I create a CGPoint variable called videoPlayerViewCenter so I can save the center before going full screen so I can set it again when going back to small screen.
This is the code that gets called when the user wants to go full screen
func fullScreenTapped(sender: vVideoPlayer) {
if !isExpanded {
//Expand the video
UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.videoPlayerViewCenter = self.videoPlayerView.center
self.videoPlayerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.height, height: self.view.frame.width)
self.videoPlayerView.center = self.view.center
self.videoPlayerView.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))
self.videoPlayerView.layoutSubviews()
}, completion: nil)
} else {
//Shrink the video again
UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
//16 x 9 is the aspect ratio of all HD videos
self.videoPlayerView.transform = CGAffineTransform.identity
self.videoPlayerView.center = self.videoPlayerViewCenter
let height = self.view.frame.width * 9 / 16
let videoPlayerFrame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: height)
self.videoPlayerView.frame = videoPlayerFrame
self.videoPlayerView.layoutSubviews()
}, completion: nil)
}
isExpanded = !isExpanded
}
To expand the video, I save the center in my global CGPoint variable and then set the frame. Then, I set the center and do a 90 degree turn using CGAffineTransform.
To shrink the video again, I basically set the settings to how they were before. (The order in which things are done is very important)
Another thing that's also very important is to override your layoutSubviews method in your videoPlayerView to be like this:
override func layoutSubviews() {
super.layoutSubviews()
self.playerLayer?.frame = self.bounds
}
This will make it so your playerLayer adjusts its frame as the view is getting bigger.
I know is too late but maybe someone else can find this code helpful.
I use to use Auto layout constraints in my views so animating must have a different approach.
func setMapFullScreen(_ fullscreen: Bool) {
if fullscreen {
// Set the full screen constraints
self.setFullScreenLayoutConstraints()
// Hide the navigation bar
self.navigationController?.setNavigationBarHidden(true, animated: true)
} else {
// Set small screen constraints
self.setSmallScreenLayoutConstraints()
// Show the navigation bar
self.navigationController?.setNavigationBarHidden(false, animated: true)
}
// Animate to full screen
UIView.animate(withDuration: 0.8, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.view.layoutIfNeeded()
}) { (finished) in
// ...
}
In my case a have I MKMapView and I want to tap on it in order to see the map fullscreen (and back).
This is the function that toogle the state.
As you can see, in the UIView.animate call, I animate only the self.view.layoutIfNeeded()
I also hide the navigation bar cause I have one ☺
Here my setSmallScreenLayoutConstraints and setFullScreenLayoutConstraints functions using SnapKit framework
func setSmallScreenLayoutConstraints() {
self.mapView.snp.remakeConstraints { (make) -> Void in
make.top.equalTo(self.mapLabel.snp.bottom).offset(8)
make.left.equalTo(self.view).offset(0)
make.right.equalTo(self.view).offset(0)
make.height.equalTo(150)
}
}
func setFullScreenLayoutConstraints() {
self.mapView.snp.remakeConstraints { (make) -> Void in
make.top.equalTo(self.view).offset(0)
make.left.equalTo(self.view).offset(0)
make.right.equalTo(self.view).offset(0)
make.bottom.equalTo(self.view).offset(0)
}
}
This is the result
Enjoy!!
As I said it is not an answer for your question. It is an idea and hope it helps you:
var rectangleView:UIView!
override func viewDidLoad() {
super.viewDidLoad()
// Tap Gesture Recognizer for growing the rectangleView
let tapForward = UITapGestureRecognizer.init(target: self, action: #selector(self.tapForward(tap:)))
tapForward.numberOfTapsRequired = 1
// Configure the rectangleView
self.rectangleView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height))
self.rectangleView.transform = CGAffineTransform.init(scaleX: 0.65, y: 0.25)
self.rectangleView.backgroundColor = UIColor.red
self.rectangleView.addGestureRecognizer(tapForward)
self.view.addSubview(rectangleView)
}
And this going to be our tapForward(tap:) function:
func tapForward(tap:UITapGestureRecognizer) {
UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.8, options: .curveEaseInOut, animations: {
self.rectangleView.transform = CGAffineTransform.identity
}) { (completed:Bool) in
// Completion block
}
}