草庐IT

ios - 多个 UIView 的动画与 UIBezierPath

coder 2023-09-25 原文

我有以下屏幕:

当我点击获取更多按钮时,它会添加新的圆形按钮。我在 UIView 上添加了 Pan Gesture,其中添加了所有圆形按钮,然后仅从圆形按钮绘制 UIBezierPath。到目前为止,一切正常。

现在,我想要以下内容:

  1. 我有一个名为 playGroundView 的父级 UIView,它包含所有圆形按钮。这将为所有这些按钮绘制一条贝塞尔曲线路径。
  2. 为所有按钮绘制贝塞尔曲线路径后,我单击“移动按钮”以立即为所有圆形按钮设置动画。
  3. 一次,所有按钮都移动到贝塞尔路径的终点,然后我可以再次为同一按钮绘制更多贝塞尔路径(为圆形按钮添加更多步骤)连接到同一路径。
  4. 在此之后,Final Move 按钮将立即为同一个 Button 设置整体动画。

PlayGround UIView 子类引用以下代码:

@interface PlayGroundView : UIView
@property (nonatomic, weak) PlayGroundViewController *playViewController;
@end

#import "PlayGroundView.h"
#import "RoundedButton.h"
#import "PlayGroundViewController.h"

@interface PlayGroundView () {
    UIBezierPath *path;
    BOOL isDrawPointInside;
}

@end

@implementation PlayGroundView

#pragma mark - View Methods -
- (id)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder])
        [self commonInit];
    return self;
}

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame])
        [self commonInit];
    return self;
}

- (void)drawRect:(CGRect)rect {
    [[UIColor redColor] setStroke];
    [path stroke];
}

#pragma mark - Action Methods -
- (void)pan:(UIPanGestureRecognizer *)pan {
    CGPoint currentPoint = [pan locationInView:self];
    //    NSLog(@"currentPoint: %@", NSStringFromCGPoint(currentPoint));
    if (pan.state == UIGestureRecognizerStateBegan) {
        NSMutableArray *buttonAry = [NSMutableArray array];
        buttonAry = self.playViewController.rBtnOpponentPlayerList;
        [buttonAry addObjectsFromArray:self.playViewController.rBtnPlayerList];
        for (int i=0; i<buttonAry.count; i++) {
            UIButton *btn = [buttonAry objectAtIndex:i];
            CGRect nearByRect = CGRectMake(btn.frame.origin.x - 20, btn.frame.origin.y - 20, btn.frame.size.width + 40, btn.frame.size.height + 40);
            if (CGRectContainsPoint(nearByRect, currentPoint)) {
                isDrawPointInside = YES;
                [path moveToPoint:btn.center];
                //                NSLog(@"point is inside....");
            }
        }
    }
    if (pan.state == UIGestureRecognizerStateChanged) {
        if (isDrawPointInside) {
            [path addLineToPoint:currentPoint];
            [self setNeedsDisplay];
        }
    }
    
    if (pan.state == UIGestureRecognizerStateEnded) {
        isDrawPointInside = NO;
        //        NSLog(@"pan ended");
    }
}

#pragma mark - Helper Methods -
- (void)commonInit {
    path = [UIBezierPath bezierPath];
    path.lineWidth = 3.0;
    
    // Capture touches
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    pan.maximumNumberOfTouches = pan.minimumNumberOfTouches = 1;
    [self addGestureRecognizer:pan];
    
    // Erase with long press
    [self addGestureRecognizer:[[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(erase)]];
}

- (void)erase {
    path = [UIBezierPath bezierPath];
    path.lineWidth = 3.0;

    [self setNeedsDisplay];
}

@end

我仍然无法管理所有圆形按钮状态。让我知道在移动时管理圆形按钮所有步骤的最佳方法。

我已经提到:http://nachbaur.com/blog/core-animation-part-4

我的完整演示代码位于:https://www.dropbox.com/s/f0ri0bff8ioxtpz/FreeHandDrawingDemo%202.zip?dl=0

最佳答案

我假设,当你说“管理所有圆角按钮状态”时,你的意思是你想知道 View 已经开始动画,类似于 viewHasMovedABitAutomatically 回调:)如果是这样的话,据我所知,在 CA 框架中没有实现的方法来这样做。但是,看看这个问题:Core animation progress callback这是一种看起来很不错的解决方法,也许您可​​以从这里开始做一些事情。

