美文网首页
2-UIImageView动画(序列帧动画)

2-UIImageView动画(序列帧动画)

作者: 千秋画雪 | 来源:发表于2016-10-30 23:10 被阅读756次

序列帧:肉眼可以接受最高每秒20帧以内的动画

属性:

  • 设置 animation 图片
    self.imageView.animationImages = self.array;
  • 设置播放时长
    self.imageView.animationDuration = 0.1 * self.array.count;
  • 设置播放次数
    self.imageView.animationRepeatCount = 1;
  • 开始播放动画
    [self.imageView startAnimating];
  • 停止播放动画
    [self.imageView stopAnimating];
  • 判断imageView的状态
    if (self.imageView.isAnimating == NO) { }

一、OC 写法

方法一:使用Assets 资源常驻内存
//
//  ViewController.m
//  7-序列帧动画
//
//  Created by 千山我独行 on 16/10/29.
//  Copyright © 2016年 千山我独行. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

// moxing
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 1.设置最后一帧为imageView的图片
    self.imageView.image = [UIImage imageNamed:@"0017"];
    
    // 2.获取 image 数组
    NSMutableArray *imgArray = [NSMutableArray array];
    for (int i=0; i<18; i++) {
        NSString *str = [NSString stringWithFormat:@"%04d",i];
        UIImage *image = [UIImage imageNamed:str];
        [imgArray addObject:image];
    }
    
    // 3.设置 animation 图片数组
    self.imageView.animationImages = imgArray;
    // 设置播放时长
    self.imageView.animationDuration = 0.1 * imgArray.count;
    // 设置播放次数
    self.imageView.animationRepeatCount = 1;
    // 开始播放动画
    [self.imageView startAnimating];

}
方法二:资源存储在 Bundle中,播放完成后,animationImages 指向 nil
//
//  ViewController.m
//  7-序列帧动画
//
//  Created by 千山我独行 on 16/10/29.
//  Copyright © 2016年 千山我独行. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

// moxing
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.imageView.image = [UIImage imageNamed:@"0017"];
    NSMutableArray * imgArray = [NSMutableArray array];
    for (int i=0; i<18; i++) {
        NSString *str = [NSString stringWithFormat:@"%04d",i];
        // 1.将资源放到 bundle 中
        NSString *path = [[NSBundle mainBundle] pathForResource:str ofType:@".jpg"];
        UIImage *image = [UIImage imageWithContentsOfFile:path];
        [imgArray addObject:image];
    }
    

    self.imageView.animationImages = imgArray;
    self.imageView.animationDuration = 0.1 * imgArray.count;
    self.imageView.animationRepeatCount = 1;
    [self.imageView startAnimating];

    // 2.动画结束后、调用释放内存(在动画执行结束后,调用 ImageView 的 animationImages set方法,并指向nil,来释放内存)
    [self performSelector:@selector(releaseMem) withObject:nil afterDelay:0.1 * imgArray.count];

}

// 3.释放内存
- (void)releaseMem {
    self.imageView.animationImages = nil;
}

代码简化:

    // 2.动画结束后、调用释放内存(在动画执行结束后,调用 ImageView 的 animationImages set方法,并指向nil,来释放内存)
    [self performSelector:@selector(releaseMem) withObject:nil afterDelay:0.1 * imgArray.count];

}

// 3.释放内存
- (void)releaseMem {
    self.imageView.animationImages = nil;
}
替换为:

点语法调用的是 set 方法,所以可以简化为 imageView 调用 performSelector 方法,并传入 nil 参数

    [self.imageView performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:0.1 * imgArray.count];

二、Swift

//
//  ViewController.swift
//  11-序列帧动画-Swift
//
//  Created by 千山我独行 on 16/10/30.
//  Copyright © 2016年 千山我独行. All rights reserved.
//

import UIKit

let xCenter = UIScreen.mainScreen().bounds.origin.x / 2

class ViewController: UIViewController {
    
    
    // MARK: - 懒加载
    lazy var imageView: UIImageView = {
        let frame = CGRect(x: 91, y: 80, width: 192, height: 284)
        let imageView = UIImageView(frame: frame)
        return imageView
    }()
    

    var btn = UIButton(type: UIButtonType.System)
    
    // 动画资源数组
    var dataArray = [UIImage]()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 添加播放按钮
        btn.frame = CGRect(x: 50, y: 400, width: 275, height: 40)
        btn.setTitle("播放动画", forState: UIControlState.Normal)
        btn.addTarget(self, action: "playAnimation1DidClick", forControlEvents: UIControlEvents.TouchUpInside)

        view.addSubview(imageView)
        view.addSubview(btn)
        
    }
    
    // MARK: - 定义方法
    // private: 私有方法、swift 比较严谨、button事件的调用是在编译时已经决定的,但是事件的触发来自于 runloop,编译器不会将它编译进来,只有运行时来调用,这是属于 oc 的调用方式,所以要使用 @objc 修饰
    @objc private func playAnimation1DidClick() {
        
        // 获取图片路径、存储到资源数组中
        for i in 0...17 {
            let name = NSString(format: "%04d", i);
            let path = NSBundle.mainBundle().pathForResource(name as String, ofType: ".jpg");
            let image = UIImage(contentsOfFile: path!)
            guard let img = image else {
                print("nil")
                return
            }
            dataArray.append(img)
        }
        // 播放动画
        self.playAnimation()
        
        // 动画结束后、清空内存中的资源
        imageView.performSelector("animationImages", withObject: nil, afterDelay: 0.1 * 17)
        
    }
    
    @objc private func playAnimation() {
        
        imageView.animationImages = dataArray
        imageView.animationDuration = 0.1 * 17
        imageView.animationRepeatCount = 1
        imageView.startAnimating()
    
    }
    
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
}

相关文章

网友评论

      本文标题:2-UIImageView动画(序列帧动画)

      本文链接:https://www.haomeiwen.com/subject/kageuttx.html