IO开发之图形动画

在IOS开发中图形界面的动画一般发生在以下两种情况:

  1.两个uiview视图的切换,有动画效果。

  2.本身视图的位置,大小,或 角度旋转 的动画效果。

一.利用uiview实现切换视图的动画,但是在切换视图的效果中只有四种样式,

  UIViewAnimationTransitionFlipFromLeft,   向左翻转

  UIViewAnimationTransitionFlipFromRight, 向右翻转

UIViewAnimationTransitionCurlUp,           向上翻页

UIViewAnimationTransitionCurlDown,       向下翻页

  实现代码demo1:

//开始动画
[UIView beginAnimations:nil context:NULL];

//设置动画执行时间
[UIView setAnimationDuration:1.0];

//设置动画的效果和指定的View。这里设置的View必须是变化子视图的父视图。(在父视图的变化过程中改变子视图的内容)
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.viewContainer cache:YES];

//这里写在视图容器里视图变化的过程,整个过程在容器视图的图层变化过程中发生改变
 [self.viewContainer bringSubviewToFront:_second.view];

//提交动画才会有显示动画效果
 [UIView commitAnimations];

  实现代码demo2:

//仅仅用uiview的类方法切换视图
[UIView transitionFromView:view1 toView:view2 duration:1.0 options:UIViewAnimationOptionTransitionCurlUp completion:^(BOOL finished) {
                NSLog(@"animation completion");
                rectoVisible = !rectoVisible;
            }];

 options的值: 

 UIViewAnimationOptionTransitionFlipFromLeft, 左翻页

UIViewAnimationOptionTransitionFlipFromRight, 右翻页

UIViewAnimationOptionTransitionCurlUp,上卷曲翻页

UIViewAnimationOptionTransitionCurlDown,下卷曲翻页

UIViewAnimationOptionTransitionCrossDissolve , 渐变

UIViewAnimationOptionTransitionFlipFromTop,上翻页

UIViewAnimationOptionTransitionFlipFromBottom ,下翻页

二.利用CAAnimation类完成视图切换的动画,此类可实现的动画效果很多

CAAnimation的type属性系统指定的效果:

  kCATransitionFade, 淡化效果,此效果为默认效果

  kCATransitionMoveIn , 覆盖效果

  kCATransitionPush, 挤出效果

  kCATransitionReveal ,移出效果

字符串效果:

  @"cube" 立方体转换

  @"suckEffect" 吸收效果

  @"oglFlip"翻页效果

  @"rippleEffect"水滴效果  

  @"pageCurl" 向上卷曲翻页

  @"pageUnCurl" 向下卷曲翻页

  @"cameraIrisHollowOpen" 镜头展开效果

  @"cameraIrisHollowClose" 镜头关闭效果

CAAnimation的SubType属性:

  kCATransitionFromLeft,

  kCATransitionFromBottom,

  kCATransitionFromRight,

  kCATransitionFromTop

具体实现demo:(viewContainer为自定义的视图容器)

//创建对象
CATransition *animation=[CATransition animation];

//设置动画执行时间
animation.duration = 1.0;

//动画类型
animation.type=kCATransitionReveal;

//动画方向
animation.subtype=kCATransitionFromTop;

//设置动画执行速率变化
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

//切换子视图
 [self.viewContainer bringSubviewToFront:_second.view];

//在容器视图的图层上添加animation
[self.viewContainer.layer addAnimation:animation forKey:@"animation"];

三.视图缩小,移动,旋转动画

具体实现demo:

//设置缩小的transform,缩小为原大小的宽0.5倍,高0.8倍
CGAffineTransform scale =CGAffineTransformMakeScale(0.5, 0.8); 

//设置旋转的transform并带入缩小的scale,旋转大小为60度,并转换为弧度制
CGAffineTransform rotate =CGAffineTransformRotate(scale, M_PI * 60/180);

//将transform的变化放到动画中
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];

//设置位移,在x方向移动0,y方向移动150,并结合前两个transform
 view.transform=CGAffineTransformTranslate(rotate,0,150);

