Link to home
Start Free TrialLog in
Avatar of joethermal
joethermal

asked on

Swift3 UIPickerView animate image

Hi, I have a UIPickerView with 2 images in each row, I would like to animate one of the images when it is selected ...I have been able to animate the whole pickerview when the selection changes (in didSelectRow), but I want to just animate one of the images

with the code below ...in the didSelectRow function how would I reference the selected "firstImage" image to apply the animation?

Instead of memoryPicker.transform I've tried...

pickerView.firstImage.transform -  which gives error: Value of type 'UIPickerView' has no member 'firstImage'
And
view.firstimage.transform -  gives error: Value of type 'UIView' has no member 'firstImage'
Thanks

[code]@IBOutlet weak var memoryPicker: UIPickerView!

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}

// The number of rows of data
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

    return objectsToRemember.count
}

func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
    return 100
}

func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {

    let view = UIView(frame: CGRect(x: 0, y:0, width: 250, height: 100))

    let firstImage = UIImageView()
        firstImage.image = UIImage(named:objectsToRemember[row])
        firstImage.frame = CGRect(x: 0, y: 0, width: 100, height: 100)

    let secondImage = UIImageView()
    secondImage.image = UIImage(named:objectsToRemember[row])
    secondImage.frame = CGRect(x: 150, y: 0, width: 100, height: 100)

    view.addSubview(firstImage)
    view.addSubview(secondImage)

    return view
}

// Actions
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

    //animate
    memoryPicker.transform = CGAffineTransform(scaleX: 0.2, y: 0.2)
    UIView.animate(withDuration: 1.5, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0, options: .allowUserInteraction, animations: {

        self.memoryPicker.transform = .identity

    }) { (success) in

    }
}[/code]
Avatar of Hamidreza Vakilian
Hamidreza Vakilian

Can you upload the xcode project?
Avatar of joethermal

ASKER

Hi, I tried to upload it but got an error message saying .swift files inside my zip file were not allowed.

you can access the project on my dropbox here...
https://www.dropbox.com/s/oal7aotbt632dx4/project.zip?dl=0

cheers
I have made some progress and can now access the firstImage using viewWithTag()

But my animation appears to be happening behind a copy of the image ...see video IMG_2075.MOV

Updated project files: https://www.dropbox.com/s/5tdoku8j9mqthvp/xproject.zip?dl=0

Any ideas why this is happening?

here is my edited viewForRow and didSelectRow

func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        
        //Memory view
        let view = UIView(frame: CGRect(x: 0, y:0, width: 250, height: 100))
        
        let firstImage = UIImageView()
            firstImage.image = UIImage(named:objectsToRemember[row])
            firstImage.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
            firstImage.tag = row
        
        let secondImage = UIImageView()
        secondImage.image = UIImage(named:objectsToRemember[row])
        secondImage.frame = CGRect(x: 150, y: 0, width: 100, height: 100)
        
        view.addSubview(firstImage)
        view.addSubview(secondImage)
        //end memory view
        
        return view
    }
    
    // Actions 
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        
        if let selectedImage = self.view.viewWithTag(row) as? UIImageView {
            print("firstImage tag = \(row + 1)")
            
            //animate
            selectedImage.transform = CGAffineTransform(scaleX: 0.3, y: 0.3)
            UIImageView.animate(withDuration: 1.5, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0, options: .allowUserInteraction, animations: {
                
                selectedImage.transform = .identity
            }) { (success) in
                
            }
        }
        
        
    }

Open in new window

This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.