【问题标题】:How to animate UIView transform sequence like scaling then rotating in iOS?如何在 iOS 中为 UIView 变换序列设置动画,例如缩放然后旋转?
【发布时间】:2017-09-05 12:51:09
【问题描述】:

我想知道如何制作一个 UIView 动画,它首先缩放到大小并旋转该大小而不是在原始大小上旋转?

我尝试了很多方法,比如在 UIView 动画的完成中包装 UIView 动画,使用 UIView animateKeyframes 等等。

但是,我无法制作出完美的动画,请给我提示或关键字搜索,谢谢!

【问题讨论】:

标签: ios uiviewanimation


【解决方案1】:

这应该根据您的要求工作(如何制作一个 UIView 动画首先缩放到大小并旋转该大小而不是在原始大小上旋转?)

@IBOutlet var scaleRotateImage: UIImageView!
func scaleNTransform() -> Void {

    scaleRotateImage.layer.cornerRadius = scaleRotateImage.frame.size.height/2.0
    scaleRotateImage.clipsToBounds = true

    let scaleTransform = CGAffineTransform(scaleX: 3.0, y: 3.0)  // Scale
    let rotateTransform = CGAffineTransform(rotationAngle: CGFloat.pi) // Rotation
    let hybridTransform = scaleTransform.concatenating(rotateTransform) // Both Scale + Rotation

    // Outer block of animation
    UIView.animate(withDuration: 5.0, animations: {
        self.scaleRotateImage.transform = scaleTransform
        self.view.layoutIfNeeded()
    }) { (isCompleted) in

        // Nested block of animation
        UIView.animate(withDuration: 5.0, animations: {
            self.scaleRotateImage.transform = hybridTransform
            self.view.layoutIfNeeded()
        })

    }


}


结果

【讨论】:

  • 这似乎是我想要的,我尝试过这样构建,但我可以连接三个或更多吗?我想缩放并摇动它。谢谢!
  • 你能分享你要求的GIF吗? (由于网络限制,我无法访问 Youtube 视频),所以我可以更好地帮助您。
【解决方案2】:

你可以这样做,

定义弧度以将度数转换为弧度

#define RADIANS(degrees) (((degrees) * M_PI) / 180.0)

然后在你的viewDidAppear,

-(void)viewDidAppear:(BOOL)animated{

[super viewDidAppear:animated];

CGAffineTransform leftTransform = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-10.0));
CGAffineTransform rightTransform = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(10.0));

_myView.transform = leftTransform;  //Here `_myView` is the your view on which you want animations!

[UIView beginAnimations:@"youCanSetAnimationIdHere" context:(__bridge void * _Nullable)(_myView)];
[UIView setAnimationRepeatAutoreverses:YES];
[UIView setAnimationRepeatCount:5];
[UIView setAnimationDuration:0.25];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(animationCompletedWithAnimationId:isCompleted:view:)];

_myView.transform = rightTransform;

[UIView commitAnimations];

}

你的animationCompletedWithAnimationId 方法应该是这样的,

- (void) animationCompletedWithAnimationId:(NSString *)animationID isCompleted:(NSNumber *)isCompleted view:(UIView *)view
{
if ([isCompleted boolValue]) {
    UIView *myView = view;
    myView.transform = CGAffineTransformIdentity;

}
}

结果是

您可以根据需要更改重复次数和弧度!

【讨论】:

  • 可以按顺序添加比例变换吗?我无法使用缩放的大小来构建它。它会回到原来的大小然后旋转..
  • 尝试添加_myView.transform = CGAffineTransformMakeScale(2, 2);!
  • 我试过按你的方式缩放然后旋转,但它会以原始大小旋转... T T
【解决方案3】:

希望您已实现缩放或摇动您的UIButton,此代码将指导您使UIView 动画序列重复和自动反转。

btn.frame = frame1;
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        // Your changes to the UI, eg. scale UIButton up 300 points
        btn.frame = frame2;
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        // Your changes to the UI, eg. rotate or shake UIButton
    }];
} completion:nil];

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-10
    • 1970-01-01
    • 2015-02-27
    • 2013-02-07
    • 2021-04-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多