博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
开发常用动画收集
阅读量：5917 次
发布时间：2019-06-19

本文共 8293 字，大约阅读时间需要 27 分钟。

 

一、UIView 动画

       使用iPhone作为开发平台，你可以体验到UIView带来的既另类又有趣的动画功能。UIView动画能够完美地建立起一座连接视图当前状态和未来状态地视觉桥梁。可以产生动画效果的变化包括:

      1、位置变化:在屏幕上移动视图；

      2、大小变化:改变视图框架和边界；

      3、拉伸变化:改变视图内容的延伸区域；

      4、改变透明程度:改变视图的alpha值；

      5、改变状态:隐藏或显示状态；

      6、改变视图顺序:哪个视图显示在前，哪个在后；

      7、旋转:换句话说，就是任何应用到视图上的仿射变换。

       UIView动画是成块运行的，也就是说作为完整的事务一次性运行。发出beginAnimations: context:请求开启一个动画块。commitAnimations结束一个动画块。注意: 把这两个类方法发送给UIView而不是发送给单独的视图。同时在这两个调用之间的块中，添加动画的展现方式并更新视图。你可以使用以下步骤创建UIView动画。

      (1)调用beginAnimations : context方法开启一个动画块；

      (2)调用setAnimationCurve方法定义动画加速和减速方式；

      (3)调用setAnimationDuration方法设定动画时长；

      (4)自定义动画效果；

      (5)调用commitAnimations方法结束你的动画块。

你可以设置动画委托，通知它在你的动画开始或结束的时候调用相应的回调方法。例如:

 

[cpp] 
 
  1. [UIView setAnimationDelegate:self];  
  2. [UIView setAnimationDidStopSelector:@selector(doSomething)];  
下面是一些常用的UIView过渡动画：

 

a、下翻页过渡

 

[cpp] 
 
  1. CGContextRef context = UIGraphicsGetCurrentContext();  
  2. [UIView beginAnimations:nil context:context];  
  3. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  4. [UIView setAnimationDuration:0.7];  
  5. [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];  
  6. // do something here  
  7.   
  8. [UIView commitAnimations];  
b、上翻页过渡

 

 

[cpp] 
 
  1. CGContextRef context = UIGraphicsGetCurrentContext();  
  2. [UIView beginAnimations:nil context:context];  
  3. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  4. [UIView setAnimationDuration:0.7];  
  5. [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];  
  6. // do something here  
  7.   
  8. [UIView commitAnimations];  
c、页面左转过渡

 

 

[cpp] 
 
  1. CGContextRef context = UIGraphicsGetCurrentContext();  
  2.     [UIView beginAnimations:nil context:context];  
  3.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  4.     [UIView setAnimationDuration:0.7];  
  5.     [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES];  
  6.     // do something here  
  7.       
  8.     [UIView commitAnimations];  
d、页面右转过渡

 

 

[cpp] 
 
  1. CGContextRef context = UIGraphicsGetCurrentContext();  
  2. [UIView beginAnimations:nil context:context];  
  3. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  4. [UIView setAnimationDuration:0.7];  
  5. [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];  
  6. // do something here  
  7.   
  8. [UIView commitAnimations];  

 

 

二、Core Animation动画

       除了UIView动画以外，Core Animation API可为iPhone应用程序提供高度灵活的动画解决方案。Core Animation Transitions仅在实现中做了几个小小的变动便丰富了UIView动画的内涵。注意:CATransition只针对图层，不针对视图。图层是Core Animation与每个UIView产生联系的工作层面。使用Core Animation时，应该将CATransition应用到视图的默认图层([myView  layer])而不是视图本身。建立的CA动画步骤如下:

      (1)建立CA对象；

      (2)设置它的参数；

      (3)把这个带着参数的过渡添加到图层。

CA动画使用了类型和子类型两个概念。类型指定了过渡的种类，子类型设置了过渡的方向。对类型和子类型应用动画时，它们一起描述了视图应该怎么样完成过渡。

Core Animation是QuartzCore框架的一个组成部分，因此你必须将Quartz Core框架添加到项目中，并在使用这些功能时将<QuartzCore/QuartzCore.h>包含进你的代码中。

下面是一些常用的CA过渡动画:      

a、淡化(fade)

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = kCATransitionFade;  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
b、推挤(push)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = kCATransitionPush;  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
c、揭开(reveal)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = kCATransitionReveal;  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
d、覆盖(moveIn)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = kCATransitionMoveIn;  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
e、立方体翻转(cube)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"cube";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
f、吸收(suckEffect)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"suckEffect";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
g、翻转(oglFlip)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"oglFlip";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
h、水波纹(rippleEffect)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"rippleEffect";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
i、翻页(pageCurl)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"pageCurl";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
j、反翻页(pageUnCurl)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"pageUnCurl";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
k、镜头开(cameraIrisHollowOpen)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"cameraIrisHollowOpen";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];  
l、镜头关(cameraIrisHollowClose)

 

 

[cpp] 
 
  1. CATransition *animation = [CATransition animation];  
  2. animation.delegate = self;  
  3. animation.duration = 0.7;  
  4. animation.timingFunction = UIViewAnimationCurveEaseInOut;  
  5. animation.type = @"cameraIrisHollowClose";  
  6. animation.subtype = kCATransitionFromLeft;  
  7. /* 
  8.  kCATransitionFromLeft:    从左至右 
  9.  kCATransitionFromBottom:  下下至上 
  10.  kCATransitionFromRight:   从右至左 
  11.  kCATransitionFromTop:     从上至下 
  12.  */  
  13. // do something here  
  14.       
  15. [[self.view layer] addAnimation:animation forKey:@"animation"];     

 

参考：

 

 

转载地址：http://kkfvx.baihongyu.com/

你可能感兴趣的文章
关于我
查看>>
(转载)SQL语句导入导出大全
查看>>
nodejs开启服务器
查看>>
gen_create_syn.sql
查看>>
多媒体开发之 H.264中NALU、RBSP、SODB的关系 (弄清码流结构)
查看>>
mediomax
查看>>
Gulp
查看>>
《大话设计模式》学习心得系列（二）
查看>>
Radar DIY
查看>>
组件化网页开发 / 步骤一 · 4-8 编程练习
查看>>
leetcode32. Longest Valid Parentheses
查看>>
JavaScript——new Date().getMonth()
查看>>
mongodb- Java API 增删改操作
查看>>
manachaer算法
查看>>
【Qt文档阅读】事件系统
查看>>
Mac 下使用Ionic x86 emulation currently requires hardware acceleration 问题
查看>>
前端开发中Cookie那些事儿
查看>>
产品评价
查看>>
SQL server的两种验证模式:NT验证模式和混合安全模式(转载)
查看>>
Java小细节
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-12-27 20:42:45   当前IP: 3.147.86.30   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我