Twitter khuong291
Twitter khuong291

Reputation: 11682

fade in fade out for an images array swift

I have a global variable of images array

public var images = ["11", "12", "13", "14", "15", "16", "17", "18", "11", "12", "13", "14", "15", "16", "17", "18", "11", "12", "13", "14", "15", "16", "17", "18"]

I want to show it fade in fade out each image after 2 seconds when I click the button. Means when the image "11" appear first, after 2 seconds, it will fade out, and then the image "12" will fade in and so on. But my code doesn't work well.

here is my code:

@IBAction func playAutomaticPhotoImages(sender: AnyObject) {

    for image in images {
      photoImageView.hidden = false
      photoImageView.alpha = 1.0
      UIView.animateWithDuration(2.0, animations: {
        self.photoImageView.image = UIImage(named: image)
        self.photoImageView.alpha = 1
        }, completion: {
          (value: Bool) in
          self.photoImageView.hidden = true
          self.photoImageView.alpha = 0.0
      })
    }
  }

here is my image:

enter image description here

Upvotes: 0

Views: 1965

Answers (4)

Manjunath C.Kadani
Manjunath C.Kadani

Reputation: 174

var images = ["1","2","3"]

private func showImage( at index : Int) {
    if slideImage1.image != nil {
        slideImage1.fadeOut { (finished: Bool) in
            self.slideImage1.image = UIImage(named: self.images[index])
            self.slideImage1.fadeIn()
            DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.5) {
                self.showImage(at: (index + 1) % self.images.count)
            }
        }
    } else {
        slideImage1.image = UIImage(named: images[index])
        slideImage1.fadeIn()
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.5) {
            self.showImage(at: (index + 1) % self.images.count)
        }
    }
}

I have used fadeIn() and fadeOut(), To display images from array.

slideImage1 is UIImageView

Upvotes: 0

TheAppMentor
TheAppMentor

Reputation: 1099

Try this in Swift :

class ImageLoader {
var images = ["Image1","Image2","Image3","Image4"]

var copyImages : [String] = []

var loadNextImage : Bool = false {
    didSet {
        if loadNextImage{
            // Reload the array if its empty.
            if copyImages.count == 0 {
                copyImages = images
            }

            // Load next image here.
            let theImage = copyImages.removeFirst()
            
            // Pass the image to the load function.
            loadNextAnimationImage(theImage)
        }
    }
}

func loadNextAnimationImage(theImage : String){
    
    UIView.animateWithDuration(2.0, animations: { () -> Void in
        // Do your animation action here.
        print ("The i")
        
        }) { (animationComplete) -> Void in
            if animationComplete {
                
                self.loadNextImage = true
            }
    }
  }
}

Upvotes: 0

Anbu.Karthik
Anbu.Karthik

Reputation: 82759

you can do this multiple ways

Choice -1

@IBAction func playAutomaticPhotoImages(sender: AnyObject) {

 self.animateImages()

 }

fun animateImages()
{
  var count: Int = 0

  var images = ["11", "12", "13", "14", "15", "16", "17", "18", "11", "12", "13", "14", "15", "16", "17", "18", "11", "12", "13", "14", "15", "16", "17", "18"]

var image: UIImage = images[(count % images.count)]

UIView.transitionWithView(self.photoImageView, duration: 2.0, options: .CurveEaseOut, animations: {() -> Void in
self.photoImageView.image = image
}, completion: {(finished: Bool) -> Void in
self.animateImages()
// once finished, repeat again
count++
})

 }

Choice-2

 @IBAction func playAutomaticPhotoImages(sender: AnyObject) {

 self.animateImages(0) /*call animageImage with parameter number as image number as i user image name as "11", "12", "13", "14", "15", "16", "17", "18", "11", "12", "13", "14", "15", "16", "17", "18", "11", "12", "13", "14", "15", "16", "17", "18"*/

 }



    func animateImages(no:Int)
    {
        var Number:Int = no
        let t:NSTimeInterval = 1;
        let t1:NSTimeInterval = 0;
        var name:String = "yourImageName\(Number).png"
        self.photoImageView!.alpha = 0.4
        self.photoImageView!.image = UIImage(named:name);

        //code to animate bg with delay 2 and after completion it recursively calling animateImage method 
        UIView.animateWithDuration(2.0, delay: 0, options:UIViewAnimationOptions.CurveEaseOut, animations: {() in 
                                                       self.photoImageView!.alpha = 1.0;
                                                   }, 
                                         completion: {(Bool) in
                                                      Number++;

                                                      self. animateImages(Number); 
                                                   })
    }
}

Choice-3

@IBAction func playAutomaticPhotoImages(sender: AnyObject) {

NSTimer.scheduledTimerWithTimeInterval(0.2, target: self, selector: "crossfade", userInfo: nil, repeats: true)


photoImageView.animationImages = images

photoImageView.animationDuration = 2
photoImageView.animationRepeatCount = 0        
photoImageView.startAnimating()


 }




func crossfade() {
UIView.animateWithDuration(2.0, delay: 0.0, options: .CurveEaseInOut, animations: {() -> Void in
    photoImageView.alpha = !photoImageView.alpha
}, completion: {(done: Bool) -> Void in
    //
})
}

Upvotes: 2

tutu_magi
tutu_magi

Reputation: 96

you should begin the next image show animation when the previous animation complete.if you put the animation code in the for scope,the animation transaction will be sent the runloop at a time. so your view will not be normal.

Upvotes: 0

Related Questions