按钮动画如何像iOS游戏中心按钮一样实现

Question

按钮动画如何像iOS游戏中心按钮一样实现

iosanimationbuttongame-center

6

我想让我的按钮像iOS Game Center中的按钮一样动态。它们似乎会像气泡一样在屏幕上摇晃和漂浮。我尝试过将我的按钮随机移动到屏幕上，同时使它们以恒定的圆形路径移动，但效果不同。

我需要一种摇晃的效果。欢迎提出任何想法。

- Junaid Ahmed

看一下这个链接：https://dev59.com/M3NA5IYBdhLWcg3wgeSk或许会有所帮助。 - Viper

我会加入随机移动，看看效果如何。从外观上看，我猜这会让我的图像看起来更“抖动”，但是因为我的图像是圆形的，所以这可能有效。 - Junaid Ahmed

不太有效果。只需查看“我”选项卡下的游戏中心，您就会明白我在说什么。 - Junaid Ahmed

你的问题出在哪个部分呢？是定义缩放还是定义路径？ - holex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robert · Accepted Answer

组合几个CAKeyframeAnimations将会给你需要的结果。你需要一个用于让位置跟随一个圆形运动的动画，以及一个针对每个比例轴（x/y）的动画，这些动画的时间略有不同，以实现晃动效果。请查看以下示例：

    UIView * view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 50, 50)];
    view.backgroundColor = [UIColor redColor];
    view.layer.cornerRadius = view.frame.size.width/2;
    [self.view addSubview:view];

    //create an animation to follow a circular path
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //interpolate the movement to be more smooth
    pathAnimation.calculationMode = kCAAnimationPaced;
    //apply transformation at the end of animation (not really needed since it runs forever)
    pathAnimation.fillMode = kCAFillModeForwards;
    pathAnimation.removedOnCompletion = NO;
    //run forever
    pathAnimation.repeatCount = INFINITY;
    //no ease in/out to have the same speed along the path
    pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    pathAnimation.duration = 5.0;

    //The circle to follow will be inside the circleContainer frame.
    //it should be a frame around the center of your view to animate.
    //do not make it to large, a width/height of 3-4 will be enough.
    CGMutablePathRef curvedPath = CGPathCreateMutable();
    CGRect circleContainer = CGRectInset(view.frame, 23, 23);
    CGPathAddEllipseInRect(curvedPath, NULL, circleContainer);

    //add the path to the animation
    pathAnimation.path = curvedPath;
    //release path
    CGPathRelease(curvedPath);
    //add animation to the view's layer
    [view.layer addAnimation:pathAnimation forKey:@"myCircleAnimation"];


    //create an animation to scale the width of the view
    CAKeyframeAnimation *scaleX = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"];
    //set the duration
    scaleX.duration = 1;
    //it starts from scale factor 1, scales to 1.05 and back to 1
    scaleX.values = @[@1.0, @1.05, @1.0];
    //time percentage when the values above will be reached. 
    //i.e. 1.05 will be reached just as half the duration has passed.
    scaleX.keyTimes = @[@0.0, @0.5, @1.0];
    //keep repeating
    scaleX.repeatCount = INFINITY;
    //play animation backwards on repeat (not really needed since it scales back to 1)
    scaleX.autoreverses = YES;
    //ease in/out animation for more natural look
    scaleX.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    //add the animation to the view's layer
    [view.layer addAnimation:scaleX forKey:@"scaleXAnimation"];

    //create the height-scale animation just like the width one above 
    //but slightly increased duration so they will not animate synchronously
    CAKeyframeAnimation *scaleY = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
    scaleY.duration = 1.5;
    scaleY.values = @[@1.0, @1.05, @1.0];
    scaleY.keyTimes = @[@0.0, @0.5, @1.0];
    scaleY.repeatCount = INFINITY;
    scaleY.autoreverses = YES;
    scaleX.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [view.layer addAnimation:scaleY forKey:@"scaleYAnimation"];