美文网首页iOS干货ios开发笔记iOS Developer - Animation
CoreAnimation变速齿轮旋转动画实现

CoreAnimation变速齿轮旋转动画实现

作者: 执着丶执念 | 来源:发表于2016-03-30 19:32 被阅读766次

小项目:实现变速旋转动画

效果图
项目要求:
  1. 刚开始加载资源的时候,齿轮速度从慢到快,不断加速
  2. 加速到一定速度,就不在加速,以这个速度一直旋转下去
  3. 当加载资源完成的时候,齿轮速度又开始从快变慢,不断减速
  4. 减速完成直到没速度的时候,关闭加载视图

这里我是使用CoreAnimation实现的,感觉麻烦,不过好在实现了功能

首先,我们分析该动画过程,一共需要3个动画:

  • 开始加载动画
  • 正在加载动画
  • 结束加载动画

下面的loadingGearView就是上面GIF图的那个轮子

首先我们来看下开始加载动画:
#pragma mark 图片开始加载动画
- (void)startLoadingAnimation{
    if (loadingGearView)
    {
        //先移除之前的动画
        [loadingGearView.layer removeAllAnimations];
        //创建旋转动画
        CABasicAnimation* startRotation = 
                    [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
        startRotation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];
        startRotation.duration = 2.0;
        //设置旋转动画是开始先慢后面越来越快的动画运动时间函数
        startRotation.timingFunction = 
                    [CAMediaTimingFunction functionWithName:@"easeIn"];
        startRotation .delegate = self;
        //设置标志来区别是否是即将停止
        [startRotation setValue:@NO forKey:@"isStop"];
        //添加动画
        [loadingGearView.layer addAnimation:startRotation forKey:@"startRotationAnimation"];
    }
}
我们上面设置了代理,我们再代理方法中实现正在加载动画
#pragma mark 动画结束的动画代理方法中,添加图片正在加载动画
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if ([[anim valueForKey:@"isStop"] boolValue]) {
        [self hideView];
        return;
    }
    CABasicAnimation* rotationAnimation = 
                  [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];
    rotationAnimation.duration = 1.0;
    rotationAnimation.cumulative = YES;
    rotationAnimation.repeatCount = HUGE_VALF;
    [loadingGearView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
    
}
结束加载动画和开始加载动画差不多,不同的是easeOut的动画时间函数
#pragma mark 图片结束加载动画
- (void)stopLoadingAnimation{
    if (loadingGearView)
    {
        [loadingGearView.layer removeAllAnimations];
        //创建结束旋转动画
        CABasicAnimation* stopRotation = 
                   [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
        stopRotation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];
        stopRotation.duration = 2.0;
        stopRotation.delegate = self;
        //前面的都一样,这里开始就和开始旋转动画不同了
        stopRotation.timingFunction = [CAMediaTimingFunction functionWithName:@"easeOut"];
        [stopRotationsetValue:@YES forKey:@"isStop"];
        [loadingGearView.layer addAnimation:stopRotation forKey:@"stopRotationAnimation"];
    }
}
最后上一个美图:
动漫美女,强迫症,必须要有一个配图

相关文章

网友评论

  • 优雨:这个穹妹还可以 滑稽
  • 随意_M:rotationAnimation.cumulative = YES;这个属性的作用是干嘛的
    执着丶执念:@执着_执念 旋转
    执着丶执念:@浩楠哥的小猴子 如果不是刚好转整圈的选择,要设置这个不然会有一点卡顿,这里设不设置没太大区别
    执着丶执念:@浩楠哥的小猴子 追加的意思,就是旋转角度不断追加
  • 马爷:不上源码的文章不是好文章。 :smile:
  • HustBroventure:不上源码的文章不是好文章。 :smile:
    执着丶执念:@HustBroventure 公司的代码不能随便泄露O(∩_∩)O哈!以后我自己的源码会考虑发个链接的

本文标题:CoreAnimation变速齿轮旋转动画实现

本文链接:https://www.haomeiwen.com/subject/riqelttx.html