Rotating a UIButton by 90 degrees every time the button is clicked - ios

How do you rotate a UIButton by 90 degrees each time the button is clicked and also keep track of each rotated position/angle?
Here is the code I have so far but it only rotates once:
#IBAction func gameButton(sender: AnyObject) {
UIView.animateWithDuration(0.05, animations: ({
self.gameButtonLabel.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_2))
}))
}

self.gameButtonLabel.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_2))
Should be changed to
// Swift 3 - Rotate the current transform by 90 degrees.
self.gameButtonLabel.transform = self.gameButtonLabel.transform.rotated(by: CGFloat(M_PI_2))
// OR
// Swift 2.2+ - Pass the current transform into the method so it will rotate it an extra 90 degrees.
self.gameButtonLabel.transform = CGAffineTransformRotate(self.gameButtonLabel.transform, CGFloat(M_PI_2))
With CGAffineTransformMake..., you create a brand new transform and overwrite any transform that was already on the button. Since you want to append 90 degrees to the transform that already exists (which could be 0, 90, etc degrees rotated already), you need to add to the current transform. The second line of code I gave will do that.

Swift 4:
#IBOutlet weak var expandButton: UIButton!
var sectionIsExpanded: Bool = true {
didSet {
UIView.animate(withDuration: 0.25) {
if self.sectionIsExpanded {
self.expandButton.transform = CGAffineTransform.identity
} else {
self.expandButton.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2.0)
}
}
}
}
#IBAction func expandButtonTapped(_ sender: UIButton) {
sectionIsExpanded = !sectionIsExpanded
}

Related

Rotate a text MeshResource so it won't be mirrored

When adding a text MeshResource, with no angle and with a fixed world position, it looks fine from the camera perspective.
However, when the user walks to the other side of the text entity and turns around, it looks mirrored.
I don't want to use the look(at_) API since I only want to rotate it around the Y-axis 180 degrees and when the user passes it again to reset the angle to 0.
First we have to put text in anchor that will stay in the same orientation even when we rotate text. Then add textIsMirrored variable that will handle rotation when changed:
class TextAnchor: Entity,HasAnchoring {
let textEntity = ModelEntity(mesh: .generateText("text"))
var textIsMirrored = false {
willSet {
if newValue != textIsMirrored {
if newValue == true {
textEntity.setOrientation(.init(angle: .pi, axis: [0,1,0]), relativeTo: self)
} else {
textEntity.setOrientation(.init(angle: 0, axis: [0,1,0]), relativeTo: self)
}
}
}
}
required init() {
super.init()
textEntity.scale = [0.01,0.01,0.01]
anchoring = AnchoringComponent(.plane(.horizontal, classification: .any, minimumBounds: [0.3,0.3]))
addChild(textEntity)
}
}
Then in your ViewController you can create anchor that will have Camera as a target so we can track camera position and create out textAnchor:
let cameraAnchor = AnchorEntity(.camera)
let textAnchor = TextAnchor()
For it to work you have to add it as a child of your scene (preferably in viewDidLoad):
arView.scene.addAnchor(cameraAnchor)
arView.scene.addAnchor(textAnchor)
Now in ARSessionDelegate function you can check camera position in relation to your text and rotate it if Z axis is below 0:
func session(_ session: ARSession, didUpdate frame: ARFrame) {
if cameraAnchor.position(relativeTo: textAnchor).z < 0 {
textAnchor.textIsMirrored = true
} else {
textAnchor.textIsMirrored = false
}
}

Animate a rotated label in swift?

I am trying to animate a rotated label like this:
#IBOutlet fileprivate weak var loadingLabel: UILabel!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
loadingLabel.transform = CGAffineTransform(rotationAngle: CGFloat(0.2)) // rotation line
UIView.animate(withDuration: 2.0, animations: {
self.loadingLabel.transform = CGAffineTransform(translationX: 0, y: self.view.bounds.size.height)
})
}
When I comment out the rotation line of code (and keep the label unrotated), it works fine. But when I rotate it, the label starts off the screen at the beginning of the animation:
When I comment out the animation, the label is rotated perfectly fine (but no animation obviously):
How do I rotate the image and animate it, without having this weird placement?
Edit: To clarify: I want the label to start off rotated in the center of the screen, and just simply move the label. I do not want to rotate the image during the animation.
The correct answer is that you are supposed to concatenate the transformation matrices. If you don't want to do linear algebra then the easy way is that you use the transform to set the rotation and don't animate it, then animate the view's frame/center instead.
import UIKit
class V: UIViewController {
#IBOutlet var label: UILabel!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
label.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 6)
label.center.x += 300
UIView.animate(withDuration: 2) {
self.label.center.x -= 300
}
}
}
You can perform the animation with CABasicAnimation as it will give you more control on the animation and it has a completion block on which you can hide your label as well upon your requirement.
loadingLabel.transform = CGAffineTransform(rotationAngle: CGFloat(0.2)) // rotation line
let animationKey = "position.y"
CATransaction.begin()
let moveYAnimation = CABasicAnimation( keyPath: animationKey)
moveYAnimation.fromValue = loadingLabel.frame.origin.y
moveYAnimation.toValue = self.view.bounds.size.height
moveYAnimation.duration = 2
loadingLabel.layer.add( moveYAnimation, forKey: animationKey )
// Callback function
CATransaction.setCompletionBlock {
print("end animation")
self.loadingLabel.isHidden = true
}
// Do the actual animation and commit the transaction
loadingLabel.layer.add(moveYAnimation, forKey: animationKey)
CATransaction.commit()
Hope it will help you.
The first transform is ot of the animation block, it's why it begin out of the screen.
You should move it in the animation block, and use a completion handler to animate again.
UIView.animate(withDuration: 2.0, animations: {
//
}, completion: { (result) in
//
})
Be carefull, the angle is in radians.

