我们目前正在开发包含一系列图标的应用程序。我们希望图标在按下时像应用删除动画一样摆动。什么是编码这个动画序列的最佳方式?如何创建类似于iphone删除动画的摆动动画
回答
我试图为iPad应用做类似的事情。
我试图做一些旋转(与CAAnimation)到视图。这里是我写的示例代码:
- (CAAnimation*)getShakeAnimation { CABasicAnimation *animation; CATransform3D transform; // Create the rotation matrix transform = CATransform3DMakeRotation(0.08, 0, 0, 1.0); // Create a basic animation to animate the layer's transform animation = [CABasicAnimation animationWithKeyPath:@"transform"]; // Assign the transform as the animation's value animation.toValue = [NSValue valueWithCATransform3D:transform]; animation.autoreverses = YES; animation.duration = 0.1; animation.repeatCount = HUGE_VALF; return animation; }
而你应该尝试应用这一个到你的图层(使用函数:addAnimation)。 这里,autoreverses属性是交替左右方向。 尝试将其他值设置为角度和持续时间。
但在我的情况下,我不得不给别人的角度添加到CATransform3DMakeRotation方法,根据初始层取向^^
祝您好运! Vincent
你真棒我的朋友! ! – user446718 2010-09-13 23:00:08
Vinzius的答案非常酷。但摆动只从0弧度旋转到0.08。因此摆动看起来有点不平衡。如果你得到同样的问题,那么你可能想通过使用CAKeyframeAnimation而非CABasicRotation同时添加一个负和正转:
- (CAAnimation*)getShakeAnimation
{
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
CGFloat wobbleAngle = 0.06f;
NSValue* valLeft = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(wobbleAngle, 0.0f, 0.0f, 1.0f)];
NSValue* valRight = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(-wobbleAngle, 0.0f, 0.0f, 1.0f)];
animation.values = [NSArray arrayWithObjects:valLeft, valRight, nil];
animation.autoreverses = YES;
animation.duration = 0.125;
animation.repeatCount = HUGE_VALF;
return animation;
}
您可以使用此方法的动画为您的视图或按钮这样的。
[self.yourbutton.layer addAnimation:[self getShakeAnimation] forKey:@""];
望着iOS的实施有点接近,这里有提到两件事情,让他们有点比代码更现实:
- 的图标似乎有反弹以及一旋转
- 每个图标都有自己的时间 - 他们是不是所有的同步
我自己基础上的答案在这里(以及与此一些帮助10)在每个动画的持续时间中添加旋转,反弹和一点随机性。
#define kWiggleBounceY 4.0f
#define kWiggleBounceDuration 0.12
#define kWiggleBounceDurationVariance 0.025
#define kWiggleRotateAngle 0.06f
#define kWiggleRotateDuration 0.1
#define kWiggleRotateDurationVariance 0.025
-(void)startWiggling {
[UIView animateWithDuration:0
animations:^{
[self.layer addAnimation:[self rotationAnimation] forKey:@"rotation"];
[self.layer addAnimation:[self bounceAnimation] forKey:@"bounce"];
self.transform = CGAffineTransformIdentity;
}];
}
-(CAAnimation*)rotationAnimation {
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.values = @[@(-kWiggleRotateAngle), @(kWiggleRotateAngle)];
animation.autoreverses = YES;
animation.duration = [self randomizeInterval:kWiggleRotateDuration
withVariance:kWiggleRotateDurationVariance];
animation.repeatCount = HUGE_VALF;
return animation;
}
-(CAAnimation*)bounceAnimation {
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.y"];
animation.values = @[@(kWiggleBounceY), @(0.0)];
animation.autoreverses = YES;
animation.duration = [self randomizeInterval:kWiggleBounceDuration
withVariance:kWiggleBounceDurationVariance];
animation.repeatCount = HUGE_VALF;
return animation;
}
-(NSTimeInterval)randomizeInterval:(NSTimeInterval)interval withVariance:(double)variance {
double random = (arc4random_uniform(1000) - 500.0)/500.0;
return interval + variance * random;
}
我实现上的UICollectionView其中有30个项目弹跳此代码并表现得完美无瑕在iPad 2.
SWIFT: -
let transformAnim = CAKeyframeAnimation(keyPath:"transform")
transformAnim.values = [NSValue(CATransform3D: CATransform3DMakeRotation(0.04, 0.0, 0.0, 1.0)),NSValue(CATransform3D: CATransform3DMakeRotation(-0.04 , 0, 0, 1))]
transformAnim.autoreverses = true
transformAnim.duration = (Double(indexPath.row)%2) == 0 ? 0.115 : 0.105
transformAnim.repeatCount = Float.infinity
self.layer.addAnimation(transformAnim, forKey: "transform")
目标C : -
-(CAKeyframeAnimation *)wiggleView
{
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
CGFloat wobbleAngle = 0.04f;
NSValue* valLeft = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(wobbleAngle, 0.0f, 0.0f, 1.0f)];
NSValue* valRight = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(-wobbleAngle, 0.0f, 0.0f, 1.0f)];
animation.values = [NSArray arrayWithObjects:valLeft, valRight, nil];
animation.autoreverses = YES;
animation.duration = 0.125;
animation.repeatCount = HUGE_VALF;
return animation;
}
编辑paiego的代码以满足我的需求:用户操作时的视觉错误动画反馈(点击)。它只发生过一次 - 它不是像SpringBoard应用程序编辑摆动动画那样不断摇摆。
- (CAAnimation *)shakeAnimation {
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
CGFloat wobbleAngle = 0.06f;
NSValue *valLeft;
NSValue *valRight;
NSMutableArray *values = [NSMutableArray new];
for (int i = 0; i < 5; i++) {
valLeft = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(wobbleAngle, 0.0f, 0.0f, 1.0f)];
valRight = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(-wobbleAngle, 0.0f, 0.0f, 1.0f)];
[values addObjectsFromArray:@[valLeft, valRight]];
wobbleAngle*=0.66;
}
animation.values = [values copy];
animation.duration = 0.7;
return animation;
}
用法:
[your_view.layer addAnimation:[self shakeAnimation] forKey:@""]; //do the shake animation
your_view.transform = CGAffineTransformIdentity; //return the view back to original
希望这可以帮助其他人。
重写了塞巴斯蒂安在斯威夫特回答3
let wiggleBounceY = 4.0
let wiggleBounceDuration = 0.12
let wiggleBounceDurationVariance = 0.025
let wiggleRotateAngle = 0.06
let wiggleRotateDuration = 0.10
let wiggleRotateDurationVariance = 0.025
func randomize(interval: TimeInterval, withVariance variance: Double) -> Double{
let random = (Double(arc4random_uniform(1000)) - 500.0)/500.0
return interval + variance * random
}
func startWiggle(for view: UIView){
//Create rotation animation
let rotationAnim = CAKeyframeAnimation(keyPath: "transform.rotation.z")
rotationAnim.values = [-wiggleRotateAngle, wiggleRotateAngle]
rotationAnim.autoreverses = true
rotationAnim.duration = randomize(interval: wiggleRotateDuration, withVariance: wiggleRotateDurationVariance)
rotationAnim.repeatCount = HUGE
//Create bounce animation
let bounceAnimation = CAKeyframeAnimation(keyPath: "transform.translation.y")
bounceAnimation.values = [wiggleBounceY, 0]
bounceAnimation.autoreverses = true
bounceAnimation.duration = randomize(interval: wiggleBounceDuration, withVariance: wiggleBounceDurationVariance)
bounceAnimation.repeatCount = HUGE
//Apply animations to view
UIView.animate(withDuration: 0) {
view.layer.add(rotationAnim, forKey: "rotation")
view.layer.add(bounceAnimation, forKey: "bounce")
view.transform = .identity
}
}
func stopWiggle(for view: UIView){
view.layer.removeAllAnimations()
}
func startWiggling() {
deleteButton.isHidden = false
guard contentView.layer.animation(forKey: "wiggle") == nil else { return }
guard contentView.layer.animation(forKey: "bounce") == nil else { return }
let angle = 0.04
let wiggle = CAKeyframeAnimation(keyPath: "transform.rotation.z")
wiggle.values = [-angle, angle]
wiggle.autoreverses = true
wiggle.duration = randomInterval(0.1, variance: 0.025)
wiggle.repeatCount = Float.infinity
contentView.layer.add(wiggle, forKey: "wiggle")
let bounce = CAKeyframeAnimation(keyPath: "transform.translation.y")
bounce.values = [4.0, 0.0]
bounce.autoreverses = true
bounce.duration = randomInterval(0.12, variance: 0.025)
bounce.repeatCount = Float.infinity
contentView.layer.add(bounce, forKey: "bounce")
}
func stopWiggling() {
deleteButton.isHidden = true
contentView.layer.removeAllAnimations()
}
看这个的iOS SpingBoard example
在另一个线程回答了雨燕4.0版本的什么似乎是苹果公司自己的算法逆向工程: https://stackoverflow.com/a/47730519/5018607
- 1. 创建类似于AppBar的动画
- 2. 如何创建摆动动画(阻尼摆动)?
- 3. 摆动动画
- 4. 如何动画标签或类似的UIView摆动
- 5. 删除动画后的类
- 6. silverlight中摆摆动动画
- 7. iPhone - 创建动画像Xcode
- 8. 如何在iPhone上做类似于Path的动画按钮?
- 9. 动画添加/删除类
- 10. UIImageView上的摆动动画
- 11. CSS - 删除启动动画
- 12. 动画GUI为iPhone动画
- 13. 如何创建动画的运动IMG
- 14. 创建一个类似于NSPopOver的动画
- 15. 如何在tableview中添加类似于google +滚动的动画?
- 16. 删除Silverlight动画
- 17. 如何动画摆动绳索?
- 18. 创建动画类问题
- 19. 如何创建动画ToggleButton?
- 20. 如何创建此动画?
- 21. 如何从Google创建类似的动画?
- 22. 如何使用展开/折叠动画创建类似的recyclerview?
- 23. matplotlib圈,动画,如何删除动画中的旧圆
- 24. 摆动动画问题?
- 25. 摆动视图动画
- 26. UIView帧动画“摆动”
- 27. 从CSS3动画SVG创建动画GIF
- 28. iPhone 5启动画面 - 无法删除
- 29. 如何动态创建'@ -Keyframe'CSS动画?
- 30. 如何为UIView创建拖动动画?
可能重复[如何创建iphone的摇摆图标效果?](http://stackoverflow.com/questi ons/929364/how-to-create-iphones-wobbling-icon-effect) – kennytm 2010-09-13 20:09:58
看看这个: [摆动效果](https://github.com/rajendrahn/ShakeAnimation) – Raj 2013-02-06 10:47:29