哦,还有一件事。我看到您正在使用 Pan 手势识别器。我刚刚浏览了您的代码和 tarmes(另一个线程中的人 ;)),但我认为他正在使用 drawInContext 来检查正在绘制的图层。如果您的 View 是可拖动的,这也可能会触发,因此,如果是这种情况,请考虑在平移方法上使用一些 viewIsBeingDragged 标志,并在回调中检查它。

编辑:抱歉,这似乎与您的实际问题无关。我明白你的意思是控制动画速度所以他们都相应地移动。让我们详细说明一下。

据我所知,没有动画“步骤”这样的东西。动画图像将其向左移动 20 像素并不一定意味着图像将被重绘 20 次。图像将根据需要多次渲染,因此我们不能依赖渲染方法来计算它。据我所知,控制动画速度的唯一方法是通过 animateWithDuration:duration 参数。你不知道持续时间,你想让速度恒定,所以持续时间是任何时间。

基础物理:持续时间等于距离除以速度,因此如果我们有需要覆盖的距离,我们可以轻松计算出动画持续时间。起初我以为 UIBezierPath 可能有一个方法或一个属性来计算总长度,但我错了。但是,在这个线程中 Get CGPath total length有一个代码是通过数值积分来计算它的,你应该测试它看看它是否有效。一旦你有了它,你就可以做这样的事情(我没有测试它,我只是输入伪代码)

#define SPEED_CALIBRATION 30.0 // or whatever

-(void)animateView:(UIView*)view withBezierPath:(UIBezierPath*)path {
    CGFloat distance = [self getBezierPathDistance:path];
    CGFloat duration = distance / SPEED_CALIBRATION;
    [self animateView:view withDuration:duration andBezierPath:path];
}

是这样的。 getBezierPathDistance 是上述线程中的方法,假设它有效,animateView:withDuration:andBezierPath: 是您使用 CA 文档执行非线性动画的方法(我不太记得所有的细节,但我记得那是一段很长的代码 ;))。

很抱歉,如果答案有点含糊,希望对您有所帮助!

关于ios - 多个 UIView 的动画与 UIBezierPath,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29469326/

有关ios - 多个 UIView 的动画与 UIBezierPath的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组,我需要根据最早的事件循环打印。在这种情况下,我需要打印付款和维护日期,如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询,用于查找maintenance和payment项目(非排他性查询),并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  3. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  4. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  5. ruby-on-rails - 在 ruby​​ .gemspec 文件中,如何指定依赖项的多个版本? - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作,我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容,因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表?~>3.0还是~>4.0? 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本,你可以这

  6. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同,而不是下载一半的损坏文件?documentation说IO.copy_stream返回它复制的字节数,但是当我还没有下

  7. Ruby 文件 IO 定界符? - 2

    我正在尝试解析一个文本文件,该文件每行包含可变数量的单词和数字,如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件?有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符? 最佳答案 接受的答案将slurp文件,这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的,将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  8. ruby - 使用多个数组创建计数 - 2

    我正在尝试按0-9和a-z的顺序创建数字和字母列表。我有一组值value_array=['0','1','2','3','4','5','6','7','8','9','a','b','光盘','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','','u','v','w','x','y','z']和一个组合列表的数组,按顺序,这些数字可以产生x个字符,比方说三个list_array=[]和一个当前字母和数字组合的数组(在将它插入列表数组之前我会把它变成一个字符串,]current_combo['0','0','0']

  9. ruby-on-rails - before_filter 运行多个方法 - 2

    是否有可能:before_filter:authenticate_user!||:authenticate_admin! 最佳答案 before_filter:do_authenticationdefdo_authenticationauthenticate_user!||authenticate_admin!end 关于ruby-on-rails-before_filter运行多个方法,我们在StackOverflow上找到一个类似的问题: https://

  10. ruby-on-rails - Rails 3.1 中具有相同形式的多个模型? - 2

    我正在使用Rails3.1并在一个论坛上工作。我有一个名为Topic的模型,每个模型都有许多Post。当用户创建新主题时,他们也应该创建第一个Post。但是,我不确定如何以相同的形式执行此操作。这是我的代码:classTopic:destroyaccepts_nested_attributes_for:postsvalidates_presence_of:titleendclassPost...但这似乎不起作用。有什么想法吗?谢谢! 最佳答案 @Pablo的回答似乎有你需要的一切。但更具体地说...首先改变你View中的这一行对此#

随机推荐