我正在尝试让我的按钮像 ios 游戏中心中的按钮一样具有动画效果。它们似乎像气泡一样在屏幕上摇摆和漂浮。我尝试过在屏幕上随机移动按钮,使它们同时以恒定的圆形路径移动,但效果不一样。
我需要一种摇摆效果。任何想法表示赞赏
结合几个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"];
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)