UIImageView में छवि के परिवर्तन को कैसे चेतन करें?

Question

मेरी UIImageViewएक छवि है। अब मेरे पास पूरी तरह से नई छवि (ग्राफिक फ़ाइल) है, और इसमें वह प्रदर्शित करना चाहते हैं UIImageView। अगर मैं अभी सेट करता हूं

myImageView.image = newImage;

नई छवि तुरंत दिखाई दे रही है। एनिमेशन नहीं है।

मैं इसे अच्छी तरह से नई छवि में फीका करना चाहता हूँ। मैंने सोचा कि शायद उसके UIImageViewऊपर एक नया बनाने और एनीमेशन के साथ सम्मिश्रण करने की तुलना में बेहतर समाधान है ?

Comments

stackoverflow.com/questions/7638831/…

— कुमार केएल

Answer 1

मुझे यकीन नहीं है कि आप फीका प्रभाव के साथ यूआईवीवाई को चेतन कर सकते हैं क्योंकि ऐसा लगता है कि सभी समर्थित दृश्य संक्रमणों को UIViewAnimationTransitionगणना में परिभाषित किया गया है । CoreAnimation का उपयोग करके लुप्त होती प्रभाव प्राप्त किया जा सकता है। इस दृष्टिकोण के लिए नमूना उदाहरण:

#import <QuartzCore/QuartzCore.h>
...
imageView.image = [UIImage imageNamed:(i % 2) ? @"3.jpg" : @"4.jpg"];

CATransition *transition = [CATransition animation];
transition.duration = 1.0f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;

[imageView.layer addAnimation:transition forKey:nil];

Comments

एक छवि से दूसरी छवि में जाने पर आपका कोड पूरी तरह से काम करता है। क्या आप जानते हैं कि इसे UIImageView (एनीमेशनआईमेज्स प्रॉपर्टी) में छवियों के स्वचालित एनीमेशन के साथ कैसे काम करना है?

— सेड्रिकसाउरी

आप परत की सामग्री संपत्ति के लिए CAKeyFrameAnimation का उपयोग करने का प्रयास कर सकते हैं, हालांकि यह सुनिश्चित नहीं है कि प्रभाव समान होगा। या एनीमेशन प्रतिनिधि सेट करें और प्रतिनिधि कॉलबैक फ़ंक्शन में पिछली एनीमेशन खत्म होने पर अगली छवि के लिए एनिमेशन करना शुरू करें।

— व्लादिमीर

यह निश्चित रूप से एक अलग छवि दृश्य को मैन्युअल रूप से पार करने की तुलना में सरल है। धन्यवाद!

— केवलर

खैर .. अगर छवि के फ्रेम में बदलाव होता है तो यह उसी स्थिति में रहता है .. एक सौदा ब्रेकर!

— hfossli

@ फॉस्ली, आपका मतलब है कि एनीमेशन के दौरान फ्रेम कब बदलता है? यह एक अलग सवाल है

— व्लादिमीर

Answer 2

[UIView transitionWithView:textFieldimageView
                  duration:0.2f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    imageView.image = newImage;
                } completion:nil];

एक और संभावना है

Comments

सरल और छवियों के बीच अन्य एनीमेशन प्रभावों की एक पूरी श्रृंखला को खोलता है।

— सो ओवर इट

एक ही समस्या है कि @hfossli ने फ्रेम परिवर्तन के संबंध में उल्लेख किया है। अगर उस दौरान लेआउट बदले जाते हैं तो एनीमेशन सुस्त हो जाएगा।

— गेवा

यह सबसे अच्छा समाधान है, क्योंकि इसे अन्य एनिमेशन के साथ जोड़ा जा सकता है।

— केलिन

Answer 3

माइकल स्कॉट के शब्दों में, इसे सरल बेवकूफ बनाए रखें। यहाँ स्विफ्ट 3 और स्विफ्ट 4 में ऐसा करने का एक सरल तरीका है :

UIView.transition(with: imageView,
                  duration: 0.75,
                  options: .transitionCrossDissolve,
                  animations: { self.imageView.image = toImage },
                  completion: nil)

Comments

एक जादू की तरह काम करता है। धन्यवाद!

— राबर्टोएलेन्डे

ऊऊ महान! इस लानत के बारे में इतने लंबे समय तक पता नहीं चला :)

— सबीलैंड

यह 1 छवि में बदल जाएगा। क्या होगा यदि मेरे पास छवियों की एक सरणी है और संक्रमण एनीमेशन के साथ एक-एक करके दिखाना चाहते हैं?

— अम्मार मुजीब

