【iOS开发】30多个iOS常用动画

【iOS开发】30多个iOS常用动画，带详细注释 (2014-04-20 14:55:54)转载▼
标签： ios开发 动画 it 分类： Xcode/iOS/MacOS
30多个iOS常用动画，带详细注释
//
// CoreAnimationEffect.h
// CoreAnimationEffect
//
// Created by VincentXue on 13-1-19.
// Copyright (c) 2013年 VincentXue. All rights reserved.
//

import

@interface CoreAnimationEffect : NSObject

pragma mark - Custom Animation

(void)showAnimationType:(NSString *)type withSubType:(NSString *)subType duration:(CFTimeInterval)duration timingFunction:(NSString *)timingFunction view:(UIView *)theView;
pragma mark - Preset Animation

// reveal

  • (void)animationRevealFromBottom:(UIView *)view;
  • (void)animationRevealFromTop:(UIView *)view;
  • (void)animationRevealFromLeft:(UIView *)view;
  • (void)animationRevealFromRight:(UIView *)view;

// 渐隐渐消

  • (void)animationEaseIn:(UIView *)view;
  • (void)animationEaseOut:(UIView *)view;

// 翻转

  • (void)animationFlipFromLeft:(UIView *)view;
  • (void)animationFlipFromRigh:(UIView *)view;

// 翻页

  • (void)animationCurlUp:(UIView *)view;
  • (void)animationCurlDown:(UIView *)view;

// push

  • (void)animationPushUp:(UIView *)view;
  • (void)animationPushDown:(UIView *)view;
  • (void)animationPushLeft:(UIView *)view;
  • (void)animationPushRight:(UIView *)view;

// move

  • (void)animationMoveUp:(UIView *)view duration:(CFTimeInterval)duration;
  • (void)animationMoveDown:(UIView *)view duration:(CFTimeInterval)duration;
  • (void)animationMoveLeft:(UIView *)view;
  • (void)animationMoveRight:(UIView *)view;

// 旋转缩放

// 各种旋转缩放效果

  • (void)animationRotateAndScaleEffects:(UIView *)view;

// 旋转同时缩小放大效果

  • (void)animationRotateAndScaleDownUp:(UIView *)view;

pragma mark - Private API

(void)animationFlipFromTop:(UIView *)view;
(void)animationFlipFromBottom:(UIView *)view;

(void)animationCubeFromLeft:(UIView *)view;

(void)animationCubeFromRight:(UIView *)view;

(void)animationCubeFromTop:(UIView *)view;

(void)animationCubeFromBottom:(UIView *)view;

(void)animationSuckEffect:(UIView *)view;

(void)animationRippleEffect:(UIView *)view;

(void)animationCameraOpen:(UIView *)view;

(void)animationCameraClose:(UIView *)view;

@end

//
// CoreAnimationEffect.m
// CoreAnimationEffect
//
// Created by VincentXue on 13-1-19.
// Copyright (c) 2013年 VincentXue. All rights reserved.
//

import "CoreAnimationEffect.h"
import
@implementation CoreAnimationEffect