I'm having trouble getting this CA animation to work

I'm trying to make an animation where the color red pulses on the screen and when the screen is tapped the speed of the pulse increases. Right now I have two issues. One, is that the animation does not occur, the second is that the animation must speed up without restarting the animation. I want the animation to speed up from whatever point it is at when the screen is tapped.
class ViewController: UIViewController {
var tapCount: Int = 0
var pulseSpeed: Double = 3
let pulseAnimLayer = CALayer()
let pulseAnim = CABasicAnimation(keyPath: "Opacity")
override func viewDidLoad() {
super.viewDidLoad()
counter.center = CGPoint(x: 185, y: 118)
pulseAnim.fromValue = 0.5
pulseAnim.toValue = 1.0
pulseAnim.duration = 3.0
pulseAnim.autoreverses = true
pulseAnim.repeatCount = .greatestFiniteMagnitude
pulseAnimLayer.add(pulseAnim, forKey: "Opacity")
}
func pulseAnimation(pulseSpeed: Double) {
UIView.animate(withDuration: pulseSpeed, delay: 0,
options: [UIViewAnimationOptions.repeat, UIViewAnimationOptions.autoreverse],
animations: {
self.red.alpha = 0.5
self.red.alpha = 1.0
}
)
}
#IBOutlet weak var red: UIImageView!
#IBOutlet weak var counter: UILabel!
#IBAction func screenTapButton(_ sender: UIButton) {
tapCount += 1
counter.text = "\(tapCount)"
pulseSpeed = Double(3) / Double(tapCount)
pulseAnim.duration = pulseSpeed
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
I didn't read this carefully enough the first time.
You've got an odd mix here of core animation and UIView animation. The two exist at different levels. Core Animation will allow you to animate a property on a view (say it's background color).
UIView animation is built on top of Core Animation and makes it easier to animate view changes automatically by building the underlying Core Animations.
You start with Core Animation when you create a CABasicAnimation but then you have a function, pulseAnimation which looks to be doing something using UIVIew animations. I think you can get rid of that function entirely.
When you add your CABasicAnimation you tell it to change the value of the layer's "Opacity". What you probably want there is "opacity" (lower case).
Your animation is being applied to a new CALayer that you've created... but you don't seem to ever put that layer into the view (so it is never drawn). More likely than not what you should probably do is attach your animation to the view's layer and just allow that layer to have it's color animated.
To add one layer to another use addSublayer (https://developer.apple.com/reference/quartzcore/calayer/1410833-addsublayer). The view's layer from your code should be available as self.view.layer though you may have to use it in viewWillAppear instead of in viewDidLoad
You need to set the alpha of the red imageview to 0.0 before animating
func pulseAnimation(pulseSpeed: Double) {
UIView.animate(withDuration: pulseSpeed, delay: 1.0,
options: [UIViewAnimationOptions.repeat, UIViewAnimationOptions.autoreverse],
animations: {
self.red.alpha = 0.5
self.red.alpha = 1.0
}
)
}
override func viewDidAppear(_ animated: Bool) {
self.red.alpha = 0.0
counter.center = CGPoint(x: 185, y: 118)
}

Swift UIView appearing in different places

Im trying to make a small game. And there is some problem with the animation. Im new to Swift. So lets take a look. I create a UIImageView picture and want to do animation of this picture appear in a different places on a screen. I believe that the algorithm will look like this:
Infinite loop{
1-GetRandomPlace
2-change opacity from 0 to 1 and back(with smooth transition)
}
Looks simple, but I can't understand how to do it correctly in Xcode.
Here is my test code but it looks useless
Thank you for help and sorry if there was already this question, I can't find it.
class ViewController: UIViewController {
#IBOutlet weak var BackgroundMainMenu:UIImageView!
#IBOutlet weak var AnimationinMenu: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// MoveBackgroundObject(AnimationinMenu)
// AnimationBackgroundDots(AnimationinMenu, delay: 0.0)
// self.AnimationinMenu.alpha = 0
//
// UIImageView.animateWithDuration(3.0,
// delay: 0.0,
// options: UIViewAnimationOptions([.Repeat, .CurveEaseInOut]),
// animations: {
// self.MoveBackgroundObject(self.AnimationinMenu)
// self.AnimationinMenu.alpha = 1
// self.AnimationinMenu.alpha = 0
// },
// completion: nil)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewWillAppear(animated: Bool) {
AnimationBackgroundDots(AnimationinMenu, delay: 0.0)
}
func ChangeOpacityto1(element: UIImageView){
element.alpha = 0
UIView.animateWithDuration(3.0) {
element.alpha = 1
}
}
func ChangeOpacityto0(element: UIImageView){
element.alpha = 1
UIView.animateWithDuration(3.0){
element.alpha = 0
}
}
func AnimationBackgroundDots(element: UIImageView, delay: Double){
element.alpha = 0
var z = 0
while (z<4){
MoveBackgroundObject(AnimationinMenu)
UIImageView.animateWithDuration(3.0,
animations: {
element.alpha = 0
element.alpha = 1
element.alpha = 0
},
completion: nil)
z++
}
}
func MoveBackgroundObject(element: UIImageView) {
// Find the button's width and height
let elementWidth = element.frame.width
let elementHeight = element.frame.height
// Find the width and height of the enclosing view
let viewWidth = BackgroundMainMenu.superview!.bounds.width
let viewHeight = BackgroundMainMenu.superview!.bounds.height
// Compute width and height of the area to contain the button's center
let xwidth = viewWidth - elementWidth
let yheight = viewHeight - elementHeight
// Generate a random x and y offset
let xoffset = CGFloat(arc4random_uniform(UInt32(xwidth)))
let yoffset = CGFloat(arc4random_uniform(UInt32(yheight)))
// Offset the button's center by the random offsets.
element.center.x = xoffset + elementWidth / 2
element.center.y = yoffset + elementHeight / 2
}
}
The problem is in AnimationBackgroundDots.
You are immediately creating 4 animations on the same view but only one can run at a time. What you need to do is wait until one animation is finished (fade in or fade out) before starting a new one.
Also, the animations closure is for setting the state you want your view to animate to. It looks at how your view is at the start, runs animations, then looks at the view again and figures out how to animate between the two. In your case, the alpha of the UIImageView starts at 0, then when animations runs, the alpha ends up being 0 so nothing would animate. You can't create all the steps an animation should take that way.
Want you need to do it move your view and start the fade in animation. The completion closure of fading in should start the fade out animation. The completion closure of the fading out should then start the process all over again. It could look something like this.
func AnimationBackgroundDots(element: UIImageView, times: Int) {
guard times > 0 else {
return
}
MoveBackgroundObject(element)
element.alpha = 1
// Fade in
UIView.animateWithDuration(3.0, animations: {
element.alpha = 1
}, completion: { finished in
// Fade Out
UIView.animateWithDuration(3.0, animations: {
element.alpha = 0
}, completion: { finished in
// Start over again
self.AnimationBackgroundDots(element, times: times-1)
})
})
}
You called also look at using keyframe animations but this case is simple enough that theres no benefit using them.
Also as a side note. The function naming convention in swift is to start with a lowercase letter, so AnimationBackgroundDots should be animationBackgroundDots.

Repeating animation on tap

I want to rotate a UIImage, I have managed to do so with the code below, however when I press the rotate button again, the image does not rotate anymore, could someone please explain why?
#IBAction func rotate(sender: UIButton) {
UIView.animateWithDuration(0.2, animations: {
self.shape.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_4) * 2)
})
}
You are changing your shape image view's transform to a new, fixed value. If you tap on it again, the transform already has that value. You set the transform to the same value again, which doesn't change anything.
You need to define an instance variable to keep track of the rotation.
var rotation: CGFloat = 0
#IBAction func rotate(sender: UIButton)
{
UIView.animateWithDuration(0.2, animations:
{
self.rotation += CGFloat(M_PI_4) * 2 //changed based on Daniel Storm's comment
self.shape.transform = CGAffineTransformMakeRotation(rotation)
})
}
That way, each time your tap the button you'll change the rotation variable from it's previous value to a new value and rotate to that new angle.

Resources