How do I enable a .jpg image to fade in, in swift uiKit - swift

Good evening.
I downloaded a .jpg image and attached it through storyboard, and linked it to Home.swift. At this point, when I run the simulator the image is there. It does nothing at this time, but it's there.
I am trying to modify the code so that the image fades in when the simulator first runs. However, swift isn't liking my approach.
Much appreciate any guidance.
import Foundation
import UIKit
class Home: UIViewController {
#IBOutlet var lonelinessLbl: UILabel!
#IBOutlet var Image: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
startAnimations()
// Do any additional setup after loading the view.
}
func startAnimations() {
Image.animationImages = [
UIImage(named: "birds.jpg")]
Image.animationDuration = 3
Image.startAnimations()
}
}

Inside startAnimations:
imageView.image = UIImage(named: "birds.jpg")
imageView.alpha = 0
UIViewPropertyAnimator(duration: 5.0, curve: .easeIn) {
self.imageView.alpha = 1.0
}.startAnimation()
(Note that I've renamed Image to imageView -- the Swift convention is to name variables in camel case, starting with a lowercase letter)

You can set the image to image view with animation.
Use the extension to apply animation anywhere.
extension UIImageView{
func setAnimatedImage(_ image: UIImage?) {
UIView.transition(with: self, duration: 0.5, options: .transitionCrossDissolve, animations: {
self.image = image
}, completion: nil)
}
}
Usage
yourImageView.setAnimatedImage(UIImage(named: "birds.jpg"))

Setting an image array to animationImages only helps you when you have a set of images to animate it like a gif.
If you want to present animation like increasing alpha you can do the following.
override func viewDidLoad() {
super.viewDidLoad()
Image.alpha = 0.0
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
UIView.animate(withDuration: 0.3,
animations: {
self.Image.alpha = 1.0
},
completion: nil)
}

Related

Change NSTextField text color with fade animation - Cocoa

I am trying to change NSTextField text color with fade animation by using NSAnimationContext. But it's not working. Please help me to solve this issue. Thanking you all!
Code:
override func viewDidLoad() {
super.viewDidLoad()
label!.animator().textColor = NSColor.black
}
#IBAction func changeColor(_ sender: NSButton){
NSAnimationContext.runAnimationGroup { (context) in
context.duration = 1.0
label!.animator().textColor = NSColor.red
}
}
Here is the outline of one possible solution:
Subclass NSAnimation, say with TextColorAnimation
Have the init take the NSTextField and final NSColor
Override currentProgress as per NSAnimation docs to (a) call the super implementation and (b) set the intermediate color and display the NSTextField
Use NSColor.blend(...) to determine the intermediate color
start this NSAnimation
You should get a nice smooth color transition. HTH
Update the color and alpha value in the completion handler:
#IBAction func changeColor(_ sender: NSButton){
NSAnimationContext.runAnimationGroup({ [self] context in
context.duration = 1.0
context.timingFunction = CAMediaTimingFunction(name: .easeOut)
label.animator().alphaValue = 0.0
label.animator().textColor = NSColor.black
}, completionHandler: { [self] in
NSAnimationContext.runAnimationGroup({ [self] context in
context.duration = 1.0
context.timingFunction = CAMediaTimingFunction(name: .easeIn)
label.animator().alphaValue = 1.0
label.animator().textColor = NSColor.red
}, completionHandler: {
})
})
}

RealityKit - Animate opacity of a ModelEntity?

