您的位置:首页 > 大数据 > 人工智能

Oc 动画MermaidSwimming(美人鱼游泳)~demo

2017-10-31 20:01 260 查看




项目图片:





实现代码:

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

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

控制器1: ViewController.m

#import "ViewController.h"

@interface ViewController ()
{
CALayer *fishLayer;
CALayer *fishLayer1;
NSInteger fishFrame;
NSTimer *timer;
// 定义NSMutableArray装鱼的10个动画帧
NSMutableArray *fishFrameArray;
}
@end

@implementation ViewController

- (void)viewDidLoad
{
[super viewDidLoad];
// 创建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 = [[NSMutableArray alloc] init];
// 初始化鱼的10个动画帧,并添加到fishFrameArray集合中
for(int i = 0 ; i < 10 ; i++)
{
[fishFrameArray addObject:[UIImage imageNamed:
[NSString stringWithFormat:@"fish%d.png" , i]]];
}
// 创建定时器控制小鱼的动画帧的改变。
timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self
selector:@selector(change) userInfo:nil repeats:YES];
// 创建CALayer
fishLayer = [CALayer layer];
// 设置CALayer显示内容的对齐、缩放模式(不缩放,直接显示在中间)
fishLayer.contentsGravity = kCAGravityCenter;
// 设置fishLayer的大小
fishLayer.frame = CGRectMake(128, 206, 90, 40);

[self.view.layer addSublayer:fishLayer];

// 创建一个按钮,通过该按钮触发小鱼的游动
UIButton* bn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
bn.frame = CGRectMake(10 , 10 , 60 , 35);
[bn setTitle:@"开始" forState:UIControlStateNormal];
[self.view addSubview:bn];
// 用户点击按钮时,激发start:方法
[bn addTarget:self action:@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"];
// 指定关键帧动画的3个关键值:分别是不旋转,旋转180度,旋转360度
//    anim2.values = [NSArray arrayWithObjects:
//                    [NSValue valueWithCATransform3D:CATransform3DIdentity],
//                    [NSValue valueWithCATransform3D:
//                     CATransform3DMakeRotation( M_PI , 0, 0, 1)],
//                    [NSValue valueWithCATransform3D:
//                     CATransform3DMakeRotation( 2 * M_PI , 0, 0, 1)]
//                    , nil];

anim2.values = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:CATransform3DIdentity],
[NSValue valueWithCATransform3D:
CATransform3DMakeScale( 10.1, 10.1, 10.1)],//放大缩小的
[NSValue valueWithCATransform3D:
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];

#endif

//    anim2.path = (__bridge CGPathRef _Nullable)([NSArray arrayWithObjects:
//                                                 [NSValue valueWithCATransform3D:CATransform3DIdentity],
//                                                 [NSValue valueWithCATransform3D:
//                                                  CATransform3DMakeScale( 0.1, 0.1, 0.1)],//放大缩小的
//                                                 [NSValue valueWithCATransform3D:
//                                                  CATransform3DMakeRotation( 2 * M_PI , 0, 0, 1)]
//                                                 , nil]);

// 使用动画组来组合2个动画
CAAnimationGroup *animGroup = [CAAnimationGroup animation];
animGroup.animations = [NSArray arrayWithObjects:anim, anim2, nil];
// 指定动画重复10次
animGroup.repeatCount = 10;
animGroup.duration = 24;
// 为fishLayer添加动画
[fishLayer addAnimation:animGroup forKey:@"move"];
}
// 该方法由定时器触发,不断更改fishLayer显示的动画帧
- (void) change
{
fishLayer.contents = (id)[[fishFrameArray
objectAtIndex:fishFrame++ % 10] CGImage];

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

@end
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  界面 动画