IOS 动画基础篇

coreAnimation 框架为app提供了丰富的动画,使用简单,性能好,在后台线程生成动画帧。启用了硬件加速使动画更加流畅。在ios中动画相关类的继承关系如下:


ios动画类继承关系

核心动画

在平常开发中使用的较多的动画类就是CABasicAnimation 和CAKeyframeAnimation 和CAAnimationGroup两者结合就可以做出很炫的动画。其中系统自带的动画如下:

transform.scale
transform.scale.x
transform.scale.y
transform.rotation.z
opacity
margin
zPosition
backgroundColor
cornerRadius
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius

CABasicAnimation 的属性有

@property(nullable, strong) id fromValue;
@property(nullable, strong) id toValue;
@property(nullable, strong) id byValue;

这里要解释的是toValue和byValue 。byValue 是在fromValue基础上增长多少值,而toValue是到指定的值

CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnim.duration      = 2; //动画时长
    scaleAnim.fromValue     = @(1); //开始值
    scaleAnim.toValue       = @(3); //放大3倍
    scaleAnim.repeatCount   = HUGE_VALF; //重复次数
    scaleAnim.speed         = 1.5; //速度
    [scaleView.layer addAnimation:scaleAnim forKey:@"scaleAnimation"];
CABasicAnimation动画

CAKeyframeAnimation 实现的动画比basic动画更炫。keyframe和basic 组合后生成group动画就更加丰富多彩了。现在就举个水波纹的group动画。

- (void)waveAnimation
{
    CGFloat duration = 12;
    NSInteger number = 0;
    
    while (number <2 ) {
        UIView *xiuView;
        if (!xiuView) {
            xiuView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,30, 30)];
            xiuView.center = self.view.center;
            xiuView.layer.cornerRadius = 15;
            xiuView.tag = 10000+number;
            xiuView.backgroundColor = [UIColor redColor];
            [self.view insertSubview:xiuView atIndex:0];
        }
        
        CAKeyframeAnimation *opKey = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
        opKey.duration = duration;
        
        CAKeyframeAnimation *scaleKey = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
        scaleKey.duration = duration;
        
        //重复3次
        opKey.values = @[@.4,@0,@.4,@0,@.4,@0,@0];
        opKey.keyTimes = @[@0,@.16,@.16,@.33,@.33,@.5,@.5,@1];
        
        scaleKey.values = @[@1,@6,@1,@6,@1,@6,@1,@1];
        scaleKey.keyTimes = @[@0,@.16,@.16,@.33,@.33,@.5,@.5,@1];
        
        
        CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
        group.animations = @[opKey,scaleKey];
        group.repeatCount = HUGE_VALF;
        group.duration = 12;
        group.beginTime = CACurrentMediaTime()+number*1;
        
        [xiuView.layer addAnimation:group forKey:@"waveAnimationKey"];
        number++;
    }
}
group动画

这个动画充分利用了不同时间点上动画值的不同来实现一个提示刷新的效果。

CATransition(过渡动画)

过渡动画多用于转场,和视图切换。SDK提供一四种

  1. kCATransitionFade
  2. kCATransitionMoveIn 进入覆盖效果
  3. kCATransitionPush
  4. kCATransitionReveal 揭露离开效果
    但苹果还有一些私有的动画 效果。例如:
    `@"cube"、@"suckEffect"、@"oglFlip"、 @"rippleEffect"、@"pageCurl"、@"pageUnCurl"、@"cameraIrisHollowOpen"、@"cameraIrisHollowClose"等。
    cube

    cameraIrisHollowOpen

    在ios9以上,苹果又增加了CASpringAnimation,这是弹簧动画。
    质量(mass) 对象质量 质量越大 弹性越大 需要的动画时间越长 默认是1 必须大于0
    刚度系数(stiffness ) 刚度系数越大,产生形变的力就越大,运动越快。默认是100
    阻尼系数(damping ) 阻止弹簧伸缩的系数 阻尼系数越大,停止越快。时间越短 默认是10
    初始速度(initialVelocity ) 正负代表方向,数值代表大小 默认是0
    UIView 封装了一个弹簧动画
[UIView animateWithDuration: delay: usingSpringWithDamping: initialSpringVelocity:               options:animations:^{
    
  } completion:^(BOOL finished) {
    
  }];

这里的 usingSpringWithDamping 的范围是0-1.0f 数值越小「弹簧」的振动效果越明显。initialSpringVelocity 表示初始的速度,数值越大一开始移动越快。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容