By setting the color of a material on the model property of a ModelEntity, I can alter the opacity/alpha of an object. But how do you animate this? My goal is to animate objects with full opacity, then have them fade to a set opacity, such as 50%.
With SCNAction.fadeOpacity on a SCNNode in SceneKit, this was particularly easy.
let fade = SCNAction.fadeOpacity(by: 0.5, duration: 0.5)
node.runAction(fade)
An Entity conforms to HasTransform, but that will only allow you to animate scale, position, and orientation. Nothing to do with animation of the material for something like fading it in or out. The effect is in RealityComposer if you create a behavior for animating hide or showing, but there doesn't seem to be something similar to HasTransform to provide functionality for animating opacity.
I've been all around the documentation looking for something, my next idea is essentially creating a custom animation to replace this behavior, but it seems like it should be available and I am just not finding it.
I tested it using different techniques and came to the sad conclusion: you can't animate a material's opacity in RealityKit framework because RealityKit materials don't support animation at runtime (for now I hope). Let's wait for RealityKit's major update.
Here's a code you can use for test
(arView.alpha property just works):
import UIKit
import RealityKit
class ViewController: UIViewController {
#IBOutlet var arView: ARView!
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
arView.alpha = 1.0
opacityAnimation()
}
func opacityAnimation() {
UIView.animate(withDuration: 5.0,
animations: {
self.arView.alpha = 0.0
})
}
}
And use this code snippet in order to make sure that animation doesn't work properly
(there's no animation process, just value assignment):
import UIKit
import RealityKit
class ViewController: UIViewController {
#IBOutlet var arView: ARView!
let tetheringAnchor = AnchorEntity(world: [0,0,0])
var material = SimpleMaterial()
let mesh: MeshResource = .generateSphere(radius: 0.5)
var sphereComponent: ModelComponent? = nil
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
material.metallic = .float(1.0)
material.roughness = .float(0.0)
material.baseColor = .color(.red)
sphereComponent = ModelComponent(mesh: mesh,
materials: [material])
tetheringAnchor.components.set(sphereComponent!)
arView.scene.anchors.append(tetheringAnchor)
opacityAnimation()
}
func opacityAnimation() {
UIView.animate(withDuration: 5.0,
animations: {
self.material.metallic = .float(1.0)
self.material.roughness = .float(0.0)
self.material.baseColor = .color(.green)
self.sphereComponent = ModelComponent(mesh: self.mesh,
materials: [self.material])
self.tetheringAnchor.components.set(self.sphereComponent!)
self.arView.scene.anchors.append(self.tetheringAnchor)
})
}
}
As #AndyFedo says there is currently no way to animate the opacity nor alpha of an Entity.
Even changing a SimpleMaterial at run time currently results in flickering.
Having said this I was able to animate the Alpha of a SimpleMaterials Color, however based on testing it is in no way optimal or recommended for that matter.
But just in case you wanted to try to further experiment with this avenue please see an attached example which assumes that you only have a single SimpleMaterial:
class CustomBox: Entity, HasModel, HasAnchoring {
var timer: Timer?
var baseColour: UIColor!
//MARK:- Initialization
/// Initializes The Box With The Desired Colour
/// - Parameter color: UIColor
required init(color: UIColor) {
self.baseColour = color
super.init()
self.components[ModelComponent] = ModelComponent(mesh: .generateBox(size: [0.2, 0.2, 0.2]),
materials: [SimpleMaterial (color: baseColour, isMetallic: false)]
)
}
required init() { super.init() }
//MARK:- Example Fading
/// Fades The Colour Of The Entities Current Material
func fadeOut() {
var alpha: CGFloat = 1.0
timer = Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true) { timer in
if alpha == 0 {
timer.invalidate()
return
}
var material = SimpleMaterial()
alpha -= 0.01
material.baseColor = MaterialColorParameter.color(self.baseColour.withAlphaComponent(alpha))
material.metallic = .float(Float(alpha))
material.roughness = .float(Float(alpha))
DispatchQueue.main.async {
self.model?.materials = [material]
}
}
}
}
As such just to test you can create and then call the function like so:
let box = CustomBox(color: .green)
box.position = [0,0,-0.5]
arView.scene.anchors.append(box)
box.fadeOut()
Also I would politely ask, that this answer not get downvoted as I am simply iterating the fact that (a) it isn't possible with any current built in methods, and (b) that it can in part be achieved albeit to a very limited extent (and thus currently; in a way which one would see fit for production).
I don't know if it suits with your use case. But you should consider video material.
As you can see in this WWDC session (2min45). An entity with complex pulsating opacity.
https://developer.apple.com/videos/play/wwdc2020/10612/
you can also create the fade in experience in Reality Composer and trigger the .rcproject file in Xcode. Have not tested other interactions with .rcproject but I know at least this can load a model to fade in into the scene.

Invoke repeatable task when viewDidApper

