[日译中]通过UIImageView来制作逐帧动画

Apr 17, 2020 舍温 舍温 17 min read 应用开发 iOS , 译文 , 动画

写在前面的话

在iOS中，动画的方式不仅仅有CoreAnimation，这种使用各个控件属性修改而成的动画。 我们还有最原始的动画方案 - 逐帧动画（Frame By Frame）！ 意思很简单，就是使用一帧一帧的图片来进行动画的制作，有过视频编辑经验的开发者应该知道，在帧率为25～30时，人眼已经可以把它当作流畅的动画了。（什么？你要60FPS，请左转移至孤岛危机区） 本篇文章翻译于笔者在北京被抓起来隔离的14天中，目前第8天。（written in 如家） 这是一篇3分钟读物文章，用来快速设定逐帧动画。 希望能够借此篇简短的文章，抛砖引玉。  

通过UIImageView来制作逐帧动画

作者：豪徳寺 謙 原文链接：https://qiita.com/shtnkgm/items/f0b189e4184fe6c90707 UIImage虽然是用来表示图像的控件，视作场合也可以使用作为逐帧动画。但是，如果是那种圆弧一样的形状层动画的话，请使用CAShapeLayer。

通过UIImageView来制作逐帧动画

将一张一张图像按照一定时间间隔进行表示的话，就是最后能看起来好像动画一样的逐帧动画。 如果是制作真正的动画的话，或许使用其他的API比较好，但是，要说最简单的方法，UIImageView也是一个好的选择。 目录： 1. 制作逐帧动画的步骤 2.示例代码 3.设定storyboard 4.示例动画

通过UIImageView来制作逐帧动画

首先，需要制作一个UIImage的数组，用来分割一帧一帧的动画。

// 制作UIImage的数组
var imageListArray :Array = []

// 从图像生成UIImage实例
let image1 = UIImage(named:”cat_1”)!
let image2 = UIImage(named:”cat_2”)!
…

// 向数组内添加UIImage
imageListArray.append(image1)
imageListArray.append(image2)
…

生成UIImageView的实例对象，将刚才的数组设定到animationImages属性上。

// UIImageView的实例对象
let imageView:UIImageView = UIImageView(image:image1)

…

// 将属性赋值为图像数组
imageView.animationImages = imageListArray

// 设定间隔（秒）
imageView.animationDuration = 3

// 设定重复次数，0为无限重复
imageView.animationRepeatCount = 1

// 动画开始
imageView.startAnimating()

// 动画结束
imageView.stopAnimating()

示例代码

ViewController.swift

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 设定画面背景
    self.view.backgroundColor = UIColor(red:0.44,green:0.41,blue:0.36,alpha:1.0)
}

// 点击按钮以后动画开始
@IBAction func start(sender: AnyObject) {
    // 动画的每帧图像
    let image1 = UIImage(named:"cat_1")!
    let image2 = UIImage(named:"cat_2")!
    let image3 = UIImage(named:"cat_3")!
    let image4 = UIImage(named:"cat_4")!
    
    // 声明图像数组
    var imageListArray :Array<UIImage> = []
    // 往数组中添加各个图像，虽然有点长...
    imageListArray.append(image1)
    imageListArray.append(image2)
    imageListArray.append(image3)
    imageListArray.append(image4)
    

    // 画面的屏幕尺寸
    let screenWidth = self.view.bounds.width
    let screenHeight = self.view.bounds.height

    // 图像的尺寸
    let imageWidth = image1.size.width
    let imageHeight = image1.size.height

    // 生成UIImageView实例对象，并初始化为第一张图像
    let imageView:UIImageView = UIImageView(image:image1)
    
    // 按照图像本身的尺寸设定imageView的尺寸
    let rect = CGRect(x:0,
                      y:0,
                      width:imageWidth,
                      height:imageHeight )
    
    imageView.frame = rect
    
    // 将imageView居中
    imageView.center = CGPoint(x:screenWidth/2, y:screenHeight/2)

    // 将imageView加入为子视图
    self.view.addSubview(imageView)
    
    // 将animationImages赋值为图像数组
    imageView.animationImages = imageListArray
    
    // 间隔时间（秒）
    imageView.animationDuration = 3
    // 重复次数
    imageView.animationRepeatCount = 1
    
    // 动画开始
    imageView.startAnimating()
    
    // 动画结束
    //imageView.stopAnimating()
    
}

}

设定stroyboard

添加对应Retina屏幕@2x的图像， cat_1@2x.jpg, cat_2@2x.jpg, … 把这些放到Assets.xcassets里面。 将按钮添加至storyboard，添加适当背景色，并把「Touch up Inside」事件与start(sender: AnyObject)方法关联起来。  

示例动画

 

总结

逐帧动画也是一项很好的解决方案，这篇文章简短的介绍了逐帧动画的设定原理。 可以作为3分钟读物来查阅～ 期待下次再见～

Last updated on