zoukankan      html  css  js  c++  java

  • iOS开发核心动画之粒子效果

    一. 示意图

        绘画出一条线,点击开始有很多粒子绕着线运动,点击重绘消除粒子和线


    二. 实现代码

        设计思路:自定义一个View来描述控制器的View,在View加载过程中进行初始化,给View添加手势(UIPanGestureRecognizer),将自定义View转成复制层,创建一个粒子层,添加到复制层上,并保存粒子

        监听滑动手势,记录起始点,移动过程中添加直线并重绘


    三. 代码实现

    1. 自定义View来描述控制器View,将控制器View转为复制层

    1. + (Class)layerClass
    2. {
    3.  return [CAReplicatorLayer class];
    4. }

    2. 在加载控制器View初始化

    初始化过程中创建滑动手势/创建复制层和粒子层

    设置复制层相关属性:赋值个数/动画延迟时间

    1. - (void)awakeFromNib
    2. {
    3.  [self setup];
    4. }
    6. - (void)setup
    7. {
    8.  // 1.创建手势
    9.  UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    10.  // 2.添加手势
    11.  [self addGestureRecognizer:pan];
    12.  // 3.创建粒子复制层
    13.  CAReplicatorLayer *copyLayer = (CAReplicatorLayer *)self.layer;
    14.     copyLayer.instanceCount = 30;
    15.     copyLayer.instanceDelay = 0.25;
    16.  
    17.  CALayer *layer = [[CALayer alloc] init];
    18.     layer.frame = CGRectMake(-10, 0, 10, 10);
    19.     layer.backgroundColor = [UIColor redColor].CGColor;
    20.  [copyLayer addSublayer:layer];
    21.     self.dotlayer = layer;
    22. }

    3. 将创建出来的粒子保存,设置一个UIBezierPater属性

    1. /** 路径 */
    2. @property (nonatomic, strong) UIBezierPath *path;
    4. /** 粒子 */
    5. @property (nonatomic, weak) CALayer *dotlayer;
    4. 监听手势进行绘线
    1. // 监听手势
    2. - (void)pan:(UIPanGestureRecognizer *)pan
    3. {
    4.  // 获取当前点
    5.  CGPoint curP = [pan locationInView:self];
    6.  
    7.  
    8.  if (pan.state == UIGestureRecognizerStateBegan) { // 开始滑动
    9.  
    10.  // 绘制起始点
    11.  [self.path moveToPoint:curP];
    12.  
    13.  } else if (pan.state == UIGestureRecognizerStateChanged) {
    14.  // 添加直线
    15.  [self.path addLineToPoint:curP];
    16.  // 重绘
    17.  [self setNeedsDisplay];
    18.  }
    19.  
    20. }

    5. UIBezierPater路径懒加载 

    1. // 路径懒加载
    2. - (UIBezierPath *)path
    3. {
    4.  if (!_path) {
    5.  UIBezierPath *path = [UIBezierPath bezierPath];
    6.  
    7.         _path = path;
    8.  }
    9.  return _path;
    10. }

    6. 绘制

    1. // 绘制
    2. - (void)drawRect:(CGRect)rect {
    3.  
    4.  [self.path stroke];
    5. }

    7. 线绘制完后点击开始,创建帧动画

    1. - (IBAction)start {
    2.  // 1.创建帧动画
    3.  CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    4.     anim.keyPath = @"position";
    5.  
    6.     anim.path = self.path.CGPath;
    7.  
    8.     anim.repeatCount = MAXFLOAT;
    9.  
    10.     anim.duration = 3;
    11.  
    12.  [self.dotlayer addAnimation:anim forKey:nil];
    13.  
    14. }


    8. 点击重绘

    1. - (IBAction)redraw {
    2.  
    3.  // 删除所有动画
    4.  [self.dotlayer removeAllAnimations];
    5.  
    6.  // 销毁路径
    7.  [self.path removeAllPoints];
    8.  
    9.  // 重绘
    10.  [self setNeedsDisplay];
    11.  
    12. }
  • 相关阅读:
    LeetCode 654. Maximum Binary Tree
    LeetCode 680. Valid Palindrome II
    LeetCode 581. Shortest Unsorted Continuous Subarray
    LeetCode 665. Non-decreasing Array
    LeetCode 604. Design Compressed String Iterator
    LeetCode Largest Palindrome Product
    LeetCode 605. Can Place Flowers
    LeetCode Sum of Square Numbers
    LeetCode Maximum Average Subarray I
    LeetCode 673. Number of Longest Increasing Subsequence
  • 原文地址：https://www.cnblogs.com/Xfsrn/p/5000362.html
Copyright © 2011-2022 走看看