多个 UIView 的动画与 UIBezierPath
Multiple UIView's Animation with UIBezierPath
我有以下屏幕:
当我点击获取更多按钮时,它会添加新的圆形按钮。我在添加了所有圆形按钮的 UIView
上添加了平移手势,然后仅从圆形按钮绘制 UIBezierPath
。到目前为止,一切正常。
现在,我想要以下内容:
- 我有一个名为 playGroundView 的父级
UIView
,它包含所有圆形按钮。这将为所有这些按钮绘制贝塞尔路径。
- 为所有按钮绘制贝塞尔曲线路径后,我单击“移动按钮”立即为所有圆形按钮设置动画。
- 一次,所有按钮都移动到贝塞尔路径的终点,然后我可以再次绘制更多贝塞尔路径(为圆形按钮添加更多步骤)连接到同一按钮的同一路径。
- 在此之后,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
我假设,当你说 "manage all Rounded Button state" 时,你的意思是你想知道视图已经开始动画,类似于 viewHasMovedABitAutomatically
回调 :) 如果那是案例,据我所知,在 CA 框架中没有实现的方法来这样做。但是,请看一下这个问题:Core animation progress callback 这是一种看起来很不错的解决方法,也许您可以从这里开始做一些事情。
哦,还有一件事。我看到您正在使用 Pan 手势识别器。我刚刚浏览了您的代码和 tarmes(另一个线程中的人 ;)),但我认为他正在使用 drawInContext
来检查正在绘制的图层。如果您的视图是可拖动的,这也可能会触发,因此,如果是这种情况,请考虑在平移方法上使用一些 viewIsBeingDragged
标志,并在回调中检查它。
编辑:抱歉,这似乎与您的实际问题无关。我明白你的意思是控制动画速度所以他们都相应地移动。让我们详细说明一下。
据我所知,没有动画这样的东西"step"。动画图像将其向左移动 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 文档执行非线性动画的方法(我不太记得所有的细节,但我请记住这是一段相当长的代码 ;))。
很抱歉,如果答案有点含糊,希望对您有所帮助!
为了实现这些东西,我使用了UIBezierPath+Points类。除此之外,在我的代码中使用了 classes 和逻辑:
在PlayGroundView中,我编辑了drawRect方法中的代码,其余代码相同:
- (void)drawRect:(CGRect)rect {
[[UIColor redColor] setStroke];
for (int i=0; i<[self subviews].count; i++) {
RoundButton *tmpPlayerButton = [self.subviews objectAtIndex:i];
for (UIBezierPath *bezierPath in tmpPlayerButton.allPathsOfPlayer) {
[bezierPath strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];
}
}
[path stroke];
}
在我的 ViewController class 中,在获取更多按钮中,下面的代码是:
- (IBAction)getBallPressed:(id)sender {
[self moveBalls];
// self.playView.viewController = self;
int xPos = self.view.frame.size.width-30;
int yPos = self.view.frame.size.height-30;
int btnXPos = arc4random_uniform(xPos);
int btnYPos = arc4random_uniform(yPos);
RoundButton *newButton = [[RoundButton alloc] initWithFrame:CGRectMake(btnXPos, btnYPos, 30, 30)];
[newButton setBackgroundColor:[UIColor redColor]];
newButton.layer.cornerRadius = newButton.frame.size.height/2;
[newButton setTitle:[self randomStringWithLength:1] forState:UIControlStateNormal];
UILongPressGestureRecognizer *longGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longGestureRecognized:)];
[newButton addGestureRecognizer:longGesture];
[self.playView.playerArray addObject:newButton];
[self.playView addSubview:newButton];
}
- (void)moveBalls {
for (int i=0; i<[self.playView subviews].count; i++) {
RoundButton *playerButton = [self.playView.subviews objectAtIndex:i];
if (playerButton.isEditPath) {
id point = [[[playerButton.allPathsOfPlayer lastObject] points] lastObject];
CGPoint lastPoint = [point CGPointValue];
NSLog(@"lastPoint: %@", NSStringFromCGPoint(lastPoint));
[playerButton setCenter:lastPoint];
}
}
}
在移动按钮中,下面的代码允许我同时移动所有圆形按钮,这是我的确切要求:
- (void)playAnimation {
for (int i=0; i<self.playView.subviews.count; i++) {
//Prepare the animation - we use keyframe animation for animations of this complexity
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//Set some variables on the animation
pathAnimation.calculationMode = kCAAnimationPaced;
//We want the animation to persist - not so important in this case - but kept for clarity
//If we animated something from left to right - and we wanted it to stay in the new position,
//then we would need these parameters
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 2.0;
pathAnimation.repeatCount = 0;
RoundButton *tmpRoundButton;
UIBezierPath *path;
tmpRoundButton = [self.playView.subviews objectAtIndex:i];
for (int j=0; j<tmpRoundButton.allPathsOfPlayer.count; j++) {
if (path)
[path appendPath:[tmpRoundButton.allPathsOfPlayer objectAtIndex:j]];
else
path = [tmpRoundButton.allPathsOfPlayer objectAtIndex:j];
//Now we have the path, we tell the animation we want to use this path - then we release the path
pathAnimation.path = [path CGPath];
[tmpRoundButton.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];
}
[path moveToPoint:[[[path points] firstObject] CGPointValue]];
}
[self.playView setNeedsDisplay];
}
let playerController = AVPlayerViewController()
playerController.delegate = self
player = AVPlayer(url: url as URL)
playerController.player = player
self.addChildViewController(playerController)
self.videoview.addSubview(playerController.view)
playerController.view.frame = self.videoview.bounds
player.play()
我有以下屏幕:
当我点击获取更多按钮时,它会添加新的圆形按钮。我在添加了所有圆形按钮的 UIView
上添加了平移手势,然后仅从圆形按钮绘制 UIBezierPath
。到目前为止,一切正常。
现在,我想要以下内容:
- 我有一个名为 playGroundView 的父级
UIView
,它包含所有圆形按钮。这将为所有这些按钮绘制贝塞尔路径。 - 为所有按钮绘制贝塞尔曲线路径后,我单击“移动按钮”立即为所有圆形按钮设置动画。
- 一次,所有按钮都移动到贝塞尔路径的终点,然后我可以再次绘制更多贝塞尔路径(为圆形按钮添加更多步骤)连接到同一按钮的同一路径。
- 在此之后,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
我假设,当你说 "manage all Rounded Button state" 时,你的意思是你想知道视图已经开始动画,类似于 viewHasMovedABitAutomatically
回调 :) 如果那是案例,据我所知,在 CA 框架中没有实现的方法来这样做。但是,请看一下这个问题:Core animation progress callback 这是一种看起来很不错的解决方法,也许您可以从这里开始做一些事情。
哦,还有一件事。我看到您正在使用 Pan 手势识别器。我刚刚浏览了您的代码和 tarmes(另一个线程中的人 ;)),但我认为他正在使用 drawInContext
来检查正在绘制的图层。如果您的视图是可拖动的,这也可能会触发,因此,如果是这种情况,请考虑在平移方法上使用一些 viewIsBeingDragged
标志,并在回调中检查它。
编辑:抱歉,这似乎与您的实际问题无关。我明白你的意思是控制动画速度所以他们都相应地移动。让我们详细说明一下。
据我所知,没有动画这样的东西"step"。动画图像将其向左移动 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 文档执行非线性动画的方法(我不太记得所有的细节,但我请记住这是一段相当长的代码 ;))。
很抱歉,如果答案有点含糊,希望对您有所帮助!
为了实现这些东西,我使用了UIBezierPath+Points类。除此之外,在我的代码中使用了 classes 和逻辑:
在PlayGroundView中,我编辑了drawRect方法中的代码,其余代码相同:
- (void)drawRect:(CGRect)rect {
[[UIColor redColor] setStroke];
for (int i=0; i<[self subviews].count; i++) {
RoundButton *tmpPlayerButton = [self.subviews objectAtIndex:i];
for (UIBezierPath *bezierPath in tmpPlayerButton.allPathsOfPlayer) {
[bezierPath strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];
}
}
[path stroke];
}
在我的 ViewController class 中,在获取更多按钮中,下面的代码是:
- (IBAction)getBallPressed:(id)sender {
[self moveBalls];
// self.playView.viewController = self;
int xPos = self.view.frame.size.width-30;
int yPos = self.view.frame.size.height-30;
int btnXPos = arc4random_uniform(xPos);
int btnYPos = arc4random_uniform(yPos);
RoundButton *newButton = [[RoundButton alloc] initWithFrame:CGRectMake(btnXPos, btnYPos, 30, 30)];
[newButton setBackgroundColor:[UIColor redColor]];
newButton.layer.cornerRadius = newButton.frame.size.height/2;
[newButton setTitle:[self randomStringWithLength:1] forState:UIControlStateNormal];
UILongPressGestureRecognizer *longGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longGestureRecognized:)];
[newButton addGestureRecognizer:longGesture];
[self.playView.playerArray addObject:newButton];
[self.playView addSubview:newButton];
}
- (void)moveBalls {
for (int i=0; i<[self.playView subviews].count; i++) {
RoundButton *playerButton = [self.playView.subviews objectAtIndex:i];
if (playerButton.isEditPath) {
id point = [[[playerButton.allPathsOfPlayer lastObject] points] lastObject];
CGPoint lastPoint = [point CGPointValue];
NSLog(@"lastPoint: %@", NSStringFromCGPoint(lastPoint));
[playerButton setCenter:lastPoint];
}
}
}
在移动按钮中,下面的代码允许我同时移动所有圆形按钮,这是我的确切要求:
- (void)playAnimation {
for (int i=0; i<self.playView.subviews.count; i++) {
//Prepare the animation - we use keyframe animation for animations of this complexity
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//Set some variables on the animation
pathAnimation.calculationMode = kCAAnimationPaced;
//We want the animation to persist - not so important in this case - but kept for clarity
//If we animated something from left to right - and we wanted it to stay in the new position,
//then we would need these parameters
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 2.0;
pathAnimation.repeatCount = 0;
RoundButton *tmpRoundButton;
UIBezierPath *path;
tmpRoundButton = [self.playView.subviews objectAtIndex:i];
for (int j=0; j<tmpRoundButton.allPathsOfPlayer.count; j++) {
if (path)
[path appendPath:[tmpRoundButton.allPathsOfPlayer objectAtIndex:j]];
else
path = [tmpRoundButton.allPathsOfPlayer objectAtIndex:j];
//Now we have the path, we tell the animation we want to use this path - then we release the path
pathAnimation.path = [path CGPath];
[tmpRoundButton.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];
}
[path moveToPoint:[[[path points] firstObject] CGPointValue]];
}
[self.playView setNeedsDisplay];
}
let playerController = AVPlayerViewController()
playerController.delegate = self
player = AVPlayer(url: url as URL)
playerController.player = player
self.addChildViewController(playerController)
self.videoview.addSubview(playerController.view)
playerController.view.frame = self.videoview.bounds
player.play()