Edge Animate为ios设备开发HTML5动画
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
Edge Animate为ios设备开发HTML5动画
在设备的网页体验中，HTML5可以替代Flash的缺失（某种程度上）。然后，制作过程中各种苦逼之处，无法一一描述。主要痛点在于缺乏如Flash Pro这样的殿堂级制作工具。Adobe推出的有望成为设计师新的神器。
在之前的文章中，我们介绍了如何的一些基本用法。在本教程中，我们将学习如何如何使用Label，Trigger以及JavaScript脚本来控制动画，并响应用户在上的手势操作，比如滑动。
你可以使用ipad等移动设备访问
项目文件下载：
下载Adobe Edge Animate制作工具
在本教程发布的时间，Edge Animate版本为1.5，可以在上免费下载。 您只需要在注册即可登录下载。
制作上述动画，要完成三个任务：
制作Logo元件：首先需要在舞台中导入Edge Animate图标，转换成元件后，制作正向和反向旋转效果。
通过JavaScript脚本，监听鼠标或者触摸手势事件，计算鼠标或者手势滑动的方向
通过JavaScript脚本，控制Logo元件移动方向
本文不会逐一介绍每一个步骤的详细操作过程，而只就关键点进行解释。如果你不甚了解如何使用Edge Animate，可以参考本站其他教程。
制作旋转LOGO元件
在舞台中导入Edge Animate元件（可在上述下载的项目文件，解压后的image目录中找到），通过Ctrl+Y/CMD+Y转换成元件，命名为symLogo。之后，可以删除舞台上导入的图片元素，然后编辑symLogo元件。
在本教程完成的示例中，当鼠标或者手势向右滑动，logo将顺时针旋转，而向左滑动，logo会相应逆时针旋转。因此，在symLogo的元件编辑状态下，我们需要为其加入两端动画：“0.5秒内顺时针旋转360度” 和 “0.5秒内逆时针旋转360度”。你可以很容易的使用Transform下的rotate属性来实现，或者使用右侧面板上方的“Transform Tools”来制作。
为了未来能够方便的通过JavaScript脚本来控制旋转，在时间轴上，我们需要在每段动画的起始位置加入标签Label：分别为rotate和rotateReverse。你只需要把播放头移到动画的起始位置，然后点击时间轴左侧如下图标志的小箭头按钮即可插入并编辑标签。
加入label和trigger的symbol
在播放时任意一段动画时，我们都期望在旋转到一周时自动停止，因此把播放头移至每段动画的结尾帧处，点击时间轴左侧的{}状代码按钮，插入trigger，即触发器。触发器是一段javascript脚本，当播放头移到trigger所在的帧时，Edge Animate即会自动触发调用。Trigger的代码类似如下：
Trigger触发器
至此，Logo元件制作完毕。接下来，我们回到主舞台来通过JavaScript响应用户操作，控制logo的滚动。
设置鼠标和触摸的监听器
Edge Animate是基于jQuery的，因此通过Edge Animate提供的JavaScript API，我们可以获得舞台上的元件，元件实例，并将其转换成更方便操作的jQuery对象。Edge Animate是一个开放的环境，也可以非常方便的导入第三方javaScript库，我们在之后的教程中会逐步涉猎。
为了响应用户操作，首先我们要侦听用户鼠标事件或者触摸touch事件。根据滑动开始和结束时鼠标或者触摸的位置，我们可以判断滑动的方向，从而进一步控制logo的滚动以及移动方向。同时，我们还要使用Edge Animate javaScript API提供的sym.setVariable()命令记录操作的关键变量值，来存储计算出来的移动方向，当前logo移动位置，每帧移动步进。我们在Stage的compositionReady事件中完成上述工作。如下图：
Stage compositionReady事件
完整代码如下，可以参考其中注视说明：
//设置变量，分别控制移动方向，当前位置和步进。
sym.setVariable("Direction", "1");
sym.setVariable("LeftPosition", "0");
sym.setVariable("Step", "100");
//监听鼠标mousedown事件，记录鼠标起始位置
$(document).bind("mousedown", function(e) {
e.preventDefault();
var xStart = e.originalEvent.clientX;
sym.setVariable('xStart', xStart);
//监听鼠标mouseup事件，记录鼠标结束位置，并依次计算滑动方向
$(document).bind("mouseup", function(e) {
e.preventDefault();
xStart = sym.getVariable('xStart');
var xEnd = e.originalEvent.clientX;
if (xEnd & xStart)
//向右滑动
sym.setVariable("Direction", "1");
else if (xEnd
sym.setVariable("Direction", "1");
else if (xEnd & xStart)
sym.setVariable(&Direction&, &0&);
使用脚本控制LOGO移动
如下图，可以通过Timeline左端的{}状代码按钮，为Timeline的complete事件添加侦听器代码。如下图：
Timeline complete事件
timeline的complete事件完整代码如下：
//获取logo元件
var symLogo=sym.getSymbol("logo");
//获取stage jQuery对象
var stage = sym.$("stage");
//获取舞台宽度
var width=parseInt(stage.css("width"));
//获取logo元件元素实例
var logo=symLogo.getSymbolElement();
//获取logo元件的宽度
var logoWidth=parseInt(logo.css("width"));
//获取当前logo偏移位置。因为使用jQuery.animate控制logo移动，并不会真正改变logo的left css属性，因此，需要设置变量记载
var x = sym.getVariable("LeftPosition");
//获取步进
var step=parseInt(sym.getVariable("Step"));
//确保logo不会移出屏幕，一旦到达stage边缘，即改变方向
if(x&width-logoWidth){
sym.setVariable("Direction", "0");
symLogo.play("rotate");
x=parseInt(x+step);
symLogo.play("rotateReverse");
x=parseInt(x-step);
//使用jQuery的animate方法控制logo移动
logo.animate({"left":x +"px"},500,"linear",function(){
// 移动完成时，记录新的位置，并重播Edge Aniamte动画。
sym.setVariable("LeftPosition",parseInt(x));
sym.play(0);
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注iOS开发学习之核心动画 - 了透糕糟 - 推酷
iOS开发学习之核心动画 - 了透糕糟
核心动画基本概念
基础动画（CABasicAnimation）
关键帧动画（CAKeyframeAnimation）
转场动画－CATransition
UIView的转场动画－双视图
一、核心动画基本概念
－导入QuartzCore.framework框架
1?开发步骤
1.初始化一个动画对象（CAAnimation）并且设置一些动画相关属性
2.CALayer中很多属性都可以通过CAAnimation实现动画效果，包括：opacity、position、transform、bounds、contents等（可以在API文档中搜索：CALayer Animatable Properties）
3.添加动画对象到层（CALayer）中，开始执行动画
4.通过调用CALayer的addAnimation：forKey增加动画到层（CALayer）中，这样就能触发动画。通过调用removeAnimationForKey可以停止层中的动画
5.Core Animation的动画执行过程都是后台操作的，不会阻塞主线程
1.duration：动画的持续时间
2.repeatCount：重复次数（HUGE_VALF、MAX FLOAT无限重复）
3.repeatDuration：重复时间（用的很少）
4.removedOnCompletion：默认为Yes。动画执行完后默认会从图层删除掉
5.fillMode
6.biginTime
7.timingFunction：速度控制函数，控制动画节奏
8.delegate
二、基础动画（CABasicAnimation）
如果只是实现简单属性变化的动画效果，可以使用UIView的块动画替代基本动画
1?属性说明
－fromValue：keyPath相应属性值的初始值
－toValue：keyPath相应属性的结束值
2?动画过程说明：
－随着动画的就行，在duration的持续时间内，keyPath相应的属性值从fromValue渐渐变为toValue
－keyPath内容是CALayer的可动画Animation属性
－如果fillMode＝kCAFillModeForwards同时removedOnCompletion＝NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态，但在实质上，图层的属性值还是动画执行前的初始值，并没有真正改变
3?代码实现
位移需要考虑目标点设定的问题
1.将动画的所有方法封装到一个类里面
MyCAHelper.h
#import &Foundation/Foundation.h&
#import &QuartzCore/QuartzCore.h&
#define kCAHelperAlphaAnimation @&opacity&;
// 淡入淡出动画
#define kCAHelperScaleAnimation @&transform.scale&;
// 比例缩放动画
#define kCAHelperRotationAnimation @&transform.rotation&;
// 旋转动画
#define kCAHelperPositionAnimation @&position&;
// 平移位置动画
@interface MyCAHelper : NSObject
#pragma mark - 基本动画统一调用方法
+ (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationType
duration:(CFTimeInterval)duration
from:(NSValue *)from
to:(NSValue *)to
autoRevereses:(BOOL)autoR
#pragma mark - 关键帧动画方法
#pragma mark 摇晃动画
+ (CAKeyframeAnimation *)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration
angle:(CGFloat)angle
repeatCount:(CGFloat)repeatC
#pragma mark 贝塞尔路径动画
+ (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)duration
path:(UIBezierPath *)
#pragma mark 弹力仿真动画
+ (CAKeyframeAnimation *)myKeyBounceAnimationFrom:(CGPoint)from
to:(CGPoint)to
duration:(CFTimeInterval)
MyCAHelper.m
#import &MyCAHelper.h&
@implementation MyCAHelper
#pragma mark - 基本动画统一调用方法
+ (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationType
duration:(CFTimeInterval)duration
from:(NSValue *)from
to:(NSValue *)to
autoRevereses:(BOOL)autoRevereses
// 1. 实例化一个CA动画对象
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:animationType];
// 2. 设置动画属性
[anim setDuration:duration];
[anim setFromValue:from];
[anim setToValue:to];
[anim setAutoreverses:autoRevereses];
#pragma mark - 关键帧动画方法
#pragma mark 摇晃动画
+ (CAKeyframeAnimation *)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration
angle:(CGFloat)angle
repeatCount:(CGFloat)repeatCount
// 1. 初始化动画对象实例
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@&transform.rotation&];
// 2. 设置动画属性
[anim setDuration:duration];
[anim setValues:@[@(angle), @(-angle), @(angle)]];
[anim setRepeatCount:repeatCount];
#pragma mark 贝塞尔路径动画
+ (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)duration
path:(UIBezierPath *)path
// 1. 初始化动画对象实例
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@&position&];
// 2. 设置动画属性
[anim setDuration:duration];
[anim setPath:path.CGPath];
#pragma mark 弹力仿真动画
+ (CAKeyframeAnimation *)myKeyBounceAnimationFrom:(CGPoint)from
to:(CGPoint)to
duration:(CFTimeInterval)duration
// 是一个基于路径的动画
// 首先定义一个路径，记录弹力仿真的整个路径
CGMutablePathRef path = CGPathCreateMutable();
// 弹力仿真路径创建代码
// 计算起始点与目标点之间的位置偏移量，这个偏移量的目的是为了能够计算出小球第一次延伸的长度
CGFloat offsetX = from.x - to.x;
CGFloat offsetY = from.y - to.y;
// 1. 移动到起始点
CGPathMoveToPoint(path, NULL, from.x, from.y);
// 2. 将目标点的坐标添加到路径之中
CGPathAddLineToPoint(path, NULL, to.x, to.y);
// 3. 设置小球的弹力因子
CGFloat offsetDivider = 4.0f;
while (YES) {
// 加延伸方向的路径
CGPathAddLineToPoint(path, NULL, to.x + offsetX / offsetDivider,
to.y + offsetY / offsetDivider);
// 再次将目标点添加到路径
CGPathAddLineToPoint(path, NULL, to.x, to.y);
// 弹力因子递增，保证越来越接近目标点
offsetDivider += 6.0f;
// 当小球的当前位置距离目标点足够小，我们退出循环
if ((abs(offsetX / offsetDivider) & 10.0f)
&& (abs(offsetY / offsetDivider) & 10.0f)) {
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@&position&];
[anim setPath:path];
// 释放路径
CGPathRelease(path);
[anim setDuration:duration];
#import &ViewController.h&
#import &MyCAHelper.h&
@interface ViewController ()
UIView *_demoV
@implementation ViewController
- (void)viewDidLoad
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self.view setBackgroundColor:[UIColor lightGrayColor]];
_demoView = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 100, 100)];
[_demoView setBackgroundColor:[UIColor whiteColor]];
[self.view addSubview:_demoView];
- (void)didReceiveMemoryWarning
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
UITouch *touch = [touches anyObject];
location = [touch locationInView:self.view];
// [_demoView setCenter:location];
1.测试基本动画
// CABasicAnimation *anim = [self testBasic1];
// [anim setRepeatCount:3];
// [_demoView.layer addAnimation:anim forKey:nil];
2.测试弹力仿真动画效果
// [_demoView.layer addAnimation:[self test1:_demoView.center to:location] forKey:nil];
3.测试路径关键帧动画
// [_demoView.layer addAnimation:[self test2] forKey:nil];
// [_demoView.layer addAnimation:[self test4:_demoView.center to:location] forKey:nil];
4.测试摇晃关键帧动画
// 点击屏幕，开始摇晃，再次点击，停止摇晃
// CAAnimation *anim = [_demoView.layer animationForKey:@&shakeAnimation&];
// if (anim) {
[_demoView.layer removeAnimationForKey:@&shakeAnimation&];
// } else {
[_demoView.layer addAnimation:[self test5] forKey:@&shakeAnimation&];
CAKeyframeAnimation *anim = [self test1:_demoView.center to:location];
[_demoView.layer addAnimation:anim forKey:nil];
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
// 需要在这里对不同对象的动画方法进行完成处理！
[_demoView setCenter:location];
NSLog(@&%@&, NSStringFromCGPoint(_demoView.center));
#pragma mark - 重构方法测试
#pragma mark 测试贝塞尔路径关键帧动画
- (CAKeyframeAnimation *)test5
return [MyCAHelper myKeyShakeAnimationWithDuration:0.2 angle:M_PI_4 / 18 repeatCount:MAXFLOAT];
#pragma mark 测试贝塞尔路径关键帧动画
- (CAKeyframeAnimation *)test4:(CGPoint)from to:(CGPoint)to
UIBezierPath *path = [UIBezierPath bezierPath];
// 有两个控制点去挤出的曲线，能挤出S型的曲线
[path moveToPoint:from];
[path addCurveToPoint:to controlPoint1:CGPointMake(320, 0) controlPoint2:CGPointMake(0, 460)];
return [MyCAHelper myKeyPathAnimationWithDuration:2.0 path:path];
#pragma mark 测试贝塞尔路径关键帧动画
- (CAKeyframeAnimation *)test3:(CGPoint)from to:(CGPoint)to
UIBezierPath *path = [UIBezierPath bezierPath];
// 只有一个控制点去挤出的曲线
[path moveToPoint:from];
[path addQuadCurveToPoint:to controlPoint:CGPointMake(320, 230)];
return [MyCAHelper myKeyPathAnimationWithDuration:2.0 path:path];
#pragma mark 测试路径关键帧动画
- (CAKeyframeAnimation *)test2
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
return [MyCAHelper myKeyPathAnimationWithDuration:2.0 path:path];
#pragma mark 测试弹力仿真动画效果
- (CAKeyframeAnimation *)test1:(CGPoint)from to:(CGPoint)to
CAKeyframeAnimation *anim = [MyCAHelper myKeyBounceAnimationFrom:from to:to duration:1.5];
[anim setFillMode:kCAFillModeForwards];
[anim setRemovedOnCompletion:NO];
[anim setDelegate:self];
- (CABasicAnimation *)testBasic1
return [MyCAHelper myBasicAnimationWithType:@&opacity& duration:1.0 from:@(1.0) to:@(0.3) autoRevereses:YES];
三、关键帧动画（CAKeyframeAnimation）
基础动画只能从一个值到另一个值，关键帧动画可以用一个数组保存一系列值
1?属性说明
－values：所有的值（用的较少）
－path：路线（如果设置了path，那么values将被忽略）
－keyTimes：可以为对应的关键帧制定对应的时间点，取值范围是0到1.0
2?过程步骤
－初始化自定义视图
－点击屏幕，执行动画
& & &1.指定点平移动画（values）
& & &2.路径平移动画（path C语言框架CGMutablePathRef，需要手动释放内存）
& & &3.贝塞尔路径动画（OC框架UIBezierPath）
& & &4.摇晃动画（修改旋转角度）
3?代码重构
如上代码，重构在了一起
四、动画组
动画是可以并发执行的
－定义一个group组
－定义动画
－将动画加入group组
－可以给组设置属性
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInView:self.view];
[_demoView setBackgroundColor:[UIColor redColor]];
// 1. 定义动画组
CAAnimationGroup *group = [CAAnimationGroup animation];
// 定义一组动画
// 淡入淡出动画
CABasicAnimation *alpha = [MyCAHelper myBasicAnimationWithType:kCAHelperAlphaAnimation duration:1.0 from:@(1.0) to:@(0.3) autoRevereses:YES];
// 旋转动画
CABasicAnimation *rotation = [MyCAHelper myBasicAnimationWithType:kCAHelperRotationAnimation duration:2.0 from:@(-M_PI_2) to:@(M_PI_2) autoRevereses:NO];
// 缩放动画
CABasicAnimation *scale = [MyCAHelper myBasicAnimationWithType:kCAHelperScaleAnimation duration:0.5 from:@(1.0) to:@(0.1) autoRevereses:YES];
// 关键帧路径动画，弹力仿真动画效果
CAKeyframeAnimation *path = [self test1:_demoView.center to:location];
// 2. 设置动画组属性
[group setAnimations:@[alpha, path, rotation, scale]];
// 设置动画的时长
[group setDuration:4.0];
// 3. 将动画组添加到图层
[_demoView.layer addAnimation:group forKey:nil];
五、转场动画－CATransition
1?属性说明
－type：动画过渡类型
－subtype：动画过渡方向
－startProgress：动画起点（在整体动画的百分比）
－endProgress：动画终点（在整体动画的百分比）
－增加一个转场演示视图
－增加轻扫手势
－在轻扫手势方法中
& & &1.更改演示视图内容
& & &2.创建转场动画效果
& & &3.将转场动画添加到视图的图层
// 轻扫手势操作
- (void)swipeAction:(UISwipeGestureRecognizer *)sender
// 通过轻扫手势，让切换出来的视图是蓝色的
if (_demoView.tag == 0) {
[_demoView setBackgroundColor:[UIColor blueColor]];
[_demoView setTag:1];
[_demoView setBackgroundColor:[UIColor redColor]];
[_demoView setTag:0];
// 根据视图内容我们来实现专场动画
CATransition *anim = [CATransition animation];
// 设置专场动画的过渡类型
[anim setType:@&cameraIrisHollowClose&];
// 需要根据手势的方向，来决定专场动画的动画方向
// 注意：在转场动画中，动画方向的左右是和手势的方向相反的
if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
[anim setSubtype:kCATransitionFromRight];
[anim setSubtype:kCATransitionFromLeft];
[_demoView.layer addAnimation:anim forKey:nil];
- (void)viewDidLoad
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 1. 实例化自定义视图
_demoView = [[UIView alloc]initWithFrame:self.view.bounds];
[_demoView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:_demoView];
// 2. 增加轻扫手势
UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc]
initWithTarget:self
action:@selector(swipeAction:)];
[swipeLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
[_demoView addGestureRecognizer:swipeLeft];
UISwipeGestureRecognizer *swipeRight = [[UISwipeGestureRecognizer alloc]
initWithTarget:self
action:@selector(swipeAction:)];
[swipeRight setDirection:UISwipeGestureRecognizerDirectionRight];
[_demoView addGestureRecognizer:swipeRight];
六、UIView的转场动画－双视图
+(void)transitionWithView:(UIView*)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))
1?参数说明
－duration：动画的持续时间
－view：需要进行转场动画的视图
－options：转场动画的类型
－animations：将改变视图属性的代码放在这个Block里
－completion：动画结束后，自动调用的Block&
@interface ViewController ()
UIImageView *_demoImageV
UIImageView *_demoImageView2;
@implementation ViewController
- (void)viewDidLoad
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 实例化第一个UIImageView的对象
_demoImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@&1.jpg&]];
[self.view addSubview:_demoImageView];
// 实例化第二个UIImageView对象
// 注意：在双视图转场动画中，不要将第二个视图添加到主视图
_demoImageView2 = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@&2.jpg&]];
- (void)didReceiveMemoryWarning
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
// 单击屏幕的时候，实现转场动画效果
[self animation1];
#pragma mark - 单视图的转场动画
- (void)animation2
UIImageView *
UIImageView *
if (_demoImageView.superview) {
from = _demoImageV
to = _demoImageView2;
from = _demoImageView2;
to = _demoImageV
[UIView transitionFromView:from toView:to duration:1.0f options:UIViewAnimationOptionTransitionCrossDissolve completion:^(BOOL finished) {
NSLog(@&image view1 的主视图： %@&, _demoImageView.superview);
NSLog(@&image view2 的主视图： %@&, _demoImageView2.superview);
#pragma mark - 单视图的转场动画
- (void)animation1
[UIView transitionWithView:_demoImageView duration:1.0f options:UIViewAnimationOptionTransitionCurlUp animations:^{
// 在动画块代码中设置视图内容变化
if (_demoImageView.tag == 0) {
[_demoImageView setImage:[UIImage imageNamed:@&2.jpg&]];
[_demoImageView setTag:1];
[_demoImageView setImage:[UIImage imageNamed:@&1.jpg&]];
[_demoImageView setTag:0];
} completion:nil];
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致iOS开发之动画编程的几种方法IOS中的动画总结来说有五种：UIView&block&，CAAnimation&CABasicAnimation，CATransition，CAKeyframeAnimation&，NSTimer这里我就总结了一下这五种方法，其实iOS开发中动画的编程都会在这里面变化，所以只要弄懂了这些动画编程就不难了。&一：UIView动画一般方式[UIView beginAnimations:@"ddd" context:nil];//设置动画[UIView commitAnimations]; //提交动画这两个是必须有的，然后在两句的中间添加动画的代码[UIView beginAnimations:@"ddd" context:nil];//设置动画 ddd为动画名称[UIView setAnimationDuration:3];//定义动画持续时间[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; //setAnimationCurve来定义动画加速或减速方式[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.window cache:YES];//设置动画的样式 forView为哪个view实现这个动画效果[UIView setAnimationDelay:3]; //设置动画延迟多久执行[UIView setAnimationDelegate:self]; //设置动画的代理 实现动画执行前后的方法 在commitAnimation之前设置[UIView setAnimationDidStopSelector:@selector(stop)];//设置动画结束后执行的方法[UIView setAnimationWillStartSelector:@selector(star)];//设置动画将要开始执行的方法[UIView commitAnimations]; //提交动画typedef enum {UIViewAnimationTransitionNone, //普通状态UIViewAnimationTransitionFlipFromLeft, //从左往右翻转UIViewAnimationTransitionFlipFromRight, //从右往左翻转UIViewAnimationTransitionCurlUp, //向上翻页UIViewAnimationTransitionCurlDown, //向下翻页} UIViewAnimationTransition;typedef enum {UIViewAnimationCurveEaseInOut,UIViewAnimationCurveEaseIn,UIViewAnimationCurveEaseOut,UIViewAnimationCurveLinear} UIViewAnimationC[UIView beginAnimations:@"ddd" context:nil]; //设置动画view.frame = CGRectMake(200, 200, 100, 100);[UIView commitAnimations]; //提交动画当view从本来的frame移动到新的frame时会慢慢渐变 而不是一下就完成了 中间也可以添加到上面那段中间 只是多种效果重叠以下这些也可以加到 [UIView beginAnimations:@"ddd" context:nil]; [UIView commitAnimations];之间view.transform = CGAffineTransformMakeTranslation(10, 10);//设置偏移量 相对于最初的 只能偏移一次view.transform = CGAffineTransformTranslate(view.transform, 10, 10); //设置偏移量 偏移多次self.view.transform = CGAffineTransformMakeRotation(M_PI);//设置旋转度 只能旋转一次self.view.transform = CGAffineTransformRotate(self.view.transform, M_PI); //旋转多次self.view.transform = CGAffineTransformMakeScale(1.1, 1.1); //设置大小 只能改变一次 数值时相对于本来的几倍self.view.transform = CGAffineTransformScale(self.view.transform, 1.1, 1.1);//改变多次self.view.transform = CGAffineTransformIdentity;//回到当初的样子 执行一次self.view.transform = CGAffineTransformInvert(self.view.transform);//得到相反的样子 大小 方向 位置执行多次&这里我实现了一个自定义的动画方法，方便使用，只需要调用就可以实现很好的功能。&方法的实现-(void)UIViewAnimation:(UIView* )view&frame:(CGRect)frame&type:(int)type&alpha:(float)alpha&duration:(float)duration{//将对应的参数实现在方法中，调用的时候只需要输入方法中所需要的参数就能很好的调用这个方法，并且实现想要的功能！&&& [UIView beginAnimations:nil context:nil];&&& [UIView setAnimationDuration:duration];&&& [UIView setAnimationCurve:type];&&& [UIView setAnimationDelegate:self];&&& view.alpha=&&& view.frame=&&& [UIView commitAnimations];}调用方法[self UIViewAnimation:downView frame:CGRectMake(0, height, 320, 58) type:UIViewAnimationCurveEaseOut alpha:1 duration:0.3];&Block方式&[UIView animateWithDuration:3 animations:^(void){//这里相当于在begin和commint之间 }completion:^(BOOL finished){//这里相当于动画执行完成后要执行的方法，可以继续嵌套block }];&高级一点的block动画（Next）内嵌- (void)changeUIView{ && & [UIView animateWithDuration:2 &delay:0 &&options:UIViewAnimationOptionCurveEaseOut animations:^(void){ &　　　　& 　　moveView.alpha = 0.0; && & 　　}completion:^(BOOL finished){ && & & & 　　　　　　[UIView animateWithDuration:1&delay:1.0 &&options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat && animations:^(void){ & &&　　　　　　　　 &&[UIView setAnimationRepeatCount:2.5]; && & & & & & & 　　　　moveView.alpha = 1.0; && & & & & & 　　}completion:^(BOOL finished){ && & & & & & & & && & & & & &}]; && & && & }]; &} &&二：.CAAnimation需要添加库，和包含头文件caanimation有多个子类CABasicAnimationCABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];//@""里的字符串有多种，可以自己找相关资料，一定要填对，动画才会执行 opacity设置透明度 bounds.size设置大小[animation setFromValue:[NSNumber numberWithFloat:1.0]]; //设置透明度从几开始[animation setToValue:[NSNumber numberWithFloat:0.3]];//设置透明度到几结束[animation setDuration:0.1]; //设置动画时间[animation setRepeatCount:100000];//设置重复时间[animation setRepeatDuration:4]; //会限制重复次数[animation setAutoreverses:NO];//设置是否从1.0到0.3 再从0.3到1.0 为一次 如果设置为NO则 1.0到0.3为一次[animation setRemovedOnCompletion:YES]; //完成时移出动画 默认也是[view.layer addAnimation:animation forKey:@"abc"];//执行动画&CAKeyframeAnimationCAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];//设置view从初始位置经过一系列点NSArray *postionAraay = [NSArray arrayWithObjects:[NSValue valueWithCGPoint:CGPointMake(100, 20)], [NSValue valueWithCGPoint:CGPointMake(40, 80)],[NSValuevalueWithCGPoint:CGPointMake(30, 60)],[NSValue valueWithCGPoint:CGPointMake(20, 40)],[NSValue valueWithCGPoint:CGPointMake(0, 100)],nil];//设置点NSArray *times = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.3],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:0.6],[NSNumber numberWithFloat:0.1],[NSNumbernumberWithFloat:1.0], nil]; //设置移动过程的时间[animation setKeyTimes:times];[animation setValues:postionAraay];[animation setDuration:5]; //设置动画时间[bigImage.layer addAnimation:animation forKey:@"dd"]; //执行动画&CATransitionCATransition *animation = [CATransition animation];animation.duration = 0.5f;animation.timingFunction = UIViewAnimationCurveEaseInOanimation.fillMode = kCAFillModeF/*kCATransitionFkCATransitionMoveIn;kCATransitionPkCATransitionR*//*kCATransitionFromRkCATransitionFromLkCATransitionFromTkCATransitionFromB*/animation.type = kCATransitionPanimation.subtype = kCATransitionFromB[view.layer addAnimation:animation forKey:animation];type也可以直接用字符串/*cubesuckEffect 卷走oglFlip 翻转rippleEffect 水波pageCurl 翻页pageUnCurlcameraIrisHollowOpencameraIrisHollowClose*/&三：NSTimer这是一种定时器来操作动画的方法，他可以结合上面的方法来实现动画的多样化！-(void) onTimer {imageView.center = CGPointMake(imageView.center.x + delta.x,imageView.center.y + delta.y);if (imageView.center.x & self.view.bounds.size.width - ballRadius ||imageView.center.x & ballRadius)delta.x = -delta.x;if (imageView.center.y & self.view.bounds.size.height - ballRadius ||imageView.center.y & ballRadius)delta.y = -delta.y;}- (void) viewDidLoad {ballRadius = imageView.bounds.size.width / 2;[slider setShowValue:YES];delta = CGPointMake(12.0,4.0);timer = [NSTimer scheduledTimerWithTimeInterval:slider.value target:self selector:@selector(onTimer) userInfo:nil repeats:YES];[super viewDidLoad];}-(IBAction) sliderMoved:(id) sender {[timer invalidate];timer = [NSTimer scheduledTimerWithTimeInterval:slider.value target:self selector:@selector(onTimer) userInfo:nil repeats:YES];//timer =&[NSTimer scheduledTimerWithTimeInterval:?invocation:?repeats:YES];}