UIView 动画可以设置的动画属性:
- 位置变化(frame)
- 大小变化(bounds)
- 中心点位置(center)
- 旋转、缩放等(transform)
- 透明度(alpha)
- 背景颜色(backgroundColor)
- 拉伸内容(contentStretch)
UIView的Block动画块,为iOS4.0以后增加,提供更简洁的方式来实现动画。
常用 Block 块函数:
// 1、最简单的Block动画:包含时间和动画
[UIView animateWithDuration:3 animations:^{
// 执行动画
}];
// 2、带有动画完成回调的Block动画
[UIView animateWithDuration:3 animations:^{
// 执行的动画
} completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
// 3、可设置延迟时间和过渡效果的Block动画
[UIView animateWithDuration:3 delay:3 options:UIViewAnimationOptionRepeat animations:^{
// 执行的动画
} completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
// 4、Spring动画 iOS7.0后新增Spring动画(iOS系统动画大部分采用Spring Animation,适用于所有可被添加动画效果的属性)
[UIView animateWithDuration:3 // 动画持续时间
delay:3 // 动画延迟执行的时间
usingSpringWithDamping:0.5 // 震动效果(阻尼值),范围0~1,数值越小震动效果越明显
initialSpringVelocity:0.5 // 初始速度,数值越大初始速度越快
options:UIViewAnimationOptionAutoreverse // 动画的过渡效果
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
// 5、关键帧动画,Keyframes动画 iOS7.0后新增关键帧动画,支持属性关键帧,不支持路径关键帧
[UIView animateKeyframesWithDuration:3 // 动画持续时间
delay:3 // 动画延迟执行的时间
options:UIViewKeyframeAnimationOptionLayoutSubviews // 动画的过渡效果
animations:^{
// 执行的关键帧动画
}
completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
// 增加关键帧动画的方法
[UIView addKeyframeWithRelativeStartTime:2 // 动画开始的时间(占总时间的比例)
relativeDuration:2 // 动画持续时间(占总时间的比例)
animations:^{
//执行的动画
}];
// 6、转场动画
// 6.1 从旧视图转到新视图的动画效果
[UIView transitionFromView:self.aIcon
toView:self.bIcon
duration:3
options:UIViewAnimationOptionAutoreverse
completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
// 在该动画过程中,fromView 会从父视图中移除,并将 toView 添加到父视图中,注意转场动画的作用对象是父视图(过渡效果体现在父视图上)。
// 6.2 单个视图的过渡效果
[UIView transitionWithView:self.view
duration:3
options:UIViewAnimationOptionLayoutSubviews
animations:^{
// 执行的动画
} completion:^(BOOL finished) {
// 动画执行完毕后的操作
}];
简单示例代码:
// 从旧视图转到新视图的动画效果
- (void)testTransition2 {
UIImageView * newCenterShow = [[UIImageView alloc]initWithFrame:self.aIcon.frame];
newCenterShow.image = [UIImage imageNamed:@"Service"];
[UIView transitionFromView:self.aIcon toView:newCenterShow duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
}
// 单个视图的过渡效果
- (void)testTransition {
[UIView transitionWithView:self.aIcon duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
self.aIcon.image = [UIImage imageNamed:@"2"];
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
}
- (void)testKeyFrame {
[UIView animateKeyframesWithDuration:4
delay:0
options:UIViewKeyframeAnimationOptionCalculationModeLinear
animations:^{
[UIView addKeyframeWithRelativeStartTime:0
relativeDuration:1/4.f
animations:^{
self.aIcon.backgroundColor = [UIColor redColor];
}];
[UIView addKeyframeWithRelativeStartTime:1/4.f
relativeDuration:1/4.f
animations:^{
self.aIcon.backgroundColor = [UIColor purpleColor];
}];
[UIView addKeyframeWithRelativeStartTime:2.0/4.f
relativeDuration:1/4.f
animations:^{
self.aIcon.backgroundColor = [UIColor orangeColor];
}];
[UIView addKeyframeWithRelativeStartTime:3.0/4.f
relativeDuration:1/4.f
animations:^{
self.aIcon.backgroundColor = [UIColor greenColor];
}];
} completion:^(BOOL finished) {
// 完成动画
}];
}
- (void)testSpring {
[UIView animateWithDuration:1
delay:0
usingSpringWithDamping:0.5
initialSpringVelocity:5
options:UIViewAnimationOptionCurveEaseIn
animations:^{
self.bIcon.frame = self.aIcon.frame;
} completion:^(BOOL finished) {
}];
}
- (void)testB {
[UIView animateWithDuration:2
delay:0
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
self.bIcon.frame = self.aIcon.frame;
} completion:^(BOOL finished) {
}];
}
// 普通动画
- (void)testA {
[UIView animateWithDuration:2 animations:^{
_bIcon.center = _aIcon.center;
_bIcon.bounds = _aIcon.bounds;
} completion:^(BOOL finished) {
}];
}