动画化原理
动画支持
案例
新建文档view输入
_label = [[ UILabel alloc]init];
_label.text = @" i can fly!";
_label.backgroundColor = [UIColor darkGrayColor];
_label.alpha =0;
[_label sizeToFit];
_label.center = CGPointMake(self.view.bounds.size.width , self.view.center.y);
[self.view addSubview:_label];
[UIView animateWithDuration:2.0
delay:0
//UIViewAnimationOptionRepeat 不间断 ..基本用来做测试
options:UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveLinear
animations:^{
_label.center = CGPointMake(_label.bounds.size.width /2, self.view.center.y);
_label.alpha = 1.0;
}
completion:nil];
run起来
run
说说动画类型
//常规动画属性设置
UIViewAnimationOptionLayoutSubviews = 1 << 0,//动画过程中保证子视图跟随运动
UIViewAnimationOptionAllowUserInteraction = 1 << 1, // turn on user interaction while animating(动画过程中允许用户交互。)
UIViewAnimationOptionBeginFromCurrentState = 1 << 2, // start all views from current value, not initial value所有视图从当前状态开始运行。
UIViewAnimationOptionRepeat = 1 << 3, // repeat animation indefinitely(重复运行动画。。)
UIViewAnimationOptionAutoreverse = 1 << 4, // if repeat, run animation back and forth动画运行到结束点后仍然以动画方式回到初始点。
UIViewAnimationOptionOverrideInheritedDuration = 1 << 5, // ignore nested duration忽略嵌套动画时间设置。
UIViewAnimationOptionOverrideInheritedCurve = 1 << 6, // ignore nested curve忽略嵌套动画速度设置。
UIViewAnimationOptionAllowAnimatedContent = 1 << 7, // animate contents (applies to transitions only)动画过程中重绘视图（注意仅仅适用于转场动画）。
UIViewAnimationOptionShowHideTransitionViews = 1 << 8, // flip to/from hidden state instead of adding/removing视图切换时直接隐藏旧视图、显示新视图，而不是将旧视图从父视图移除（仅仅适用于转场动画）
UIViewAnimationOptionOverrideInheritedOptions = 1 << 9, // do not inherit any options or animation type不继承父动画设置或动画类型。
//动画速度控制
UIViewAnimationOptionCurveEaseInOut = 0 << 16, // default动画先缓慢，然后逐渐加速。
UIViewAnimationOptionCurveEaseIn = 1 << 16,//动画逐渐变慢。
UIViewAnimationOptionCurveEaseOut = 2 << 16,//动画逐渐加速。
UIViewAnimationOptionCurveLinear = 3 << 16,//动画匀速执行，默认值。直线行驶
//翻页效果(仅适用于转场动画设置，可以从中选择一个进行设置，基本动画、关键帧动画不需要设置）
UIViewAnimationOptionTransitionNone = 0 << 20, // default没有转场动画效果。
UIViewAnimationOptionTransitionFlipFromLeft = 1 << 20,//从左侧翻转效果
UIViewAnimationOptionTransitionFlipFromRight = 2 << 20,//从右侧翻转效果。
UIViewAnimationOptionTransitionCurlUp = 3 << 20,//向后翻页的动画过渡效果。
UIViewAnimationOptionTransitionCurlDown = 4 << 20,//向前翻页的动画过渡效果。
UIViewAnimationOptionTransitionCrossDissolve = 5 << 20,//旧视图溶解消失显示下一个新视图的效果。
UIViewAnimationOptionTransitionFlipFromTop = 6 << 20,//从上方翻转效果。
UIViewAnimationOptionTransitionFlipFromBottom = 7 << 20,//从底部翻转效果。
UIview的keyframe 动画化
Snip20160411_11.png
案例
新建viewcontroller 加入
_label = [[UILabel alloc]init];
_label.text = @"I'm keyframe animat!";
_label.backgroundColor = [UIColor darkGrayColor];
[_label sizeToFit];
_label.center=self.view.center;
[self.view addSubview:_label];
CGFloat y = _label.center.y;
NSArray *pos = @[@(y-20),@(y+20),@(y)];
CGFloat delta = 1.0 / pos.count;
[UIView animateKeyframesWithDuration:5
delay:0
options:UIViewKeyframeAnimationOptionCalculationModeLinear |UIViewAnimationOptionRepeat
animations:^{
for(int i = 0;i<pos.count; i++ ){
[UIView addKeyframeWithRelativeStartTime:delta * i
relativeDuration:delta
animations:^{
_label.center = CGPointMake(_label.center.x, [[pos objectAtIndex:i]floatValue]);
}];
}
}
completion:nil];
run起来
弹簧效果
主要控制好 阻尼值
案例
_labelNormal =[[UILabel alloc]init];
_labelNormal.text = @"I'm normal animation!";
_labelNormal.backgroundColor = [UIColor lightGrayColor];
[_labelNormal sizeToFit];
_labelNormal.center = CGPointMake(self.view.bounds.size.width, self.view.center.y);
[self.view addSubview: _labelNormal];
_labelSpring =[[UILabel alloc]init];
_labelSpring.text = @"I'm Spring animation!";
_labelSpring.backgroundColor = [UIColor lightGrayColor];
[_labelSpring sizeToFit];
_labelSpring.center = CGPointMake(self.view.bounds.size.width, self.view.center.y+self.labelSpring.bounds.size.height+3);
[self.view addSubview: _labelSpring];
[UIView animateWithDuration:3.0
delay:0
options:UIViewAnimationOptionRepeat
animations:^{
_labelNormal.center = CGPointMake(_labelNormal.bounds.size.width/2, self.view.center.y);
}
completion:nil];
[UIView animateWithDuration:3.0
delay:0
usingSpringWithDamping:0.25//第二动画是0.8
initialSpringVelocity:15//第二动画是8
options:UIViewAnimationOptionRepeat
animations:^{
_labelSpring.center = CGPointMake(_labelSpring.bounds.size.width/2, self.labelSpring.center.y);
} completion:nil];
run起来 看起来gif效果不太好,但是真实运行后效果好多了
usingSpringWithDamping:0.25
initialSpringVelocity:15
usingSpringWithDamping:0.8
initialSpringVelocity:8
Autolayout 环境下的动画
_label = [[UILabel alloc]init];
_label.text = @"I'm constraintd!'";
_label.backgroundColor = [UIColor lightGrayColor];
[_label sizeToFit];
[self.view addSubview:_label];
_label.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *right = [NSLayoutConstraint constraintWithItem:_label
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:0.0];
NSLayoutConstraint *center = [NSLayoutConstraint constraintWithItem:_label
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0];
[self.view addConstraints:@[right, center]];
[self.view layoutIfNeeded];
[UIView animateWithDuration:3.0
animations:^{
right.constant -= self.view.bounds.size.width - _label.bounds.size.width;
[self.view layoutIfNeeded];
}];
