谈UIView Animation编程艺术

原文链接:http://www.jianshu.com/p/51ce7966a038

一.大小动画(改变frame)


1.展示效果


2.Show Code


-(void)changeFrame{

CGRect originalRect = self.anView.frame;

CGRect rect = CGRectMake(self.anView.frame.origin.x-20, self.anView.frame.origin.y-120, 160, 80);

[UIView animateWithDuration:1 animations:^{

self.anView.frame = rect;

} completion:^(BOOL finished) {

[UIView animateWithDuration:1 animations:^{

self.anView.frame = originalRect;

}];

}];

}


二.拉伸动画(改变bounds)


1.展示效果


bounds变化


2.Show Code


-(void)changeBounds{

CGRect originalBounds = self.anView.bounds;

//尽管这个rect的x,y跟原始的不同,动画也只是改变了宽高

CGRect rect = CGRectMake(0, 0, 300, 120);

[UIView animateWithDuration:1 animations:^{

self.anView.bounds = rect;

} completion:^(BOOL finished) {

[UIView animateWithDuration:1 animations:^{

self.anView.bounds = originalBounds;

}];

}];

}


三.转移动画(改变center)


1.展示效果


center变化.gif


2.Show Code


-(void)changeCenter{

CGPoint originalPoint = self.anView.center;

CGPoint point = CGPointMake(self.anView.center.x, self.anView.center.y-170);

[UIView animateWithDuration:0.3 animations:^{

self.anView.center = point;

} completion:^(BOOL finished) {

[UIView animateWithDuration:1 animations:^{

self.anView.center = originalPoint;

}];

}];

}


谢谢二爷的示范,经典的表情也勾起很多人的回忆。好,我们回到现实,以上的3个例子,大家不难发现共同的特点和重复性。


1.都是改变UIView的属性就可以产生动画。

2.都是带有block做结束回调,对结束监控

3.动画大小和位置变化可以通过多种方式实现


“佛爷,是不是很好奇我们并没有使用Tom先生很多图片组逐一显示?来,也请您下矿一走!”。“哈哈,好!不过那碗河水我还是要倒的”,“行,随你翻腾~”。


四.旋转动画(改变transform)


1.展示效果

transform变化.gif


2.Show Code


-(void)transform{

CGAffineTransform originalTransform = self.anView.transform;

[UIView animateWithDuration:2 animations:^{

//self.anView.transform = CGAffineTransformMakeScale(0.6, 0.6);//缩放

//self.anView.transform = CGAffineTransformMakeTranslation(60, -60);

self.anView.transform = CGAffineTransformMakeRotation(4.0f);

} completion:^(BOOL finished) {

[UIView animateWithDuration:2 animations:^{

self.anView.transform = originalTransform;

}];

}];

}


五.透明度动画(改变alpha)


1.展示效果


alpha变化.gif


2.Show Code


-(void)alpha{

[UIView animateWithDuration:2 animations:^{

self.anView.alpha = 0.3;

} completion:^(BOOL finished) {

[UIView animateWithDuration:2 animations:^{

self.anView.alpha = 1;

}];

}];

}


卓先生,停停停,来,回到我们舞台中间来。就以上5中都能让您玩的这么愉快,以上都是仅仅修改本身的属性值,我再介绍剩下三种基于UIView特别的动画,一个是Keyframe,一个Spring和Transition动画。一人一个轮着来,卓先生你先。


六.背景颜色Keyframes动画(改变background)


1.展示效果

background变化.gif


2.Show Code


-(void)changeBackground{

[UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{

[UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{

self.anView.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];

}];

[UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{

self.anView.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];

}];

[UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{

self.anView.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];

}];

[UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{

self.anView.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];

}];

[UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{

self.anView.backgroundColor = [UIColor whiteColor];

}];

} completion:^(BOOL finished) {

NSLog(@"动画结束");

}];

}


