工欲善其事，必先利其器。上篇简略介绍了UIViewAnimate的基本方法和特效枚举：
iOS动画（一）----UIView动画之api认识
本章介绍一些动画的简单实现。
一、从几个维度介绍UIView基本动画
- (UIImageView *)animateIV {
if (!_animateIV) {
_animateIV = [[UIImageView alloc] initWithFrame:CGRectMake(50, NavBarHeight+50, 100, 100)];
_animateIV.image = [UIImage imageNamed:@"image_0"];
}
return _animateIV;
}
<一>、基于坐标尺寸变化的动画，主要有三个点：
1、 bounds：修改这个属性会结合center属性重新计算frame，建议通过这个属性修改尺寸。
2、frame：修改这个属性通常会导致视图形变的同时也发生移动，然后会重新设置center跟bounds属性。
3、center: 设置后视图会移动到一个新位置，修改后会结合bounds重新计算frame。
坐标尺寸.gif
/** 只改尺寸变化 */
- (void)boundsAnimation {
/*
*参数:动画时长
*回调一:动画结束后,视图到达状态
*回调二:动画执行完毕
*/
[UIView animateWithDuration:0.3f animations:^{
self.animateIV.bounds = CGRectMake(0, 0, 50, 50);
} completion:^(BOOL finished) {
self.animateIV.bounds = CGRectMake(0, 0, 100, 100);
}];
}
/** 位置尺寸均变化 */
- (void)frameAnimation {
[UIView animateWithDuration:0.3f animations:^{
self.animateIV.frame = CGRectMake(200, NavBarHeight, 50, 50);
} completion:^(BOOL finished) {
self.animateIV.frame = CGRectMake(50, NavBarHeight+50, 100, 100);
}];
}
/** 中心点变化 */
- (void)centerAnimation {
[UIView animateWithDuration:0.3f animations:^{
self.animateIV.center = CGPointMake(150, NavBarHeight+50+ 100);
}];
}
<二>、基于视图显示的动画，主要有两个点：
1、backgroundColor: 修改这个属性会产生颜色渐变过渡的效果，本质上是系统不断修改了tintColor来实现的。
2、alpha：修改这个属性会产生淡入淡出的效果。
视图显示.gif
/** 背景色变化 */
- (void)backgroundAnimation {
[UIView animateWithDuration:1.0f animations:^{
self.animateIV.backgroundColor = [UIColor purpleColor];
} completion:^(BOOL finished) {
self.animateIV.backgroundColor = [UIColor redColor];
}];
}
/** 透明度变化 */
- (void)alphaAnimation {
[UIView animateWithDuration:0.3f animations:^{
self.animateIV.alpha = 0.3f;
} completion:^(BOOL finished) {
self.animateIV.alpha = 1.0f;
}];
}
<三>、形态变换动画，即线性代数上的矩阵变化(后期核心动画再作说明)，一个点:
transform：修改这个属性可以实现旋转、形变、移动、翻转等动画效果，其通过矩阵运算的方式来实现，因此更加强大
形态变换.gif
/** 向上平移 */
- (void)transformMoveUpAnimate {
[UIView animateWithDuration:0.5 animations:^{
// 使用Make,它是相对于最原始的位置做的形变,开发中，不用这个，只能移动一次，
// 看见有Make,就只能移动一次，
// self.animateIV.transform = CGAffineTransformMakeTranslation(0, -20);
// 相对于上一次做形变，开发中经常使用下面的
self.animateIV.transform = CGAffineTransformTranslate(self.animateIV.transform, 0, -20);
}];
}
/** 向下平移 */
- (void)transformMoveDownAnimate {
[UIView animateWithDuration:0.5 animations:^{
//使用Make,它是相对于最原始的位置做的形变.
//self.animateIV.transform = CGAffineTransformMakeTranslation(0, 20);
//相对于上一次做形变.
self.animateIV.transform = CGAffineTransformTranslate(self.animateIV.transform, 0, 20);
}];
}
/** 旋转 */
- (void)transformSlideAnimate {
[UIView animateWithDuration:0.5 animations:^{
//旋转的度数, 是一个弧度
//使用Make,它是相对于最原始的位置做的形变.
//self.animateIV.transform = CGAffineTransformMakeRotation(M_PI_4);
self.animateIV.transform = CGAffineTransformRotate(self.animateIV.transform, M_PI_4);
}];
}
/** 缩放 */
- (void)transformScaleAnimate {
[UIView animateWithDuration:0.5 animations:^{
//使用Make,它是相对于最原始的位置做的形变.
//self.animateIV.transform = CGAffineTransformMakeScale(0.8, 0.8);
self.animateIV.transform = CGAffineTransformScale(self.animateIV.transform, 0.8, 0.8);
}];
}
二、UIView的关键帧动画
即给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。
关键帧.gif
- (void)clickAciton:(UIButton *)sender {
UIView *startView = [[UIView alloc] initWithFrame:CGRectMake(0, NavBarHeight, 60, 60)];
//startView.center = CGPointMake(30, NavBarHeight+30);
startView.backgroundColor = randomColor;
startView.layer.cornerRadius = 30;
startView.layer.borderWidth = 5;
startView.layer.borderColor = randomColor.CGColor;
[self.view addSubview:startView];
/**创建一个关键帧动画
*参数1:动画时长8秒
*参数2:动画延时0面
*动画效果:线性 + 重复
*/
[UIView animateKeyframesWithDuration:8 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewAnimationOptionRepeat animations:^{
//设计竖直方向6个位置
CGFloat averageHeight = (Main_Screen_Height-NavBarHeight-TabBarSafeHeight-30-30)/5.0;
for (NSInteger i=0; i<6; i++) {
/*插入关键帧动画信息
*参数1:表示关键帧动画开始的时刻在整个动画中的百分比
*参数2:表示这个关键帧动画占用整个动画时长的百分比
*/
[UIView addKeyframeWithRelativeStartTime:i/6.0 relativeDuration:1/6.0 animations:^{
startView.center = CGPointMake(i%2==0 ? 30 : Main_Screen_Width-30 , averageHeight*i + NavBarHeight+30);
}];
}
} completion:^(BOOL finished) {
}];
}
三、UIViewAnimationOptions其中的几种动画效果
转场及阻尼.gif
/*** 转场动画 **/
#pragma mark - Methods
- (void)makeTransitionType:(UIViewAnimationOptions)animationTransitionType {
if ([[self.baseView subviews] containsObject:self.bottomView]) {
[UIView transitionFromView:self.bottomView toView:self.topView duration:1.0f options:animationTransitionType completion:^(BOOL finished){
[self.bottomView removeFromSuperview];
}];
[self.baseView addSubview:self.topView];
} else {
[UIView transitionFromView:self.topView toView:self.bottomView duration:1.0f options:animationTransitionType completion:^(BOOL finished){
[self.topView removeFromSuperview];
}];
[self.baseView addSubview:self.bottomView];
}
}
#pragma mark - LazyLoad 懒加载
- (UIView *)baseView {
if (!_baseView) {
_baseView = [[UIView alloc] initWithFrame:CGRectMake(20, NavBarHeight+20, 100, 150)];
_baseView.backgroundColor = [UIColor whiteColor];
}
return _baseView;
}
- (UIView *)topView {
if (!_topView) {
_topView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 150)];
_topView.backgroundColor = [UIColor purpleColor];
}
return _topView;
}
- (UIView *)bottomView {
if (!_bottomView) {
_bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 150)];
_bottomView.backgroundColor = [UIColor yellowColor];
}
return _bottomView;
}
/*** 阻尼动画 **/
- (void)dampingAnimation {
//随即一个高度, 50~300
CGFloat h = arc4random() % 251 + 50;
//带有弹跳效果的动画
//Damping:阻尼,取值0~1
//Velocity:速度 像素/秒
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.7 initialSpringVelocity:30 options:UIViewAnimationOptionCurveLinear animations:^{
CGRect frame = self.animateIV.frame;
frame.size.height = h;
self.animateIV.frame = frame;
} completion:nil];
}
网友评论