美文网首页ios动画设计学习iOS动画
SpriteKit之漫谈SKAction常用属性

SpriteKit之漫谈SKAction常用属性

作者: 神经骚栋 | 来源:发表于2016-08-29 21:38 被阅读595次

    SKAction属性介绍


    在使用动作过程当中,对于属性的设置是必不可少的,本文将说说最常用的属性,分别是速度,时间,曲线方式.下面就分模块说一下三个常用的属性.我们首先先把我们的准备工作做好,创建好背景和精灵,代码如下所示.

    #import "GameScene.h"
    
    @implementation GameScene
    
    -(instancetype)initWithSize:(CGSize)size{
    
        if (self = [super initWithSize:size]) {
            
            self.backgroundColor = [SKColor whiteColor];
            
        }
    
        return self;
    
    }
    
    -(void)didMoveToView:(SKView *)view{
    
        [super didMoveToView:view];
    
        [self backgroundNode];
        
        [self planeNode];
    
        
    }
    
    #pragma mark ----创建背景----
    
    -(void)backgroundNode{
    
        SKSpriteNode *backgroundNode = [SKSpriteNode spriteNodeWithImageNamed:@"bg_02.jpg"];
    
        backgroundNode.position = CGPointZero;
        
        backgroundNode.zPosition = 0;
        
        backgroundNode.anchorPoint = CGPointZero;
        
        backgroundNode.size = self.size;
        
        [self addChild:backgroundNode];
        
        
        
    }
    
    #pragma mark ---- 创建两个飞船 ----
    
    -(void)planeNode{
    
        SKSpriteNode *planeNode = [SKSpriteNode spriteNodeWithImageNamed:@"飞机.png"];
        
        planeNode.position = CGPointMake(self.size.width/2, self.size.height/2);
        
        planeNode.anchorPoint = CGPointMake(0.5, 0.5);
        
        planeNode.zPosition = 1;
        
        planeNode.name = @"plane";
        
        [self addChild:planeNode];
        
        
        SKSpriteNode *planeNode1 = [SKSpriteNode spriteNodeWithImageNamed:@"飞机.png"];
        
        planeNode1.position = CGPointMake(self.size.width/2+100, self.size.height/2);
        
        planeNode1.anchorPoint = CGPointMake(0.5, 0.5);
        
        planeNode1.zPosition = 1;
        
        planeNode1.name = @"plane1";
        
        [self addChild:planeNode1];
    
    }
    

    speed(速度属性)


    速度因素调整动作的动画速度。例如,速度2.0倍意味着动画运行速度的两倍。速度的默认值为1.0.下面就是API文档中的SKAction的speed属性的介绍.

    下面就用两个精灵说明速度属性.代码如下.

    
    
    #pragma mark ---- 移动飞船 ----
    
    
    -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    
        SKSpriteNode *planeNode = (SKSpriteNode *)[self childNodeWithName:@"plane"];
        
        SKAction *moveAction = [SKAction moveToY:0 duration:1];
        
        //设置速度
        moveAction.speed = 0.5;
        
        [planeNode runAction:moveAction];
        
        SKSpriteNode *planeNode1 = (SKSpriteNode *)[self childNodeWithName:@"plane1"];
    
        SKAction *moveAction1 = [SKAction moveToY:0 duration:1];
        
        //设置速度
        moveAction1.speed = 2;
        
        [planeNode1 runAction:moveAction1];
    }
    
    
    @end
    
    

    效果图如下所示.

    效果图

    duration(时间属性)


    想要设置或者是获取动作所需要的时间,需要使用到duration这个属性.在API文章的duration属性介绍如下图所示.

    API文档中duration属性介绍

    在上面的速度代码中,我们直接添加上获取时间的代码.如下所示,修改duration属性也是一样,这里我们只做获取的操作.

    #pragma mark ---- 移动飞船 ----
    
    
    -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    
        SKSpriteNode *planeNode = (SKSpriteNode *)[self childNodeWithName:@"plane"];
        
        SKAction *moveAction = [SKAction moveToY:0 duration:1];
        
        //设置速度
        moveAction.speed = 0.5;
        
        [planeNode runAction:moveAction];
        
        SKSpriteNode *planeNode1 = (SKSpriteNode *)[self childNodeWithName:@"plane1"];
    
        SKAction *moveAction1 = [SKAction moveToY:0 duration:1];
        
        //设置速度
        moveAction1.speed = 2;
        
        [planeNode1 runAction:moveAction1];
        
        NSLog(@"动作一的所需时间:%f",moveAction.duration);
        
        NSLog(@"动作二的所需时间:%f",moveAction1.duration);
    
        
    }
    
    
    @end
    

    控制台打印信息如下.我们看到我们获得了动作的时间属性.

    timingMode(曲线方式属性)


    动作的曲线方式其实就是动画总体变化的时间曲线,动作的曲线方式的设置以及获取需要使用到timingMode这个一个属性,timingMode的取值一共有4个,如下表所示.

    曲线方式 功能
    SKActionTimingLinear 动画在其持续时间内平均分布
    SKActionTimingEaseIn 动画在开始的时候较慢,然后渐渐加快
    SKActionTimingEaseOut 动画开始的时候较快,然后渐渐变慢
    SKActionTimingEaseInEaseOut 动画开始的时候慢,然后渐渐加速到中间,然后在渐渐变慢到完成

    如果不对曲线方式属性进行设置的话,默认的是SKActionTimingLinear.下面我们就用看一下代码示例.我们在速度代码的基础上加以修改,来验证曲线方式.

    #pragma mark ---- 创建两个飞船 ----
    
    -(void)planeNode{
    
        SKSpriteNode *planeNode = [SKSpriteNode spriteNodeWithImageNamed:@"飞机.png"];
        
        planeNode.position = CGPointMake(self.size.width/2, self.size.height/2);
        
        planeNode.anchorPoint = CGPointMake(0.5, 0.5);
        
        planeNode.zPosition = 1;
        
        planeNode.name = @"plane";
        
        [self addChild:planeNode];
        
        SKSpriteNode *planeNode1 = [SKSpriteNode spriteNodeWithImageNamed:@"飞机.png"];
        
        planeNode1.position = CGPointMake(self.size.width/2+100, self.size.height/2);
        
        planeNode1.anchorPoint = CGPointMake(0.5, 0.5);
        
        planeNode1.zPosition = 1;
        
        planeNode1.name = @"plane1";
        
        [self addChild:planeNode1];
        
        SKSpriteNode *planeNode2 = [SKSpriteNode spriteNodeWithImageNamed:@"飞机.png"];
        
        planeNode2.position = CGPointMake(self.size.width/2-100, self.size.height/2);
        
        planeNode2.anchorPoint = CGPointMake(0.5, 0.5);
        
        planeNode2.zPosition = 1;
        
        planeNode2.name = @"plane2";
        
        [self addChild:planeNode2];
    
    }
    
    #pragma mark ---- 移动飞船 ----
    
    
    -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    
        SKSpriteNode *planeNode = (SKSpriteNode *)[self childNodeWithName:@"plane"];
        
        SKAction *moveAction = [SKAction moveToY:0 duration:2];
        
        //设置曲线方式
        moveAction.timingMode = SKActionTimingEaseIn;
    
        
        [planeNode runAction:moveAction];
        
        SKSpriteNode *planeNode1 = (SKSpriteNode *)[self childNodeWithName:@"plane1"];
    
        SKAction *moveAction1 = [SKAction moveToY:0 duration:2];
        
        //设置曲线方式
        moveAction1.timingMode = SKActionTimingEaseOut;
        
        [planeNode1 runAction:moveAction1];
        
        SKSpriteNode *planeNode2 = (SKSpriteNode *)[self childNodeWithName:@"plane2"];
        
        SKAction *moveAction2 = [SKAction moveToY:0 duration:2];
        
        //设置曲线方式
        moveAction2.timingMode = SKActionTimingEaseInEaseOut;
        
        [planeNode2 runAction:moveAction1];
    
    
    }
    
    
    

    下面我们就看一下效果图,

    各个精灵对象设置的曲线方式 效果图
    总结:SKAction常用属性速度,时间,曲线方式基本就写到这了.下一篇博客,就是游戏中的重头戏:物理引擎,希望大家关注,谢谢.最后废话不多说,Demo双手奉上.
    -->动作的属性Demo💾

    相关文章

      网友评论

      • YungFan:第一段第三句话是不是打错了?
        神经骚栋: @YungFan 是是是……回家再改,现在还在公司呢……哈哈哈

      本文标题:SpriteKit之漫谈SKAction常用属性

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