[UIView commitAnimations];
时间: 2024-08-09 07:58:02

IO开发之图形动画的相关文章

IOS开发系列 --- 核心动画

原始地址:http://www.cnblogs.com/kenshincui/p/3972100.html 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简

iOS动画开发之一——UIViewAnimation动画的使用

iOS动画开发之一--UIViewAnimation动画的使用 一.简介 一款APP的成功与否,除了完善的功能外,用户体验也占有极大的比重,动画的合理运用,可以很好的增强用户体验.iOS开发中,常用的动画处理有UIView动画编程和核心动画编程,其中UIView动画使用简便,开发中应用十分广泛.这篇博客,主要讨论UIView的动画使用. 二.UIView动画的几个方法 + (void)animateWithDuration:(NSTimeInterval)duration animations:

Unity3D游戏开发之设置动画(Animations)属性

Unity3D游戏开发之设置动画(Animations)属性 通过创建角色动画Avatar,在新的动画系统Mecanim中,Unity就设置了角色动画的骨架和蒙皮信息,从而就可以在Unity中实现角色动画了. 切换到动画(Animations)选项卡.选中导入动画(Import Animation)的选项.如果该文件中有动画数据,可以看到动画剪辑的列表(Clips). Tips: Rig选项卡中动画类型(Animation Type)如果选则的是旧版(Legacy),Animations中的属性

HTML5 Canvas核心技术图形动画与游戏开发(读书笔记)----第一章,基础知识

一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas" width="600" height="300">您的浏览器不支持canvas,可以选择升级您的浏览器</canvas> 2 开发基于canvas的应用程序的最基本的几个操作 1),使用document.getElementById()方

iOS开发笔记--iOS动画总结

摘要 本文主要介绍核iOS中的动画:核心动画Core Animation, UIView动画, Block动画, UIImageView的帧动画. 核心动画Core Animation UIView动画 Block动画 UIImageView的帧动画 iOS中的动画 Core Animation CAAnimation: CAPropertyAnimation CAKeyframeAnimation CATransition UIView动画 Block动画 UIImageView的帧动画 UI

Android游戏开发研究帧动画实现

 1.动画的原则框架        帧的动画帧的动画顾名思义,画就是帧动画. 帧动画和我们小时候看的动画片的原理是一样的,在同样区域高速切换图片给人们呈现一种视觉的假象感觉像是在播放动画,事实上只是是N张图片在一帧一帧的切换罢了.对摄像头不清楚的请看p=992" rel="bookmark">Android研究之游戏开发摄像头更新        如图所看到的:人物行走动画的实现方式, 4帧行走动画在播放区域 一帧一帧向左切换播放 给人们一种播放动画的假象 .图片就动

iOS开发之核心动画(Core Animation)

1.概述 Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍,使用它需要先添加QuartzCore.framework和引入对应的框架<QuartzCore/QuartzCore.h>. 特别注意的是核心动画的动画效果只是“假象”,产生动画的那个view实际上并未发生任何变化. 开发步骤: 第一步:初始化一个动画对象(CAAnimation)并设置一些动画相关属性. 第二步:添加动画对象到层(CALayer)中,开始执行动画. CAL

使用backbone.js、zepto.js和trigger.io开发HTML5 App

为了力求运行速度快.响应迅即,我们推荐使用backbone.js和zepto.js. 为了让这个过程更有意思,我们开发了一个小小的示例项目,使用CSS重置样式.Backbone.js和带转场效果的几个页面.我们的项目会显示Trigger推特更新内容和单个的推特消息.与往常一样,我们将使用同一个HTML5代码库创建安卓和iOS应用程序.在这个过程中,我们将介绍如何: 把你的JavaScript文件添加到应用程序中 使用Backbone.js来显示响应迅即的界面 使用CSS重置样式,减少跨平台出现的

iOS开发 QQ粘性动画效果

QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.html 主题 iOS开发 qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈会自动弹性的回到原来的位置.而如果超出一定距离,这个圆圈会做一个销毁的动画,