iOS动画-UIView Animation
众所周知动画效果在移动开发中是非常重要的，因为用户在使用app讲究两个重要的元素1，UI 2，UE。 而动画效果大大提示用户体验感，下面将我自己理解的效果。
iOS 动画函数
如图iOS能够调用的动画函数有5个
动画列表
下面我讲一一讲解
- [UIView animateWithDuration: animations:]
- [UIView animateWithDuration: animations: completion:]
- [UIView animateWithDuration: delay: options: animation completion:]ß
- [UIView animateWithDuration: delay: usingSpringWithDamping: initialSpringVelocity: options:animations:completion:]
[UIView animateWithDuration: animations:]
- duration 动画时间(下同)
- animations (执行动画block 下同)
效果展示
代码展示
CGFloat changeY = self.view.frame.size.height * 0.7;
[self.view layoutIfNeeded];
[UIView animateWithDuration:1.0 animations:^{
CGRect frame;
//1.微博
frame = _wbBtn.frame;
frame.origin.y = changeY;
_wbBtn.frame = frame;
//2.微信
frame = _wxBtn.frame;
frame.origin.y = changeY;
_wxBtn.frame = frame;
//3.QQ
frame = _qqBtn.frame;
frame.origin.y = changeY;
_qqBtn.frame = frame;
[self.view layoutIfNeeded];
}];
[UIView animateWithDuration: animations: completion:]
- completion (动画完成时候调用的block)
效果展示
动画2
代码展示
CGFloat changeY = self.view.frame.size.height * 0.7;
[self.view layoutIfNeeded];
[UIView animateWithDuration:1.0 animations:^{
CGRect frame;
//1.微博
frame = _wbBtn.frame;
frame.origin.y = changeY;
_wbBtn.frame = frame;
//2.微信
frame = _wxBtn.frame;
frame.origin.y = changeY;
_wxBtn.frame = frame;
//3.QQ
frame = _qqBtn.frame;
frame.origin.y = changeY;
_qqBtn.frame = frame;
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
//改变颜色
[UIView animateWithDuration:1.0 animations:^{
self.view.backgroundColor = [UIColor grayColor];
}];
}];
[UIView animateWithDuration: delay: options: animation completion:]
- delay (延时执行)
- options (动画参数)
这里重点下 options 这个变量， 通过设置这个变量我们可以实现非常多种效果,也是精辟所在,我将抽取各别演示这个参数不同的效果。
- UIViewAnimationOptionLayoutSubviews
- UIViewAnimationOptionAllowUserInteraction
- UIViewAnimationOptionBeginFromCurrentState
- UIViewAnimationOptionRepeat //动画效果重复
- UIViewAnimationOptionAutoreverse //翻转
- UIViewAnimationOptionOverrideInheritedDuration
- UIViewAnimationOptionOverrideInheritedCurve
- UIViewAnimationOptionAllowAnimatedContent
- UIViewAnimationOptionShowHideTransitionViews
- UIViewAnimationOptionOverrideInheritedOptions
- UIViewAnimationOptionCurveEaseInOut //先加速后减速
- UIViewAnimationOptionCurveEaseIn //由慢到快
- UIViewAnimationOptionCurveEaseOut //由快到慢
- UIViewAnimationOptionCurveLinear //匀速
- UIViewAnimationOptionTransitionNone
- UIViewAnimationOptionTransitionFlipFromLeft //从左翻转
- UIViewAnimationOptionTransitionFlipFromRight //从右边翻转
- UIViewAnimationOptionTransitionCurlUp //从上往下翻转
- UIViewAnimationOptionTransitionCurlDown //从下往上翻转
- UIViewAnimationOptionTransitionCrossDissolve //从旧视图过度到下一面ITU
- UIViewAnimationOptionTransitionFlipFromTop //从上翻转
- UIViewAnimationOptionTransitionFlipFromBottom //从下翻转
效果展示
效果一
效果二
效果三
代码展示
CGFloat changeY = self.view.frame.size.height * 0.7;
[self.view layoutIfNeeded];
[UIView animateWithDuration:2.0 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
CGRect frame;
//1.微博
frame = _wbBtn.frame;
frame.origin.y = changeY;
_wbBtn.frame = frame;
//2.微信
frame = _wxBtn.frame;
frame.origin.y = changeY;
_wxBtn.frame = frame;
//3.QQ
frame = _qqBtn.frame;
frame.origin.y = changeY;
_qqBtn.frame = frame;
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
}];
[UIView animateWithDuration: delay: usingSpringWithDamping: initialSpringVelocity: options:animations:completion:]
- dampingRatio：速度衰减比例。取值范围0 ~ 1，值越低震动越强
- velocity：初始化速度，值越高则物品的速度越快
效果展示
弹簧效果
代码展示
CGFloat changeY = self.view.frame.size.height * 0.7;
[self.view layoutIfNeeded];
[UIView animateWithDuration:1.0 delay:1.0 usingSpringWithDamping:0.4 initialSpringVelocity:5 options:UIViewAnimationOptionCurveLinear animations:^{
//1.微博
CGRect frame;
frame = _wbBtn.frame;
frame.origin.y = changeY;
_wbBtn.frame = frame;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.0 delay:1.0 usingSpringWithDamping:0.5 initialSpringVelocity:5 options:UIViewAnimationOptionCurveLinear animations:^{
//2.微信
CGRect frame;
frame = _wxBtn.frame;
frame.origin.y = changeY;
_wxBtn.frame = frame;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.0 delay:1.0 usingSpringWithDamping:0.6 initialSpringVelocity:5 options:UIViewAnimationOptionCurveLinear animations:^{
//3.QQ
CGRect frame;
frame = _qqBtn.frame;
frame.origin.y = changeY;
_qqBtn.frame = frame;
} completion:^(BOOL finished) {
}];
}];
}];
