小项目：实现变速旋转动画
效果图
项目功能要求：
刚开始加载资源的时候，齿轮速度从慢到快，不断加速
加速到一定速度，就不在加速，以这个速度一直旋转下去
当加载资源完成的时候，齿轮速度又开始从快变慢，不断减速
减速完成直到没速度的时候，关闭加载视图
这里我是使用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"];
}
}
网友评论