[英]Animate a UIImageView from center of the UIImageView
I have a UIImageView
that should animate from size (0,0) --> (93,75)
我有一个
UIImageView
应该从size (0,0) --> (93,75)
动画size (0,0) --> (93,75)
I have the following 我有以下内容
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionNone
animations:^{
imgButton.layer.anchorPoint = CGPointMake(imgButton.bounds.size.width/2, imgButton.bounds.size.height/2);
CGRect btnFrame = imgButton.frame;
btnFrame.size.width = 105;
btnFrame.size.height = 85;
imgButton.frame = btnFrame;
}
completion:^(BOOL finished) {
[self animageButton2:imgButton];
}];
This is working but the only problem I have is that it is not animating from the center of the UIImageView
but from the top left corner. 这是有效的,但我唯一的问题是它不是从
UIImageView
的中心动画,而是从左上角动画。
Anybody got a clue? 有人知道吗?
I've solved it with the help of Borrden. 我在Borrden的帮助下解决了这个问题。 This is what my solution was.
这就是我的解决方案。
First create an imageview 首先创建一个imageview
UIImageView *imgLineup = [[UIImageView alloc]initWithFrame:CGRectMake(10, y, 93, 75)];
imgLineup.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.0, 0.0);
And then to the following. 然后到下面。
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut
animations:^{
imgButton.layer.anchorPoint = CGPointMake(0.5, 0.5);
imgButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 1.0);
}
completion:^(BOOL finished) {
NSLog(@"done");
}];
just try with this. 试试看吧。 import
#import <QuartzCore/QuartzCore.h>
then put below code while adding the uimageView into subView of self.view import
#import <QuartzCore/QuartzCore.h>
然后在将uimageView添加到self.view的subView中时将代码放在下面
CABasicAnimation *zoomAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[zoomAnimation setDuration:0.8];
[zoomAnimation setRepeatCount:1];
[zoomAnimation setFromValue:[NSNumber numberWithFloat:0.1]];
[zoomAnimation setToValue:[NSNumber numberWithFloat:1.0]];
[zoomAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[[imageView layer] addAnimation:zoomAnimation forKey:@"zoom"];
What i suggest may be kind of hack but it will be an easier way to achieve what you want: 我的建议可能是一种黑客,但它将是一种更容易实现你想要的方式:
You set the initial frame of imageView as: 您将imageView的初始帧设置为:
CGRectMake(center, center, 0, 0);
So in your case it will be something closer to : 所以在你的情况下,它将更接近:
CGRectMake(46, 37, 0, 0);
Then animate it with new rect of something like this: 然后使用这样的新rect进行动画处理:
CGRectMake(0, 0,93,75);
You can use simple UIViewAnimation for this; 你可以使用简单的UIViewAnimation;
[UIView beginAnimations:@"zoom" context:NULL]; [UIView setAnimationDuration:0.3]; imageView.frame = CGRectMake(0, 0, 93, 75); ; [UIView commitAnimations];
Hope It works 希望它有效
What you are trying to achieve is a scale transform ie animating UIView size from size(0,0) to size(w,h). 你想要实现的是一个比例变换,即从大小(0,0)到大小(w,h)动画UIView大小。 Same effect can be achieved by
CGAffineTransformMakeScale
. CGAffineTransformMakeScale
可以实现相同的效果。
Initially when you create the view apply CGAffineTransformMakeScale(0.0,0.0)
then animate size scale up to CGAffineTransformMakeScale(1.0,1.0)
. 最初,当您创建视图时,应用
CGAffineTransformMakeScale(0.0,0.0)
然后将大小缩放到CGAffineTransformMakeScale(1.0,1.0)
。
Code: 码:
// Create the view and apply correct frame
UIView *tagView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 100, 100)];
tagView.tag = kTag;
//Apply scale transform, to make size(0,0)
tagView.transform = CGAffineTransformMakeScale(0,0);
[self.view addSubview:tagView];
/// ............
UIView *tagView = [self.view viewWithTag:kTag];
//Now animate the view size scale up
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
tagView.transform = CGAffineTransformMakeScale(1.0,1.0);
}
completion:NULL
];
This animation will happen about the center point of the view as you want, thus avoiding the need to play with anchorPoint
and frame
, which can be tricky. 这个动画将根据您的需要发生在视图的中心点,从而避免了使用
anchorPoint
和frame
的需要,这可能很棘手。 Read more about the relation between frame
and anchorPoint
from this answer . 从这个答案中了解有关
frame
和anchorPoint
之间关系的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.