iOS MermaidSwimming(美人鱼游泳)~demo

//联系人:石虎  QQ: 1224614774昵称:嗡嘛呢叭咪哄

/**

注意点: 1.看 GIF 效果图.

       2.看连线视图的效果图.

       3.看实现代码(直接复制实现效果).

*/

一、GIF 效果图:

二、连线视图的效果图:

图1:

图2:

图3:

图4:下载图片资源--小鱼图片要按照顺序下载添加

三、实现代码:

=========================

===================================================

=============

控制器1: ViewController.m

//

//  ViewController.m

//  MermaidSwimming(美人鱼游泳)~demo

//

//  Created by 石虎 on 2017/8/15.

//  Copyright © 2017年 shihu. All rights reserved.

//

#import "ViewController.h"

@interface ViewController ()

{

    CALayer *fishLayer;

    CALayer *fishLayer1;

    NSInteger fishFrame;

    NSTimer *timer;

    // 定义NSMutableArray装鱼的10个动画帧

    NSMutableArray *fishFrameArray;

}

@end

@implementation ViewController

- (void)viewDidLoad

{

    [superviewDidLoad];

    // 创建CALayer作为背景

    //CALayer* bg = [CALayer layer];

    // 设置背景图片

//    bg.contents = (id)[UIImage imageNamed:@"bg.jpg"].CGImage;

//    bg.contentsGravity = kCAGravityCenter;

//    bg.frame = CGRectMake(-60, -100, 580, 780);

//    [self.view.layer addSublayer:bg];

    

    fishFrameArray = [[NSMutableArrayalloc]init];

    // 初始化鱼的10个动画帧，并添加到fishFrameArray集合中

    for(int i =0 ; i <10 ; i++)

    {

        [fishFrameArrayaddObject:[UIImageimageNamed:

                                   [NSStringstringWithFormat:@"fish%d.png" , i]]];

    }

    // 创建定时器控制小鱼的动画帧的改变。

    timer = [NSTimerscheduledTimerWithTimeInterval:0.1target:self

                                           selector:@selector(change)userInfo:nilrepeats:YES];

    // 创建CALayer

    fishLayer = [CALayerlayer];

    // 设置CALayer显示内容的对齐、缩放模式（不缩放，直接显示在中间）

    fishLayer.contentsGravity =kCAGravityCenter;

    // 设置fishLayer的大小

    fishLayer.frame =CGRectMake(128,206,90,40);

    

    [self.view.layeraddSublayer:fishLayer];

    

    // 创建一个按钮，通过该按钮触发小鱼的游动

    UIButton* bn = [UIButtonbuttonWithType:UIButtonTypeRoundedRect];

    bn.frame =CGRectMake(10 ,10 , 60 ,35);

    [bn setTitle:@"开始"forState:UIControlStateNormal];

    [self.viewaddSubview:bn];

    // 用户点击按钮时，激发start:方法

    [bn addTarget:selfaction:@selector(start:)forControlEvents:UIControlEventTouchUpInside];

    

}

-(void) start:(id)sender

{

    // 创建对CALayer的position属性执行控制的属性动画

    CAKeyframeAnimation* anim = [CAKeyframeAnimation

                                 animationWithKeyPath:@"position"];

    // 创建路径

    CGMutablePathRef movePath =CGPathCreateMutable();

    // 添加一条圆形的路径

    CGPathAddArc(movePath,nil,170,175,450, -M_PI /2,M_PI *3 /2,YES);

    // 设置anim动画的移动路径

    anim.path = movePath;

    // 创建对CALayer的transform属性执行控制的属性动画

    CAKeyframeAnimation* anim2 = [CAKeyframeAnimation

                                  animationWithKeyPath:@"transform"];

    anim2.values = [NSArrayarrayWithObjects:

                    [NSValuevalueWithCATransform3D:CATransform3DIdentity],

                    [NSValuevalueWithCATransform3D:

                     CATransform3DMakeScale(10.1,10.1,10.1)],//放大缩小的

                    [NSValuevalueWithCATransform3D:

                     CATransform3DMakeRotation(2 *M_PI ,0,0,1)]

                    , nil];

        

#if 1

    CGMutablePathRef

    path = CGPathCreateMutable();

    //将路径的起点定位到

    

    CGPathMoveToPoint(path,NULL,50.0,120.0);

    //下面5行添加5条直线的路径到path中

    CGPathAddLineToPoint(path,

                         NULL,60,130);

    CGPathAddLineToPoint(path,

                         NULL,70,140);

    CGPathAddLineToPoint(path,

                         NULL,80,150);

    CGPathAddLineToPoint(path,

                         NULL,90,160);

    CGPathAddLineToPoint(path,

                         NULL,100,170);

    //下面四行添加四条曲线路径到path

    CGPathAddCurveToPoint(path,NULL,50.0,275.0,150.0,275.0,70.0,120.0);

    CGPathAddCurveToPoint(path,NULL,150.0,275.0,250.0,275.0,90.0,120.0);

    CGPathAddCurveToPoint(path,NULL,250.0,275.0,350.0,275.0,110.0,120.0);

    CGPathAddCurveToPoint(path,NULL,350.0,275.0,450.0,275.0,130.0,120.0);

    //以“position”为关键字

    

    

    [anim

     setPath:path];

    [anim

     setDuration:3.0];

    

    

    // 使用动画组来组合2个动画

    CAAnimationGroup *animGroup = [CAAnimationGroupanimation];

    animGroup.animations = [NSArrayarrayWithObjects:anim, anim2,nil];

    // 指定动画重复10次

    animGroup.repeatCount =10;

    animGroup.duration =24;

    // 为fishLayer添加动画

    [fishLayeraddAnimation:animGroupforKey:@"move"];

}

// 该方法由定时器触发，不断更改fishLayer显示的动画帧

- (void) change

{

    fishLayer.contents = (id)[[fishFrameArrayobjectAtIndex:fishFrame++ %10] CGImage];

    NSLog(@"-----%ld",fishFrame++ %10);

}

@end

================

=======

谢谢!!!