จะทำให้ภาพการเปลี่ยนแปลงใน UIImageView เป็นอย่างไร?


200

ฉันมีUIImageViewภาพ ตอนนี้ฉันมีภาพใหม่ (ไฟล์กราฟิก) และต้องการแสดงสิ่งนั้นในสิ่งนี้UIImageViewและต้องการแสดงให้เห็นว่าในนี้ ถ้าฉันเพิ่งตั้ง

myImageView.image = newImage;

ภาพใหม่สามารถมองเห็นได้ทันที ไม่สามารถเคลื่อนไหวได้

ฉันอยากให้มันจางหายไปในภาพลักษณ์ใหม่ ฉันคิดว่าอาจจะมีวิธีแก้ปัญหาที่ดีกว่าแค่สร้างใหม่UIImageViewบนนั้นและผสมกับแอนิเมชั่น


คำตอบ:


260

ฉันไม่แน่ใจว่าคุณสามารถทำให้ภาพเคลื่อนไหวของ UIV ที่มีเอฟเฟกต์จางลงได้หรือไม่เนื่องจากดูเหมือนว่าการเปลี่ยนมุมมองที่สนับสนุนทั้งหมดจะถูกกำหนดในการ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];

2
รหัสของคุณทำงานได้อย่างสมบูรณ์แบบเมื่อเปลี่ยนจากภาพหนึ่งไปอีกภาพหนึ่ง คุณรู้วิธีทำให้มันทำงานกับภาพเคลื่อนไหวโดยอัตโนมัติของรูปภาพในคุณสมบัติ UIImageView (คุณสมบัติ animationImages) หรือไม่?
CedricSoubrie

คุณสามารถลองใช้ CAKeyFrameAnimation สำหรับคุณสมบัติเนื้อหาของเลเยอร์ แต่ไม่แน่ใจว่าหากผลกระทบจะเหมือนกัน หรือตั้งค่าการมอบหมายแอนิเมชั่นและในฟังก์ชั่นการโทรกลับของผู้รับมอบสิทธิ์เริ่มการเคลื่อนไหวไปยังรูปภาพถัดไปเมื่อการเคลื่อนไหวก่อนหน้านี้เสร็จสิ้น
วลาดิเมียร์

2
วิธีนี้ง่ายกว่าการข้ามภาพในมุมมองแยกต่างหาก ขอบคุณ!
เคฟล่าร์

ถ้าเฟรมภาพตัวอย่างเปลี่ยนไปมันก็จะอยู่ในตำแหน่งเดิม .. นั่นก็คือดีลเบรกเกอร์!
hfossli

@Fossli คุณหมายถึงเมื่อเฟรมเปลี่ยนแปลงระหว่างการเคลื่อนไหวหรือไม่ นั่นเป็นคำถามที่แตกต่างออกไปแล้ว
Vladimir

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

เป็นไปได้อีกอย่างหนึ่ง


1
ง่ายและเปิดเอฟเฟกต์ภาพเคลื่อนไหวอื่น ๆ ทั้งหมดระหว่างรูปภาพ
ดังนั้นเมื่อถึง

1
มีปัญหาเดียวกับที่ @hfossli พูดถึงเกี่ยวกับการเปลี่ยนเฟรม อนิเมชั่นจะเฉื่อยชาหากมีการเปลี่ยนแปลงเลย์เอาต์
Geva

1
นี่เป็นทางออกที่ดีที่สุดเพราะสามารถใช้ร่วมกับภาพเคลื่อนไหวอื่น ๆ ได้
kelin

162

ในคำพูดของ Michael Scott ให้มันเรียบง่าย นี่เป็นวิธีง่าย ๆ ในSwift 3และSwift 4 :

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

3
ทำงานเหมือนจับใจ ขอบคุณ!
RobertoAllende

1
เยี่ยมมาก! ไม่ทราบเกี่ยวกับเรื่องนี้แช่งมันนาน :) :)
23411

1
สิ่งนี้จะเปลี่ยนเป็น 1 ภาพ ถ้าฉันมีรูปภาพมากมายและต้องการแสดงทีละภาพกับภาพเคลื่อนไหวการเปลี่ยนแปลง
Ammar Mujeeb

1
คุณสามารถใช้บล็อกเสร็จสิ้นเพื่อเปลี่ยนเป็นถัดไป
เซีย

41

นี่คือตัวอย่างหนึ่งในSwiftที่ก่อนจะยุบรูปภาพใหม่แล้วเพิ่มภาพเคลื่อนไหวเด้ง:

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 ด้านล่างนั้นช้าลงเล็กน้อยภาพเคลื่อนไหวจริงจะเกิดขึ้นเร็วขึ้น:

                                       GII ภาพเคลื่อนไหวที่ตีกลับ UIImageView


16

รหัส:

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;

ตัวอย่าง:

UIImageView ตัวอย่างจากรหัส

วิธีการแก้ปัญหาที่สนุกสนานและละเอียดยิ่งขึ้น : ( สลับไปที่การแตะ )

    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");


8

ด้วย Swift 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

6

ทำไมไม่ลองอันนี้

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()

ชุดนี้ UIImageView ที่จะทำซ้ำสลับไปตลอดกาล ... ผู้เขียนได้รับเพียงการขอเปลี่ยนแปลง แต่ :(
J-Dizzle

setAnimationRepeatCount
วิลเลียม Hu

SetAnimationRepeatCount ไม่เปลี่ยนแปลงอะไร ไม่เคยหยุด
Yucel Bayram

5
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;

3

มีวิธีการต่าง ๆ ที่นี่: 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];

2

ในฐานะของ iOS 5 อันนี้ง่ายกว่ามาก:

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

4
นั่นไม่ได้ช่วยแก้ปัญหาดั้งเดิมซึ่งก็คือคุณมีภาพที่แสดงอยู่แล้วและต้องการที่จะลบเลือนภาพใหม่ ...
Kendall Helmstetter Gelner

4
ใช่ .. คำตอบนี้ไม่สามารถแก้ปัญหาได้ คำถามไม่ใช่ว่าจะจางหายไปในมุมมองภาพ แต่จะจางหายไปจากภาพเก่าไปยังภาพใหม่ บล็อกแอนิเมชันถูกนำมาใช้ใน iOS 4
Bastian

2

Swift 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)

1

คำตอบของ Vladimir นั้นสมบูรณ์แบบ แต่ทุกคนอย่างฉันที่กำลังมองหาโซลูชันที่รวดเร็ว

โซลูชันนี้ใช้งานได้กับswift เวอร์ชัน 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
    }

คุณสามารถเรียกวิธีนี้ได้จากทุกที่ มันจะเปลี่ยนภาพเป็นภาพถัดไป (ภาพ) ที่มีภาพเคลื่อนไหว

สำหรับSwift เวอร์ชัน 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
    }

0

ส่วนขยาย Swift 5:

extension UIImageView{
    func setImage(_ image: UIImage?, animated: Bool = true) {
        let duration = animated ? 0.3 : 0.0
        UIView.transition(with: self, duration: duration, options: .transitionCrossDissolve, animations: {
            self.image = image
        }, completion: nil)
    }
}
 
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.