pragma mark - Custom Animation
(void)showAnimationType:(NSString )type
withSubType:(NSString *)subType
duration:(CFTimeInterval)duration
timingFunction:(NSString *)timingFunction
view:(UIView )theView
{
/ CATransition

@see http://www.dreamingwish.com/dream-2012/the-concept-of-coreanimation-programming-guide.html
@see http://geeklu.com/2012/09/animation-in-ios/ *
CATransition 常用设置及属性注解如下: */
CATransition *animation = [CATransition animation];

animation.delegate = self;

animation.duration = duration;

animation.timingFunction = [CAMediaTimingFunction functionWithName:timingFunction];

animation.fillMode = kCAFillModeForwards;

// animation.removedOnCompletion = NO;

** type

  • 各种动画效果 其中除了'fade', moveIn',push' , `reveal' ,其他属于私有的API(我是这么认为的,可以点进去看下注释).
  • ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用.
  • @"cube" 立方体翻滚效果
  • @"moveIn" 新视图移到旧视图上面
  • @"reveal" 显露效果(将旧视图移开,显示下面的新视图)
  • @"fade" 交叉淡化过渡(不支持过渡方向) (默认为此效果)
  • @"pageCurl" 向上翻一页
  • @"pageUnCurl" 向下翻一页
  • @"suckEffect" 收缩效果，类似系统最小化窗口时的神奇效果(不支持过渡方向)
  • @"rippleEffect" 滴水效果,(不支持过渡方向)
  • @"oglFlip" 上下左右翻转效果
  • @"rotate" 旋转效果
  • @"push"
  • @"cameraIrisHollowOpen" 相机镜头打开效果(不支持过渡方向)
  • @"cameraIrisHollowClose" 相机镜头关上效果(不支持过渡方向)

** type

  • kCATransitionFade 交叉淡化过渡
  • kCATransitionMoveIn 新视图移到旧视图上面
  • kCATransitionPush 新视图把旧视图推出去
  • kCATransitionReveal 将旧视图移开,显示下面的新视图
    */

animation.type = type;

** subtype

  • 各种动画方向
  • kCATransitionFromRight; 同字面意思(下同)
  • kCATransitionFromLeft;
  • kCATransitionFromTop;
  • kCATransitionFromBottom;

** subtype

  • 当type为@"rotate"(旋转)的时候,它也有几个对应的subtype,分别为:
  • 90cw 逆时针旋转90°
  • 90ccw 顺时针旋转90°
  • 180cw 逆时针旋转180°
  • 180ccw 顺时针旋转180°

**

animation.subtype = subType;

**

  • 所有核心动画和特效都是基于CAAnimation,而CAAnimation是作用于CALayer的.所以把动画添加到layer上.
  • forKey 可以是任意字符串.

[theView.layer addAnimation:animation forKey:nil];
}

pragma mark - Preset Animation
(void)animationRevealFromBottom:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setType:kCATransitionReveal];
[animation setSubtype:kCATransitionFromBottom];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationRevealFromTop:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setType:kCATransitionReveal];
[animation setSubtype:kCATransitionFromTop];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationRevealFromLeft:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setType:kCATransitionReveal];
[animation setSubtype:kCATransitionFromLeft];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationRevealFromRight:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setType:kCATransitionReveal];
[animation setSubtype:kCATransitionFromRight];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationEaseIn:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setType:kCATransitionFade];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationEaseOut:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setType:kCATransitionFade];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationFlipFromLeft:(UIView *)view
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:view cache:NO];
[UIView commitAnimations];
}

(void)animationFlipFromRigh:(UIView *)view
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:view cache:NO];
[UIView commitAnimations];
}

(void)animationCurlUp:(UIView *)view
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:view cache:NO];
[UIView commitAnimations];
}

(void)animationCurlDown:(UIView *)view
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:0.35f];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:view cache:NO];
[UIView commitAnimations];
}

(void)animationPushUp:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromTop];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationPushDown:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromBottom];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationPushLeft:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromLeft];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationPushRight:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromRight];

[view.layer addAnimation:animation forKey:nil];
}

// presentModalViewController

  • (void)animationMoveUp:(UIView *)view duration:(CFTimeInterval)duration
    {
    CATransition *animation = [CATransition animation];
    [animation setDuration:duration];
    [animation setFillMode:kCAFillModeForwards];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [animation setType:kCATransitionMoveIn];
    [animation setSubtype:kCATransitionFromTop];

1

[view.layer addAnimation:animation forKey:nil];
}

// dissModalViewController

  • (void)animationMoveDown:(UIView *)view duration:(CFTimeInterval)duration
    {
    CATransition *transition = [CATransition animation];
    transition.duration =0.4;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.type = kCATransitionReveal;
    transition.subtype = kCATransitionFromBottom;
    [view.layer addAnimation:transition forKey:nil];
    }

(void)animationMoveLeft:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:kCATransitionMoveIn];
[animation setSubtype:kCATransitionFromLeft];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationMoveRight:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:kCATransitionMoveIn];
[animation setSubtype:kCATransitionFromRight];

[view.layer addAnimation:animation forKey:nil];
}

+(void)animationRotateAndScaleEffects:(UIView )view
{
[UIView animateWithDuration:0.35f animations:^
{
/*

*/

animation.type = type;

animation.subtype = subType;

[theView.layer addAnimation:animation forKey:nil];
}

(void)animationRotateAndScaleDownUp:(UIView *)view
{
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat:(2 * M_PI) * 2];
rotationAnimation.duration = 0.35f;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.0];
scaleAnimation.duration = 0.35f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 0.35f;
animationGroup.autoreverses = YES;
animationGroup.repeatCount = 1;
animationGroup.animations =[NSArray arrayWithObjects:rotationAnimation, scaleAnimation, nil];
[view.layer addAnimation:animationGroup forKey:@"animationGroup"];
}

pragma mark - Private API
(void)animationFlipFromTop:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"oglFlip"];
[animation setSubtype:@"fromTop"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationFlipFromBottom:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"oglFlip"];
[animation setSubtype:@"fromBottom"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationCubeFromLeft:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cube"];
[animation setSubtype:@"fromLeft"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationCubeFromRight:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cube"];
[animation setSubtype:@"fromRight"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationCubeFromTop:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cube"];
[animation setSubtype:@"fromTop"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationCubeFromBottom:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cube"];
[animation setSubtype:@"fromBottom"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationSuckEffect:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"suckEffect"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationRippleEffect:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"rippleEffect"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationCameraOpen:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cameraIrisHollowOpen"];
[animation setSubtype:@"fromRight"];

[view.layer addAnimation:animation forKey:nil];
}

(void)animationCameraClose:(UIView *)view
{
CATransition *animation = [CATransition animation];
[animation setDuration:0.35f];
[animation setFillMode:kCAFillModeForwards];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
[animation setType:@"cameraIrisHollowClose"];
[animation setSubtype:@"fromRight"];

[view.layer addAnimation:animation forKey:nil];
}
@end

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342

推荐阅读更多精彩内容