CoreAnimation变速齿轮旋转动画完毕

小品种:完结变速旋转动画

效果图

品类必要:
  1. 刚早先加载财富的时候,齿轮速度从慢到快,不断加紧
  2. 增速到一定速度,就不在加速,以那么些速度一贯旋转下去
  3. 当加载能源做到的时候,齿轮速度又开端不久变慢,不断减速
  4. 放慢完毕直到没速度的时候,关闭加载视图

那边本身是使用CoreAnimation已毕的,感觉麻烦,但是还好促成了意义

率先,大家解析该动画片进程,一共需求1个卡通:

  • 始发加载动画
  • 正值加载动画
  • 完工加载动画

上边的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"];
    }
}
最终上2个美图:

动漫美丽的女子,抑郁症,必须要有三个配图

发表评论

电子邮件地址不会被公开。 必填项已用*标注