浅谈swift动画(二)

逐帧动画

逐帧动画的实现就是将图片一帧一帧的渲染,然后在短时间内依次展示出来,即可实现动画效果。

基于NSTimer实现效果:

这种基于定时器刷新的效果,可以用于动画帧率不高,帧率间隔不十分严格的情况下。

import UIKit

class ViewController: UIViewController {
    var imageView:UIImageView?
    var timer:Timer?
    var index:Int = 0
    override func viewDidLoad() {
        super.viewDidLoad()
        imageView = UIImageView()
        imageView?.frame = UIScreen.main.bounds
        imageView?.contentMode = UIViewContentMode.scaleAspectFit
        self.view.addSubview(imageView!)
        index = 0
        timer = Timer.scheduledTimer(timeInterval: 0.1, target: self, selector: #selector(ViewController.refushImage), userInfo:nil, repeats: true)
    }
    func refushImage(){
        NSLog("%d",index)
        imageView?.image = UIImage(named: "\(index).png")
        index += 1
        if(index == 67){
            index = 0
        }
    }
}

基于CADisplayLink:

import UIKit

class ViewController: UIViewController {

    var imageView:UIImageView?
    var displaylink:CADisplayLink?
    var index:Int = 0
    override func viewDidLoad() {
        super.viewDidLoad()
        imageView = UIImageView()
        imageView?.frame = UIScreen.main.bounds
        imageView?.contentMode = UIViewContentMode.scaleAspectFit
        self.view.addSubview(imageView!)
        index = 0
        displaylink = CADisplayLink.init(target: self, selector: #selector(ViewController.refushImage))
        displaylink?.frameInterval = 2
        displaylink?.add(to: RunLoop.current, forMode: RunLoopMode.defaultRunLoopMode)
    }
    func refushImage(){
        NSLog("%d",index)
        imageView?.image = UIImage(named: "\(index).png")
        index += 1
        if(index == 67){
//            displaylink?.remove(from: RunLoop.current, forMode: RunLoopMode.defaultRunLoopMode)
            index = 0
        }
    }
}

使用draw 方法:

Simulator Screen Shot - iPhone 8 Plus - 2018-11-10 at 11.48.49.png
import UIKit

class ViewController: UIViewController {

    var blackHole:BlackHoleView?
    var timer:Timer?
    var index:Float = 0
    override func viewDidLoad() {
        super.viewDidLoad()
        blackHole = BlackHoleView()
        blackHole?.frame = UIScreen.main.bounds
        blackHole?.backgroundColor = .cyan
        self.view.addSubview(blackHole!)
        index = 0
        timer = Timer.scheduledTimer(timeInterval: 1.0/30, target: self, selector: #selector(ViewController.refushImage), userInfo:nil, repeats: true)
    }
    func refushImage(){
        blackHole?.blackHoleIncrease(index)
        index += 1
        if index == 30 {
            index = 0
        }
    }
}

BlackHoleView:

import UIKit

class BlackHoleView: UIView {
    var blackHoleRadius:Float = 0
    func blackHoleIncrease(_ radius: Float){
        blackHoleRadius = radius
        self.setNeedsDisplay()
    }
    override func draw(_ rect: CGRect) {//CGFloat(M_PI * 2)
        let ctx:CGContext = UIGraphicsGetCurrentContext()!
        //clockwise:true为顺时针绘制
        ctx.addArc(center: CGPoint(x:self.center.x,y:self.center.y), radius: CGFloat(blackHoleRadius), startAngle: 0, endAngle:CGFloat(Float.pi * 2) , clockwise: false)
        ctx.fillPath()
    }
}

gif动画效果

gif拆分成多个单帧图片:

过程是:gif----->Data------>imageIO------>UIImage----->jpg|png

import UIKit
import ImageIO
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let gifPath = Bundle.main.path(forResource: "1", ofType: "gif")
        let gifData = try! Data(contentsOf: URL(fileURLWithPath: gifPath!))
        let gifDataSource = CGImageSourceCreateWithData(gifData as CFData, nil)
        let gifImageCount = CGImageSourceGetCount(gifDataSource!)
        for i in 0..<gifImageCount {
            let imageref = CGImageSourceCreateImageAtIndex(gifDataSource!, i, nil)
            let image = UIImage(cgImage: imageref!, scale: UIScreen.main.scale, orientation: .up)
            let imageData = UIImagePNGRepresentation(image)
            let docs = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).first
            let imagePath = docs! + "/\(i).png"
            try? imageData?.write(to: URL(fileURLWithPath: imagePath))
            print("\(imagePath)")
        }
    }
}

多张图片合成gif

import UIKit
import ImageIO
import MobileCoreServices
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        var imageArray = [UIImage]()
        for i in 0...66 {
            imageArray.append(UIImage(named: "\(i).png")!)
        }
        let documentDirectory = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).first
        let gifPath = documentDirectory! + "/plane.gif"
        print(gifPath)
        // string ---> CFURL
        let url = CFURLCreateWithFileSystemPath(kCFAllocatorDefault, gifPath as CFString, .cfurlposixPathStyle, false)
        let destion = CGImageDestinationCreateWithURL(url!, kUTTypeGIF, imageArray.count, nil)
        //设置每帧之间的播放时间
        let cgimagePropertiesDict = [kCGImagePropertyGIFDelayTime as String : 0.1]
        let cgimagePropertiesDesDict = [kCGImagePropertyGIFDictionary as String : cgimagePropertiesDict]
        for cgimage in imageArray {
            //依次为gif图像对象添加每一帧元素
            CGImageDestinationAddImage(destion!, (cgimage as AnyObject).cgImage!!,cgimagePropertiesDesDict as CFDictionary?)
        }
        //设置图像的彩色空间格式;颜色深度;执行次数
        let gifProperties = [kCGImagePropertyColorModelRGB : kCGImagePropertyColorModel,
                             kCGImagePropertyDepth : 16,
                             kCGImagePropertyGIFLoopCount : 1] as [CFString : Any]
        let gifDictionaryDestDic = [kCGImagePropertyGIFDictionary : gifProperties]
        CGImageDestinationSetProperties(destion!,gifDictionaryDestDic as CFDictionary)
        CGImageDestinationFinalize(destion!)
    }
}

展示gif图片

由于iOS原生并不直接支持gif图片的展示,所以可以考虑将gif拆分成若干个单帧图片,然后用UIImageView来展示:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        var images:[UIImage] = []
        for i in 0...66{// 遍历本地67张图片
            let imagePath = "\(i).png" // 构建图片名称
            let image:UIImage = UIImage(named: imagePath)!//构建UIImage
            images.append(image)// 将图片添加到数组中
        }
        let imageView = UIImageView()
        imageView.frame = self.view.bounds
        imageView.contentMode = UIViewContentMode.center
        self.view.addSubview(imageView)
        
        imageView.animationImages = images
        imageView.animationDuration = 5
        imageView.animationRepeatCount = 1
        imageView.startAnimating()
    }

}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容