如何使这个复杂的动画重复和自动翻转? 有没有什么办法来添加选项UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat这个动画序列?
[UIView animateWithDuration:1.0f animations:^{
someView.frame = someFrame1;
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5f animations:^{
someView.frame = someFrame2;
} completion:nil];
}];
从点1动画2到3比2比1和重复,你可以使用animateKeyframesWithDuration
中的iOS 7及更高版本:
someView.frame = frame1;
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
someView.frame = frame2;
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
someView.frame = frame3;
}];
} completion:nil];
如果使用自动布局,可以动画约束常数的变化:
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
topConstraint.constant = 200;
leftConstraint.constant = 200;
[self.view layoutIfNeeded];
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
topConstraint.constant = 100;
leftConstraint.constant = 300;
[self.view layoutIfNeeded];
}];
} completion:nil];
或者,具有自动布局方法是停用的约束,然后你可以使用动画frame
值,或者你有什么。
在早期版本的iOS,您可以使用CAKeyframeAnimation
,例如沿路径动画:
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100.0, 100.0)];
[path addLineToPoint:CGPointMake(200.0, 200.0)];
[path addLineToPoint:CGPointMake(100.0, 300.0)];
CAKeyframeAnimation *animatePosition = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animatePosition.path = [path CGPath];
animatePosition.duration = 1.0;
animatePosition.autoreverses = YES;
animatePosition.repeatCount = HUGE_VALF;
[self.someView.layer addAnimation:animatePosition forKey:@"position"];
你可以用你想要但是多点做到这一点。 如果你想沿着弯曲的路径(例如圆圈或贝塞尔曲线)动画这也有用的技术。
只是两点之间的动画,你可以使用animateWithDuration:delay:options:animations:completion:
如:
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveEaseInOut
animations:^{
// do whatever animation you want, e.g.,
someView.frame = someFrame1;
}
completion:NULL];
该动画的运动someView
从起始帧someFrame1
和背部。
顺便说一句,使用UIViewAnimationOptionCurveEaseInOut
会同UIViewAnimationOptionAutoreverse
和UIViewAnimationOptionRepeat
会给你一个光滑的效果动画挫折和反复。
斯威夫特4简单摆动序列:
func animateWiggle() {
// Set animation props
let scaleDelta = CGFloat(0.10)
// Set transforms
let wiggleOutHorizontally = CGAffineTransform(scaleX: 1.0 + scaleDelta, y: 1.0)
let wiggleOutVertically = CGAffineTransform(scaleX: 1.0, y: 1.0 + scaleDelta)
// Run animation sequence
UIView.animateKeyframes(withDuration: 1.0, delay: 0.0, options: [.autoreverse, .repeat], animations: {
// Animate wiggle horizontally
UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5, animations: {
self.transform = wiggleOutHorizontally
})
// Animate wiggle vertically
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
self.transform = wiggleOutVertically
})
},
completion: nil)
}
UIImageView *pin = [UIImageView new];
[pin setFrame:CGRectMake(115, 160, 30, 60)];
[pin setBackgroundColor:[UIColor redColor]];
[holderView addSubview:pin];
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat
animations:^{
// [pin setTransform:CGAffineTransformMakeTranslation(0, 20)];
[pin setFrame:CGRectMake(115, 200, 60, 100)];
}completion:^(BOOL finished){
}];