七.Spring动画(iOS7.0起)


1.展示效果


spring动画.gif


2.Show Code


-(void)springAnimation{

CGRect originalRect = self.anView.frame;

CGRect rect = CGRectMake(self.anView.frame.origin.x-80, self.anView.frame.origin.y, 120, 120);

[UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{

self.anView.frame = rect;

} completion:^(BOOL finished) {

[UIView animateWithDuration:1 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{

self.anView.frame = originalRect;

} completion:^(BOOL finished) {

}];

}];

}


八.transition动画


1.展示效果

transition动画.gif


2.Show Code


-(void)transitionAnimation{

[UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{

//self.anView.backgroundColor = [UIColor blueColor];

} completion:^(BOOL finished) {

[UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{

//self.anView.backgroundColor = [UIColor greenColor];

} completion:^(BOOL finished) {

}];

}];

}


九.关于参数option选择说明


1.UIViewAnimationOptions


UIViewAnimationOptionLayoutSubviews            //进行动画时布局子控件

UIViewAnimationOptionAllowUserInteraction      //进行动画时允许用户交互

UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画

UIViewAnimationOptionRepeat                    //无限重复执行动画

UIViewAnimationOptionAutoreverse               //执行动画回路

UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置

UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套动画的曲线设置

UIViewAnimationOptionAllowAnimatedContent      //转场:进行动画时重绘视图

UIViewAnimationOptionShowHideTransitionViews   //转场:移除(添加和移除图层的)动画效果

UIViewAnimationOptionOverrideInheritedOptions  //不继承父动画设置

UIViewAnimationOptionCurveEaseInOut            //时间曲线,慢进慢出(默认值)

UIViewAnimationOptionCurveEaseIn               //时间曲线,慢进

UIViewAnimationOptionCurveEaseOut              //时间曲线,慢出

UIViewAnimationOptionCurveLinear               //时间曲线,匀速

UIViewAnimationOptionTransitionNone            //转场,不使用动画

UIViewAnimationOptionTransitionFlipFromLeft    //转场,从左向右旋转翻页

UIViewAnimationOptionTransitionFlipFromRight   //转场,从右向左旋转翻页

UIViewAnimationOptionTransitionCurlUp          //转场,下往上卷曲翻页

UIViewAnimationOptionTransitionCurlDown        //转场,从上往下卷曲翻页

UIViewAnimationOptionTransitionCrossDissolve   //转场,交叉消失和出现

UIViewAnimationOptionTransitionFlipFromTop     //转场,从上向下旋转翻页

UIViewAnimationOptionTransitionFlipFromBottom  //转场,从下向上旋转翻页


2.UIViewKeyframeAnimationOptions


UIViewAnimationOptionLayoutSubviews           //进行动画时布局子控件

UIViewAnimationOptionAllowUserInteraction     //进行动画时允许用户交互

UIViewAnimationOptionBeginFromCurrentState    //从当前状态开始动画

UIViewAnimationOptionRepeat                   //无限重复执行动画

UIViewAnimationOptionAutoreverse              //执行动画回路

UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置

UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置

UIViewKeyframeAnimationOptionCalculationModeLinear     //运算模式 :连续

UIViewKeyframeAnimationOptionCalculationModeDiscrete   //运算模式 :离散

UIViewKeyframeAnimationOptionCalculationModePaced      //运算模式 :均匀执行

UIViewKeyframeAnimationOptionCalculationModeCubic      //运算模式 :平滑

UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀


就UIView的动画而言,UIViewKeyframeAnimationOptions紧在Keyframes,其余的都是UIViewAnimationOptions。


十.总结和扩展


1.UIView动画主要是变化UIView的自带属性

2.UIView动画可以有很多种方式实现同一效果

3.Spring动画iOS7.0以上才有

4.UIViewKeyframeAnimationOptions用着Keyframes动画,其余都用UIViewAnimationOptions枚举

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值