>

iOS 动画实战之钓鱼小游戏

- 编辑:betway88 -

iOS 动画实战之钓鱼小游戏

十二星座如何钓到爱情

前言

最近写了一款钓鱼小游戏,自己平时也没做过游戏,本来以为这种游戏要用cocos2d什么的实现,后来发现其实动画就可以实现很棒的效果,先看看效果图。

图片 1

钓鱼游戏.gif

2014-07-24 15:36:00作者:匿名第一星座网

思维导图

首先我们看下思维导图,本游戏主要分为4大块,其中鱼的实现最为复杂

图片 2

思维导图

爱情就像钓鱼一样,有的人是放长线,钓大鱼,有的人是耐心地垂钓,有的人是姜太公钓鱼,愿者上钩,还有的人是鱼钩上挂满诱饵,等待猎物。 鱼很少会自己上钩的,大多数都要看钓鱼者的钓鱼方法。方法合适的话,鱼就会上钩,方法不合适的话,就可能见不到鱼了。那么你想知道十二星座是如何钓到爱情的吗?一起来看看吧!

项目结构

图片 3

屏幕快照 2017-09-13 下午3.46.18.png

图片 4

准备工作

首先将需要的图准备好,这个鱼其实就是一组图片,图片大小固定,每一帧位置变化,所以看起来 是一个上下游动的鱼。

图片 5

动态.gif

图片 6

单张图片

鱼钩模块

  • 摆动动画
    鱼钩的摆动范围是[M_PI/4.0,-M_PI/4.0] (垂直向下为0度,顺时针为正),这里利用了计时器进行角度的更改,计时器用的CADisplayLink,它是一个和屏幕刷新率一致的定时器,如果没有卡顿,每秒刷新次数是60次,本Demo很多计时器用的都是CADisplayLink。下面是鱼钩的主要代码(重点:1、设置锚点后重置frame,2、更改角度,3、旋转)。 其中定义了一个block将角度angle回传到FishingView界面计算鱼钩落到池塘的位置。
@property (nonatomic, strong) CADisplayLink *linkTimer;
@property (nonatomic, assign) BOOL isReduce;//改变方向
@property (nonatomic, assign) CGFloat angle;//摆动的角度

- (void)initView{
    [self setAnchorPoint:CGPointMake(0.5, 0) forView:self]; 
    UIImageView *gouImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 35 , 30, 35)];
    gouImageView.image = [UIImage imageNamed:@"fish_catcher_tong"];
    [self addSubview:gouImageView];
    UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake((self.frame.size.width - 3)/2.0, 0, 3, self.frame.size.height - 35)];
    lineView.backgroundColor = HEXCOLOR(0x9e664a);
    [self addSubview:lineView];
    //  创建一个对象计时器
    _linkTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(hookMove)];
    //启动这个link
    [_linkTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}

//设置锚点后重新设置frame
- (void) setAnchorPoint:(CGPoint)anchorpoint forView:(UIView *)view{
    CGRect oldFrame = view.frame;
    view.layer.anchorPoint = anchorpoint;
    view.frame = oldFrame;
}

#pragma mark - 鱼钩摆动
- (void)hookMove{

    if (self.isReduce){
        _angle-=1.8*cos(1.5*_angle)*0.01;//计算角度,利用cos模拟上升过程中减慢,下降加快
        if (_angle < -M_PI/180*45){
            self.isReduce = NO;
        }
    }else {
        _angle =1.8*cos(1.5*_angle)*0.01;
        if (_angle > M_PI/180*45){
            self.isReduce = YES;
        }
    }
    if (self.angleBlock){
        self.angleBlock(_angle);
    }
//    DLog(@"鱼钩角度%f",_angle);
//旋转动画
    self.transform = CGAffineTransformMakeRotation(_angle);
}

本文由星座运势发布,转载请注明来源:iOS 动画实战之钓鱼小游戏