SpriteKit框架详细解析（二） —— 一个简单的动画实例（一）

版本记录

版本号	时间
V1.0	2017.12.09

前言

SpriteKit框架使用优化的动画系统，物理模拟和事件处理支持创建基于2D精灵的游戏。接下来这几篇我们就详细的解析一下这个框架。相关代码已经传至GitHub - 刀客传奇，感兴趣的可以阅读另外几篇文章。
1. SpriteKit框架详细解析（一） —— 基本概览（一）

一个简单的示例

前面那篇我们主要是讲了sprite相关的基础，这一篇我们就给出一个简单的示例，大家一起学习和入门。

下面我们还是直接看代码。

1. ViewController.h

#import 

// 一个简单的sprite实例

@interface ViewController : UIViewController

@end

2. ViewController.m

#import "ViewController.h"
#import "JJSpriteView.h"

@interface ViewController ()

@end

@implementation ViewController

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    JJSpriteView *spriteView = [[JJSpriteView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:spriteView];
}

@end

3. JJSpriteView.h

#import 
#import 

@interface JJSpriteView : SKView

@end

4. JJSpriteView.m

#import "JJSpriteView.h"
#import "JJSpriteScene.h"

@implementation JJSpriteView

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor yellowColor];
        JJSpriteScene *spriteScene = [JJSpriteScene sceneWithSize:self.bounds.size];
        spriteScene.backgroundColor = [UIColor lightGrayColor];
        [self presentScene:spriteScene];
    }
    return self;
}

@end

5. JJSpriteScene.h

#import 
#import 

@interface JJSpriteScene : SKScene

@end

6. JJSpriteScene.m

#import "JJSpriteScene.h"

@interface JJSpriteScene()

@property (nonatomic, strong) SKSpriteNode *node;

@end

@implementation JJSpriteScene

#pragma mark - Override Base Function

- (void)didMoveToView:(SKView *)view
{
    SKSpriteNode *node = [[SKSpriteNode alloc] initWithImageNamed:@"girl"];
    node.size = CGSizeMake(150, 150);
    [self addChild:node];
    self.node = node;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
   [self startAnmationWithNode:self.node];
}

#pragma mark - Object Private Function

- (void)startAnmationWithNode:(SKSpriteNode *)node
{
    //移动
    SKAction *moveAction = [SKAction moveTo:CGPointMake(300, 500) duration:2];
    [node runAction:moveAction completion:^{
        [self resetPosition];
    }];
    
    //缩放
    SKAction *scaleAction = [SKAction resizeToWidth:50.0 height:50.0 duration:2];
    [node runAction:scaleAction];
}

- (void)resetPosition
{
    //移动
    SKAction *moveAction = [SKAction moveTo:CGPointMake(0, 0) duration:2];
    [self.node runAction:moveAction];
    
    //缩放
    SKAction *scaleAction = [SKAction resizeToWidth:150.0 height:150.0 duration:2];
    [self.node runAction:scaleAction];
}

@end

---

实现效果

下面我们就看一下这个SpriteKit实现的动画效果。

这个就是最简单的动画，希望能对大家有所帮助。

后记

未完，待续~~~