CoreAnimation变速齿轮旋转动画实现

2017-05-16  本文已影响73人  无沣

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

效果图

项目功能要求:

刚开始加载资源的时候,齿轮速度从慢到快,不断加速

加速到一定速度,就不在加速,以这个速度一直旋转下去

当加载资源完成的时候,齿轮速度又开始从快变慢,不断减速

减速完成直到没速度的时候,关闭加载视图

这里我是使用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"];

 }

}

上一篇 下一篇

猜你喜欢

热点阅读