IOS中一个简单的粒子效果实现

1、效果图展示

2、实现思路

  1> 首先要实现上面的效果,第一步要处理的就是一个简单的画板,在View上面用鼠标滑动的时候画出线条,这个功能可使用UIBezierPath实现

  2> 关于粒子效果的实现,可以创建一个CALayer,然后用CAReplicatorLayer进行复制layer,从而达到粒子效果

3、代码实现

DrawView类的封装与编写

//
//  DrawView.m
//  06-粒子效果
//
//  Created by xiaomage on 15/6/24.
//  Copyright (c) 2015年 xiaomage. All rights reserved.
//

#import "DrawView.h"

@interface DrawView ()

@property (nonatomic, strong) UIBezierPath *path;

@property (nonatomic, weak) CALayer *dotLayer;

@property (nonatomic, weak) CAReplicatorLayer *repL;

@end

@implementation DrawView

#pragma mark - 懒加载点层
- (CALayer *)dotLayer
{
    if (_dotLayer == nil) {
        // 创建图层
        CALayer *layer = [CALayer layer];

        CGFloat wh = 10;
        layer.frame = CGRectMake(0, -1000, wh, wh);

        layer.cornerRadius = wh / 2;

        layer.backgroundColor = [UIColor blueColor].CGColor;
        [_repL addSublayer:layer];

        _dotLayer = layer;
    }
    return _dotLayer;
}

- (UIBezierPath *)path
{
    if (_path == nil) {
        _path = [UIBezierPath bezierPath];
    }

    return _path;
}
#pragma mark - 开始点击调用
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    // 获取touch对象
    UITouch *touch = [touches anyObject];

    // 获取当前触摸点
    CGPoint curP = [touch locationInView:self];

    // 设置起点
    [self.path moveToPoint:curP];

}

static int _instansCount = 0;
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 获取touch对象
    UITouch *touch = [touches anyObject];

    // 获取当前触摸点
    CGPoint curP = [touch locationInView:self];

    // 添加线到某个点
    [_path addLineToPoint:curP];

    // 重绘
    [self setNeedsDisplay];

    _instansCount ++;

}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code

    [_path stroke];
}

#pragma mark - 开始动画
- (void)startAnim
{

    // 创建帧动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    anim.keyPath = @"position";

    anim.path = _path.CGPath;

    anim.duration = 3;

    anim.repeatCount = MAXFLOAT;

    [self.dotLayer addAnimation:anim forKey:nil];

    // 注意:如果复制的子层有动画,先添加动画,在复制
    // 复制子层
    _repL.instanceCount = _instansCount;

    // 延迟图层动画
    _repL.instanceDelay = 0.2;

}

#pragma mark - 加载完xib调用,创建复制层
- (void)awakeFromNib
{
    // 创建复制层
    CAReplicatorLayer *repL = [CAReplicatorLayer layer];

    repL.frame = self.bounds;

    [self.layer addSublayer:repL];

    _repL = repL;
}
#pragma mark - 重绘
- (void)reDraw
{
    // 清空绘图信息
    _path = nil;
    [self setNeedsDisplay];

    // 把图层移除父控件,复制层也会移除。
     [_dotLayer removeFromSuperlayer];
    _dotLayer = nil;

    // 清空子层总数
    _instansCount = 0;

}

@end

DrawView的使用

// 点击开始动画
- (IBAction)startAnim:(id)sender {

    DrawView *view = (DrawView *)self.view;
    [view startAnim];

}

// 重置按钮
- (IBAction)reDraw:(id)sender {

    DrawView *view = (DrawView *)self.view;
    [view reDraw];
}
时间: 01-07

IOS中一个简单的粒子效果实现的相关文章

(转)Cocos2d-js中使用Shader方法--以一个简单的波纹效果为例:

以一个简单的波纹效果为例: 一.引入shader脚本文件. 1.vertex shader attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec4 a_color; varying vec4 v_fragmentColor; varying vec2 v_texCoord; void main() { gl_Position = CC_PMatrix * a_position; v_fragmentColor =

?关于ios中的点赞控件效果的实现--UIControl

关于ios中的点赞控件效果的实现--UIControl 在开发当中,可能很多时候都需要做个点赞的需求,如果用按钮实现,按钮作为一个系统复合控件,外部是一个 View-->UIControl的容器, 内部包含了UILabel和UIImage,以及一些排版规则.用UIButton就很难去做一些在"赞"和"取消赞"切换时的效果. 可是我们又很需要UIButton似的事件响应机制. 怎么办? 对! 就是使用UIControl. UIControl在这里有两个突出的优势

如何让IOS中的文本实现3D效果

本转载至 http://bbs.aliyun.com/read/181991.html?spm=5176.7114037.1996646101.25.p0So7c&pos=9     zhedianshi 级别: 帮帮团 发帖 487 云币 430 加关注 写私信 只看楼主 更多操作楼主  发表于: 2014-06-10 我想要在IOS中对一些文本进行3D效果渲染,使用了UIKit和标准视图控制器. 实现之的效果大概能成为这样:   能不能通过iOS和UIKit实现?我只用了一个静态PNG图片,

用IOS做一个界面切换的效果(登录界面和注册界面和找回密码界面的切换)(用封装好的lable和textf创建界面)

创建一个类封装uitextfield和UIlabel (源代码.m文件) #import "TLView.h" @interface TLView () { UILabel *_desLabel;    //左边的lable UITextField *_textField;//右边的 } @end @implementation TLView //改写父类的初始化方法,处理相同的性能 - (id)initWithFrame:(CGRect)frame { self = [super i

用CSS写一个简单的幻灯片效果页面

这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [用CSS写一个简单的幻灯片效果页面] 1.背景介绍CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. transform属性向元素应用2D或3D转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. transition是令一个或多个可以用数值表示的css属性值

用CSS实现一个简单的幻灯片效果页面

用CSS实现一个简单的幻灯片效果页面,第一反应是利用CSS3的animation.不过为了兼容浏览器,记得加各浏览器前缀("chrome和safira:-webkit-"."firefox:-moz-"."opera:-o-"),我最开始写的时候忘记加浏览器前缀,在chrome中一直没有任何显示.下面说说用到的animation各属性.animation-name(动画名字,需用引号包裹)animation-duration(动画持续时间,如:2

python中一个简单的webserver

python中一个简单的webserver 2013-02-24 15:37:49 分类: Python/Ruby 支持多线程的webserver 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 #!/usr/bin/python from SocketServer import ThreadingMixIn from BaseHTTPServer import HTTPServer,BaseHTTPRequestHandler cla

JQuery中一个简单的表单验证的实例

html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

第一次来博客园先用jquery写一个简单菜单收缩效果

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script src="jquery-1.7.2.min.js"></script&g