কীভাবে কোনও ইউআইআইমেজভিউতে চিত্রের পরিবর্তনটি অ্যানিমেট করবেন?

Question

আমার UIImageViewএকটি ইমেজ আছে এখন আমার কাছে সম্পূর্ণ নতুন চিত্র (গ্রাফিক ফাইল) রয়েছে এবং এটি এটি প্রদর্শন করতে চাই UIImageView। আমি যদি ঠিক সেট

myImageView.image = newImage;

নতুন চিত্রটি অবিলম্বে দৃশ্যমান। অ্যানিমেটেবল নয়।

আমি চাই যে এটি সুন্দরভাবে নতুন চিত্রটিতে ম্লান হোক। আমি ভেবেছিলাম যে কেবল এর UIImageViewউপরে একটি নতুন তৈরি করা এবং অ্যানিমেশনের সাথে মিশ্রণের চেয়ে আরও ভাল সমাধান আছে ?

Comments

stackoverflow.com/questions/7638831/…

— কুমার কেএল

Answer 1

আমি নিশ্চিত নই যে আপনি ইউআইভিউজগুলিকে বিবর্ণ প্রভাবের সাথে অ্যানিমেট করতে পারবেন বলে মনে হচ্ছে যে সমস্ত সমর্থিত দৃশ্যের রূপান্তরগুলি গণনায় সংজ্ঞায়িত হয়েছে UIViewAnimationTransition। বিবর্ণ প্রভাব কোরএ্যানিমেশন ব্যবহার করে অর্জন করা যেতে পারে। এই পদ্ধতির উদাহরণের উদাহরণ:

#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

আপনার কোডটি অন্য চিত্র থেকে অন্য চিত্রে যাওয়ার সময় পুরোপুরি কাজ করেছিল। আপনি কি জানেন যে এটি কোনও ইউআইআইমেজভিউতে (অ্যানিমেশন আইমেজ সম্পত্তি) চিত্রগুলির স্বয়ংক্রিয় অ্যানিমেশন দিয়ে কীভাবে কাজ করবে?

— সিড্রিকসৌব্রি

আপনি স্তরটির বিষয়বস্তুর জন্য 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
}

নীচের জিআইএফ উদাহরণটি কিছুটা ধীর হয়ে গেছে, আসল অ্যানিমেশনটি দ্রুত ঘটে:

                                       

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 (ক্যাটারানসিশন (), 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

এটি চিরকাল টগলিংয়ের পুনরাবৃত্তি করতে ইউআইআইমেজভিউকে সেট করে ... লেখক কেবল পরিবর্তনের জন্য

— বলছিলেন

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

এখানে কয়েকটি ভিন্ন পদ্ধতি রয়েছে: আমার স্মরণে ইউআইএআইএনএমেশনগুলি এটি আপনার চ্যালেঞ্জের মতো বলে মনে হচ্ছে।

সম্পাদনা করুন: আমার খুব অলস :)

পোস্টে, আমি এই পদ্ধতিটি উল্লেখ করছি:

[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

আইওএস 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

ভ্লাদিমিরের উত্তরটি সঠিক, তবে আমার মতো যে কেউ দ্রুত সমাধানের সন্ধান করছে

এই সমাধানটি দ্রুততম সংস্করণ ৪.২ এর জন্য কাজ করা হয়

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 এর জন্য বেলো দ্রবণটি ব্যবহার করুন

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
    }