आप अगले करने के लिए संक्रमण के लिए पूरा ब्लॉक का उपयोग कर सकते हैं।

— जिया

Answer 4

यहां स्विफ्ट में एक उदाहरण है जो पहले एक नई छवि को पार करेगा और फिर एक उछाल वाले एनीमेशन को जोड़ देगा:

var selected: Bool {
  willSet(selected) {
    let expandTransform:CGAffineTransform = CGAffineTransformMakeScale(1.15, 1.15);
    if (!self.selected && selected) {
      UIView.transitionWithView(self.imageView,
        duration:0.1,
        options: UIViewAnimationOptions.TransitionCrossDissolve,
        animations: {
          self.imageView.image = SNStockCellSelectionAccessoryViewImage(selected)
          self.imageView.transform = expandTransform
        },
        completion: {(finished: Bool) in
          UIView.animateWithDuration(0.4,
            delay:0.0,
            usingSpringWithDamping:0.40,
            initialSpringVelocity:0.2,
            options:UIViewAnimationOptions.CurveEaseOut,
            animations: {
              self.imageView.transform = CGAffineTransformInvert(expandTransform)
            }, completion:nil)
      })
    }
  }
}

var imageView:UIImageView

यदि imageViewसब-व्यू के रूप में सही तरीके से जोड़ा जाता है, तो बीच-बीच में टॉगल selected = falseकरने के लिए selected = trueएक उछाल वाले एनीमेशन के साथ छवि को स्वैप करना चाहिए। SNStockCellSelectionAccessoryViewImageवर्तमान चयन स्थिति के आधार पर एक अलग छवि लौटाता है, नीचे देखें:

private let SNStockCellSelectionAccessoryViewPlusIconSelected:UIImage = UIImage(named:"PlusIconSelected")!
private let SNStockCellSelectionAccessoryViewPlusIcon:UIImage = UIImage(named:"PlusIcon")!

private func SNStockCellSelectionAccessoryViewImage(selected:Bool) -> UIImage {
  return selected ? SNStockCellSelectionAccessoryViewPlusIconSelected : SNStockCellSelectionAccessoryViewPlusIcon
}

नीचे दिया गया GIF उदाहरण थोड़ा धीमा है, वास्तविक एनीमेशन तेजी से होता है:

                                       

Answer 5

कोड:

var fadeAnim:CABasicAnimation = CABasicAnimation(keyPath: "contents");

fadeAnim.fromValue = firstImage;
fadeAnim.toValue   = secondImage;
fadeAnim.duration  = 0.8;         //smoothest value

imageView.layer.addAnimation(fadeAnim, forKey: "contents");

imageView.image = secondImage;

उदाहरण:

मज़ा, अधिक क्रिया समाधान : ( एक नल पर टॉगल करना )

    let fadeAnim:CABasicAnimation = CABasicAnimation(keyPath: "contents");

    switch imageView.image {
        case firstImage?:
            fadeAnim.fromValue = firstImage;
            fadeAnim.toValue   = secondImage;
            imageView.image    = secondImage;
        default:
            fadeAnim.fromValue = secondImage;
            fadeAnim.toValue   = firstImage;
            imageView.image    = firstImage;
    }

    fadeAnim.duration = 0.8;

    imageView.layer.addAnimation(fadeAnim, forKey: "contents");

Answer 6

इसे इस्तेमाल करे:

_imageView.image = image;
[_imageView.layer addAnimation:[CATransition animation] forKey:kCATransition];

Comments

स्विफ्ट: _imageView.layer.addAnimation (CATransition (), forKey: kCATransition)

— यूजीन ब्रैगनेट्स

Answer 7

स्विफ्ट 3 के साथ

extension UIImageView{   
 var imageWithFade:UIImage?{
        get{
            return self.image
        }
        set{
            UIView.transition(with: self,
                              duration: 0.5, options: .transitionCrossDissolve, animations: {
                                self.image = newValue
            }, completion: nil)
        }
    }
}

उपयोग:

myImageView.imageWithFade = myImage

Answer 8

यह कोशिश क्यों नहीं करते।

NSArray *animationFrames = [NSArray arrayWithObjects:
  [UIImage imageWithName:@"image1.png"],
  [UIImage imageWithName:@"image2.png"], 
  nil];

UIImageView *animatedImageView = [[UIImageView alloc] init];
animatedImageView.animationImages = animationsFrame;
[animatedImageView setAnimationRepeatCount:1];
[animatedImageView startAnimating];

एक तेज संस्करण:

let animationsFrames = [UIImage(named: "image1.png"), UIImage(named: "image2.png")]
let animatedImageView = UIImageView()
animatedImageView.animationImages = animationsFrames
animatedImageView.animationRepeatCount = 1
animatedImageView.startAnimating()

Comments

इस सेट को दोहराने के लिए UIImageView हमेशा के लिए टॉगल ... लेखक सिर्फ हालांकि एक बदलाव के लिए पूछ रहा था :(

— जे-Dizzle

setAnimationRepeatCount

— विलियम हू

SetAnimationRepeatCount कुछ भी नहीं बदलता है। यह कभी नहीं रुकता

— युकेएल बेय्राम

Answer 9

CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"contents"];
fadeAnim.fromValue = (__bridge id)imageView.image.CGImage;
fadeAnim.toValue = (__bridge id)[UIImage imageNamed:@"newImage.png"].CGImage;
fadeAnim.duration = 2.0;
[imageView.layer addAnimation:fadeAnim forKey:@"contents"];
imageView.layer.contents = (__bridge id)[UIImage imageNamed:@"newImage.png"].CGImage;

Answer 10

यहाँ कुछ अलग दृष्टिकोण हैं: मेरे स्मरण के लिए UIAnimations यह आपकी चुनौती की तरह लगता है।

संपादित करें: मुझे बहुत आलसी :)

पोस्ट में, मैं इस विधि का उल्लेख कर रहा था:

[newView setFrame:CGRectMake( 0.0f, 480.0f, 320.0f, 480.0f)]; //notice this is OFF screen!
[UIView beginAnimations:@"animateTableView" context:nil];
[UIView setAnimationDuration:0.4];
[newView setFrame:CGRectMake( 0.0f, 0.0f, 320.0f, 480.0f)]; //notice this is ON screen!
[UIView commitAnimations];

लेकिन एनीमेशन के बजाय फ्रेम, आप अल्फा को चेतन करते हैं:

[newView setAlpha:0.0]; // set it to zero so it is all gone.
[UIView beginAnimations:@"animateTableView" context:nil];
[UIView setAnimationDuration:0.4];
[newView setAlpha:0.5]; //this will change the newView alpha from its previous zero value to 0.5f
[UIView commitAnimations];

Answer 11

IOS 5 के रूप में यह एक कहीं अधिक आसान है:

[newView setAlpha:0.0];
[UIView animateWithDuration:0.4 animations:^{
    [newView setAlpha:0.5];
}];

Comments

यह मूल समस्या में मदद नहीं करता है, जो यह है कि आपके पास पहले से प्रदर्शित एक छवि है, और एक नई छवि के लिए क्रॉस-फेड करना चाहते हैं ...

— केंडल हेल्मेस्सटर गेलनर

सही .. इस जवाब से सवाल हल नहीं होता। सवाल यह नहीं था कि इमेजव्यू में फीका कैसे पड़े बल्कि एक पुरानी इमेज से नई इमेज तक फीका हो जाए। आईओएस 4 में एनीमेशन ब्लॉकों को पेश किया गया था

— बैस्टियन

Answer 12

स्विफ्ट 4 यह सिर्फ कमाल है

  self.imgViewPreview.transform = CGAffineTransform(scaleX: 0, y: 0)
          UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: .curveEaseOut, animations: {
              self.imgViewPreview.image = newImage
              self.imgViewPreview.transform = .identity
          }, completion: nil)

Answer 13

व्लादिमीर का जवाब एकदम सही है, लेकिन मेरे जैसा कोई भी जो तेजी से समाधान की तलाश में है

यह समाधान स्विफ्ट संस्करण 4.2 के लिए कार्य किया गया है

var i = 0
    func animation(){
        let name = (i % 2 == 0) ? "1.png" : "2.png"
        myImageView.image = UIImage.init(named: name)
        let transition: CATransition = CATransition.init()
        transition.duration = 1.0
        transition.timingFunction = CAMediaTimingFunction.init(name: .easeInEaseOut)
        transition.type = .fade
        myImageView.layer.add(transition, forKey: nil)
        i += 1
    }

आप इस विधि को कहीं से भी कॉल कर सकते हैं। यह एनीमेशन के साथ छवि को अगले एक (छवि) में बदल देगा।

के लिए स्विफ्ट संस्करण 4.0 उपयोग bellow समाधान

var i = 0
    func animationVersion4(){
        let name = (i % 2 == 0) ? "1.png" : "2.png"
        uiImage.image = UIImage.init(named: name)
        let transition: CATransition = CATransition.init()
        transition.duration = 1.0
        transition.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut)
        transition.type = kCATransitionFade
        uiImage.layer.add(transition, forKey: nil)
        i += 1
    }