I might be heading totally wrong direction, but what I'm trying to achieve is to load some view first and invoke some methods that will be running afterwards infinitely, while at the same time giving the User the possibility to interact with this view.
My first guess was to use viewDidApper with UIView.animate, as per below;
class MainView: UIView {
...
func animateTheme() {
//want this to print out infinitely
print("Test")
}
}
class ViewController: UIViewController {
#IBOutlet weak var mainView: MainView!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
UIView.animate(withDuration: 1.0, delay: 0.0, options: .repeat, animations: {
self.mainView.animateTheme()
}, completion: nil)
}
}
The case is that I can only see a single "Test" printed out but this has to be invoked infinitely. Also, as I mentioned the User needs to have the possibility to interact with the view once everything is loaded.
Thanks a lot for any of your help.
ViewDidAppear will indeed be called latest when the view is loaded, but I don´t think the user can or will have the time to interact before it´s loaded.
If you want to load animations after everything is loaded you could create a timer and wait x seconds before you do that. Below example will be called 10 seconds after initiation.
var timer = Timer()
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
timer = Timer.scheduledTimer(timeInterval: 10.0, target: self, selector: #selector(animateSomething), userInfo: nil, repeats: false)
}
func animateSomething() {
// Animate here
}
Update
To make an infinite loop you can use the following snippet:
UIView.animate(withDuration: 5.0, delay: 0, options: [.repeat, .autoreverse], animations: {
self.view.frame = CGRect(x: 100, y: 200, width: 200, height: 200)
}, completion: nil)
I've done something very similar on one of my ViewControllers that loads a UIWebView. While the webpage is loading I show a UILabel with text "Loading" and every 1.5 seconds I add a period to the end of the text. I think the approach you describe above and mine shown below have the same effect and neither would be considered an infinite loop.
private func showLoadingMessage(){
let label = loadingLabel ?? UILabel(frame: CGRect.zero)
label.text = "Loading"
view.addSubview(label)
loadingLabel = label
addEllipsis()
}
private func addEllipsis() {
if webpageHasLoaded { return }
guard let labelText = loadingLabel?.text else {
return
}
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
self.loadingLabel?.text = labelText + "."
self.addEllipsis()
}
}

animation: stop reset position of an element (swift)

I'm trying animations and I'm facing a big problem: when my animation finished and I do something ( touch the screen, etc), the elements reset their positions to their first position.
I found this: [blog]: Animation Blocks resets to original position after updating text
they say it's because elements have constraints or auto layout so turn it off to fix it but I don't want to turn it off.
Can we update constraints programmatically?
is there an other solution?
here's my animation:
#IBOutlet var tfUser: UITextfiled!
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
tfUser.center.x += view.bounds.width
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
UIView.animateWithDuration(2, delay: 1.8, options: [.CurveEaseInOut], animations: {
self.tfUser.center.x += self.view.bounds.width
//self.tfUser.frame = CGRectMake(0, 233, 375 , 89)
// i tried CGRectMake but it delete the animation
}, completion: nil)
}
In comment of my question , #Hardik Shekhat told to use :
self.tfUser.translatesAutoresizingMaskIntoConstraints = true
it works for me !

Why is happening this weird behaviour between Animations and HorizontalMotionEffects?

I was testing out some code and ended up with this piece of code:
import UIKit
class ViewController: UIViewController {
#IBOutlet var backgroundImageView: UIImageView!
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(true)
hideAndShow()
}
func hideAndShow(){
self.backgroundImageView.alpha = 0
UIView.animateWithDuration(1.0, delay: 0, options: .Repeat | .AllowUserInteraction | .Autoreverse | UIViewAnimationOptions.CurveEaseOut, animations: { [weak self] in
self?.backgroundImageView.alpha = 1
}, completion: nil)
}
override func viewDidLoad() {
super.viewDidLoad()
self.backgroundImageView.contentMode = UIViewContentMode.Center;
self.backgroundImageView.backgroundColor = UIColor(patternImage: UIImage(named: "640x1136launch")!)
self.addParallaxEffectToView(self.backgroundImageView)
self.backgroundImageView.frame = CGRectInset(self.backgroundImageView.frame, -50, -50);
}
func addParallaxEffectToView(view: UIView ) {
// Set vertical effect
var verticalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y", type: UIInterpolatingMotionEffectType.TiltAlongVerticalAxis)
verticalMotionEffect.minimumRelativeValue = -50
verticalMotionEffect.maximumRelativeValue = 50
// Set horizontal effect
var horizontalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x", type: UIInterpolatingMotionEffectType.TiltAlongHorizontalAxis)
horizontalMotionEffect.minimumRelativeValue = -50
horizontalMotionEffect.maximumRelativeValue = -50
// Create group to combine both
var group = UIMotionEffectGroup.new()
group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]
// Add both effects to your view
view.addMotionEffect(group);
}
}
What this code was supposed to do is to make a blinking effect over an UIImage that I have on my UIViewController.
This image also has an UIMotionEffect (tilt in this case) that works perfect to me when tilting the device vertically but for some reason does not work when my device is tilted horizontally.
Nevertheless, the point is that when I call to my hideandShow() function, my view starts to blink, but also, at the same pace,..starts to move horizontally!!!
Why is this happening? I'm out of ideas.