UICollectionView 图像视图动画

Posted 2023-03-14

【中文标题】UICollectionView 图像视图动画

【英文标题】：UICollectionView imageview animation

【发布时间】：2015-10-06 22:33:44

【问题描述】：

我对 swift/objective C 相当陌生，我想知道是否有人可以帮助我解决与图像视图动画相关的问题（从右到左滚动）。我目前在我的 VC 上有一个 UIImageView，它的动画没有问题。但是，我认为最好使用 UICollectionView 代替。有人可以请我指出正确的方向吗？我还没有深入处理集合视图，所以这个概念对我来说相对较新。我对当前情况的代码是：

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource 

@IBOutlet weak var sponsorAnimation: UIImageView!
let images = [
    UIImage(named: "runforcure")!,
    UIImage(named: "marquee")!]

var index = 0

let animationDuration: NSTimeInterval = 1
let switchingInterval: NSTimeInterval = 3

 override func viewDidLoad() 
    super.viewDidLoad()

    sponsorAnimation.image = images[index]
    animateImageView()



func animateImageView() 
    CATransaction.begin()

    CATransaction.setAnimationDuration(animationDuration)
    CATransaction.setCompletionBlock 
        let delay = dispatch_time(DISPATCH_TIME_NOW, Int64(self.switchingInterval * NSTimeInterval(NSEC_PER_SEC)))
        dispatch_after(delay, dispatch_get_main_queue()) 
            self.animateImageView()
        
    

    let transition = CATransition()
    transition.type = kCATransitionPush
    transition.subtype = kCATransitionFromRight
    /*
    transition.type = kCATransitionPush
    transition.subtype = kCATransitionFromRight
    */
    sponsorAnimation.layer.addAnimation(transition, forKey: kCATransition)
    sponsorAnimation.image = images[index]

    CATransaction.commit()

    index = index < images.count - 1 ? index + 1 : 0

我的理想情况是一次显示一张图片，并且每 3 秒从右向左滚动一次。

更新：我认为我真的很接近，但是在最后两行代码中我不知道将 self.collectionview 放在哪里？ .任何帮助是极大的赞赏。再次提前感谢！

import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource 

@IBOutlet weak var collectionView: UICollectionView!

let images = [UIImage(named: "oneteam"), UIImage(named: "runforcure")]

var timer = NSTimer()



override func viewDidLoad() 
    super.viewDidLoad()

    timer = NSTimer.scheduledTimerWithTimeInterval(5, target: self, selector: Selector("switchImage"), userInfo: nil, repeats: true)






override func didReceiveMemoryWarning() 
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.


func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
    return self.images.count


func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 

    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! CollectionViewCell

    cell.imageView?.image = self.images[indexPath.row]


    /*I don't know where to place this line of code? If I place is outside of this function then it says unresolved identifier 'indexPath'*/
    self.collectionView?.scrollToItemAtIndexPath(indexPath, atScrollPosition: UICollectionViewScrollPosition.Top, animated: true)

    return cell

提前致谢！

【问题讨论】：

当前在我的 switchImage() 函数中，indexPath 没有在系统中注册...我肯定错过了什么！

【参考方案1】：

您可以在您的视图控制器上放置一个 CollectionView 并创建一个与集合视图大小相同的自定义集合视图单元格（因此一次只能在屏幕上显示一个单元格）并包含一个图像视图。

这将允许用户在单元格之间通过漂亮的快照动画在图像中滑动，并且您可以使用以下方法轻松地通过计时器上的单元格的 collectionview 索引进行动画处理：

对象：

[self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredVertically animated:YES];

斯威夫特：

self.collectionView?.scrollToItemAtIndexPath(indexPath, atScrollPosition: UICollectionViewScrollPosition.Top, animated: true)

设置集合视图和自定义单元格教程：http://adoptioncurve.net/archives/2012/09/a-simple-uicollectionview-tutorial/

【讨论】：

愚蠢的问题，但我在集合视图函数中应用 self.collectionView?.scrollToItemAtIndexPath(...) 对吗？

愚蠢的问题是最好的！ -- 你可以在视图控制器中的任何方法中调用 self.collectionView?.scrollToItemAtIndexPath，只要你引用了'self.collectionView?' （否则 self.collectionView 将不存在，您的应用程序将被混淆）；；因此，例如，在包含 yoru collectionview 的视图控制器的 viewDidLoad 方法中，您可以启动一个 NSTimer，它在一段时间内调用自身的方法：switchImage() self.collectionView?.scrollToItem.. 。

timer = NSTimer.scheduledTimerWithTimeInterval(5, target:self, selector: Selector("switchImage"), userInfo: nil, repeats: BOOL)

嗨乔希，我一定是遗漏了一些东西，因为我目前遇到了错误。请在我编辑的问题中查看附加代码！非常感谢您的帮助。

override func viewDidLoad() super.viewDidLoad() timer=NSTimer.scheduledTimerWithTimeInterval(5,target: self, selector: Selector("switchImage"), userInfo: nil, repeats: true) 我收到一条错误消息，提示未解析的标识符“计时器”？我在哪里声明这个计时器？谢谢！

【参考方案2】：

您在这里有两个单独的操作。

首先，您需要用数据填充集合视图。这就是你在 cellForItemAtIndexPath 中所做的。

其次，您需要对刚刚填充了数据（您的图像）的集合视图进行动画处理。

如果您希望它是全屏的，只需将每个单元格大小设置为集合视图的边界即可。

在 viewDidLoad 中确保为集合视图设置准备好数据源并准备好数据。

之后，您可以设置一个计时器以开始滚动浏览索引路径。您需要构建自己的 NSIndexPath 对象。如果只有一个部分，您只需要跟踪照片数组索引（作为行）。

最后，您需要一个条件来知道您何时到达照片的末尾以停止计时器（行

【讨论】：

能否请您解释一下我将如何构建自己的 NSIndexPath 对象？

好的，所以我只是尝试在我的 ViewController 类中声明 var indexPath1 = NSIndexPath(forRow: 0, forSection: 0) ...我在正确的轨道上吗？

是的。您将忽略该部分（它始终为 0），然后只增加行，这是您的照片数组索引。我将创建一个辅助方法来将您的索引 (NSUInteger) 包装在 NSIndexPath 中以供集合视图使用。 - (NSIndexPath *)indexPathForPhotoIndex:(NSUInteger)index return [NSIndexPath indexPathForRow:index section:0];