iOS学习笔记-084.粒子效果——路径移动
2017-07-22 20:42
295 查看
粒子效果路径移动
一说明
1 效果
2 步骤分析
二代码
1 VCViewh
2 VCViewm
3 ViewControllerm
第一步:我们需要创建一个View来支持我们的这种效果(VCView)
第二步:我们需要添加一个手势,创建一个路径,来记录这个手势的移动,并实现我们的绘制功能
第三步:使用复制层来添加粒子
需要支持复制层的功能,那么我们的这个View(VCView)的layer应该是复制层
创建一个粒子,并且把粒子添加到复制层
复制粒子
第四步:添加动画
第五步:实现重绘制功能
注意:我们使用的是自定义的VCView
一说明
1 效果
2 步骤分析
二代码
1 VCViewh
2 VCViewm
3 ViewControllerm
粒子效果——路径移动
一、说明
1.1 效果
效果如图1.2 步骤分析
我们需要上面的效果,可以按照以下的步骤来操作:第一步:我们需要创建一个View来支持我们的这种效果(VCView)
第二步:我们需要添加一个手势,创建一个路径,来记录这个手势的移动,并实现我们的绘制功能
第三步:使用复制层来添加粒子
需要支持复制层的功能,那么我们的这个View(VCView)的layer应该是复制层
+(Class)layerClass{ //复制层 return [CAReplicatorLayer class]; }
创建一个粒子,并且把粒子添加到复制层
//添加粒子 CALayer *dotL = [CALayer layer]; dotL.frame = CGRectMake(-20, 0, 20, 20); dotL.backgroundColor = [UIColor redColor].CGColor; self.dotLayer = dotL; [self.layer addSublayer:dotL];
复制粒子
//复制粒子 CAReplicatorLayer *repL = (CAReplicatorLayer*)self.layer; repL.instanceCount = 30; repL.instanceDelay = 0.2;
第四步:添加动画
第五步:实现重绘制功能
注意:我们使用的是自定义的VCView
二、代码
2.1 VCView.h
// // VCView.h // 03_UIView77_粒子效果1 // // Created by 杞文明 on 17/7/22. // Copyright © 2017年 杞文明. All rights reserved. // #import <UIKit/UIKit.h> @interface VCView : UIView //开始动画 - (void)start; //重绘 - (void)reDraw; @end
2.2 VCView.m
//
// VCView.m
// 03_UIView77_粒子效果1
//
// Created by 杞文明 on 17/7/22.
// Copyright © 2017年 杞文明. All rights reserved.
//
#import "VCView.h"
@interface VCView()
@property(nonatomic,strong)UIBezierPath *path;
@property(nonatomic,strong)CALayer *dotLayer;
@end
@implementation VCView
+(Class)layerClass{ //复制层 return [CAReplicatorLayer class]; }
//开始动画
- (void)start{
//创建帧动画
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.path = self.path.CGPath;
anim.repeatCount = MAXFLOAT;
anim.duration = 6;
[self.dotLayer addAnimation:anim forKey:nil];
}
//重绘
- (void)reDraw{
//删除所有动画
[self.dotLayer removeAllAnimations];
//清空路径
[self.path removeAllPoints];
//重绘
[self setNeedsDisplay];
}
-(void)awakeFromNib{
//添加手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
[self addGestureRecognizer:pan];
//添加粒子
CALayer *dotL = [CALayer layer];
dotL.frame = CGRectMake(-20, 0, 20, 20);
dotL.backgroundColor = [UIColor redColor].CGColor;
self.dotLayer = dotL;
[self.layer addSublayer:dotL];
//复制粒子 CAReplicatorLayer *repL = (CAReplicatorLayer*)self.layer; repL.instanceCount = 30; repL.instanceDelay = 0.2;
//创建路径
self.path = [UIBezierPath bezierPath];
}
-(void)pan:(UIPanGestureRecognizer *)pan{
//或者手指当前的点
CGPoint curentP = [pan locationInView:self];
//手势开始,移动到开始的点
if(pan.state == UIGestureRecognizerStateBegan){
[self.path moveToPoint:curentP];
}else if (pan.state == UIGestureRecognizerStateChanged){
//添加点
[self.path addLineToPoint:curentP];
//重绘
[self setNeedsDisplay];
}
}
-(void)drawRect:(CGRect)rect{
[self.path stroke];
}
@end
2.3 ViewController.m
// // ViewController.m // 03_UIView77_粒子效果1 // // Created by 杞文明 on 17/7/22. // Copyright © 2017年 杞文明. All rights reserved. // #import "ViewController.h" #import "VCView.h" @interface ViewController () @property (strong, nonatomic) IBOutlet VCView *vcView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; } - (IBAction)start:(id)sender { [self.vcView start]; } - (IBAction)reDraw:(id)sender { [self.vcView reDraw]; } @end
相关文章推荐
- IOS cocos2d学习笔记-<六>CCParticalSystem粒子效果
- iOS学习笔记-085.粒子效果——QQ拖动效果
- iOS粒子路径移动效果 iOS实现QQ拖动效果
- android: qq 5.0 demo学习笔记(主 粒子爆炸效果+ViewDragHelper)
- iOS学习笔记-083.倒影效果
- ios学习笔记之九--图片移动代码的优化
- iOS UIView动画效果 学习笔记
- ios学习笔记---用View动画仿UC浏览器菜单栏弹出效果
- [iOS]学习笔记7(CATransform3D-Flip效果)
- 终极ios学习笔记1.0.1-ios相对路径与绝对路径的转化NSBundle
- 【IOS移动开发技术】iOS软件开发中关于屏幕旋转处理相关的学习笔记
- iOS简单动画效果:闪烁、移动、旋转、路径、组合
- 黑马程序员---OC学习笔记之ios沙盒机制及获取沙盒路径
- ((ios开发学习笔记 十三))实现九宫格效果(附带源码)
- 学习笔记之——自定义带滑动距离监控和仿iOS回弹效果的ScrollView
- iOS学习笔记之六--图片移动的基本界面 UIBotton的应用
- cocos2d-x学习笔记之粒子效果
- ios学习笔记---用View动画仿UC浏览器菜单栏弹出效果
- 【IOS学习笔记】为UICollectionView设置自适应屏幕宽度以及点击效果
- 【iOS学习笔记 15-11-06】简单自定义navigationcontroller push和pop动画效果