技术感(Che)悟(Dan)（可跳过）
遇到某技术问题时，第一眼看起来实现特别复杂，但又没有更好的思路，只有硬着头皮做下去。耗费了巨大的时间和精力，最终完成，成就感爆棚的同时却总感觉不够优雅。无奈开发任务紧迫，只好搁置。待到闲暇时光（不存在的，唠嗑、斗图都是正经事好不好😜），细思起来不是实现复杂，而是思路偏了，找到最优解，才是我辈进取（装逼）之路。
俗话说：不折腾开发的二货不是好产品，设计之初是用个短视频作为背景，话不多说，BackgroundVideoiOS 搬砖完毕。然而事情怎会如此顺利，运营给出视频太大，压缩后又模糊不清，此方案只好作罢。
那就用图片自己做呗，毕竟有多年Banner经验，此事应该不难，然而真是这样？图片轮播展示完毕的切换卡顿，哪可能逃过产品Dog(就说了能咋地？)的法眼。下面才是入坑的开始：思路是两张一样的图片并排排列，首尾相连，同时左移，设置相同动画时间，X值不断减小，动画结束回调Frame重置方法，递归回调
#import <UIKit/UIKit.h>
typedef void(^MoveAnimationBlock)(void);
@interface MoveAnimationView : UIView
/**
向左移动
@param view 视图
@param timer 时间
@param block 回调方法
*/
+ (void)leftTranslationAnimationView:(UIView *)view
animationDuration:(NSTimeInterval)timer
animationBlock:(MoveAnimationBlock)block;
@end
#import "MoveAnimationView.h"
@implementation MoveAnimationView
+ (void)leftTranslationAnimationView:(UIView *)view animationDuration:(NSTimeInterval)timer animationBlock:(MoveAnimationBlock)block {
[UIView animateWithDuration:timer delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
CGRect frame = view.frame;
frame.origin.x = frame.origin.x - frame.size.width;
view.frame = frame;
} completion:^(BOOL finished) {
if (finished) {
block();
}
}];
}
@end
为了解决，跳出当前页面返回后动画停止的问题，需在viewWillAppear方法中调用：
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self startMoveAnimation];
}
- (void)startMoveAnimation {
UIImage *bgImg = [UIImage imageNamed:@"first_login_bg.jpg"];
CGFloat width = 1.f * bgImg.size.width / bgImg.size.height * kScreenHeight;
self.bgImgV_1.frame = CGRectMake(0, 0, width, kScreenHeight);
self.bgImgV_2.frame = CGRectMake(width, 0, width, kScreenHeight);
[self moveBgImgV_1Animation];
[self moveBgImgV_2Animation];
}
- (UIImageView *)bgImgV_1 {
if (!_bgImgV_1) {
_bgImgV_1 = [[UIImageView alloc]initWithFrame:CGRectZero];
_bgImgV_1.image = [UIImage imageNamed:@"first_login_bg.jpg"];
}
return _bgImgV_1;
}
- (UIImageView *)bgImgV_2 {
if (!_bgImgV_2) {
_bgImgV_2 = [[UIImageView alloc]initWithFrame:CGRectZero];
_bgImgV_2.image = [UIImage imageNamed:@"first_login_bg.jpg"];
}
return _bgImgV_2;
}
- (void)moveBgImgV_1Animation
{
WeakSelf
[MoveAnimationView leftTranslationAnimationView:self.bgImgV_1 animationDuration:36 animationBlock:^{
CGRect frame = _self.bgImgV_1.frame;
frame.origin.x =_self.bgImgV_1.width;
//右移动
//frame.origin.x = 0;
_self.bgImgV_1.frame = frame;
[_self moveBgImgV_1Animation];
}];
}
- (void)moveBgImgV_2Animation
{
WeakSelf
[MoveAnimationView leftTranslationAnimationView:self.bgImgV_2 animationDuration:36 animationBlock:^{
CGRect frame = _self.bgImgV_2.frame;
frame.origin.x = 0;
//右移动
//frame.origin.x = -_self.bgImgV_2.width;
_self.bgImgV_2.frame = frame;
[_self moveBgImgV_2Animation];
}];
}
貌似完美解决，可以交工喝茶了，然而如最初所言，总是感觉不够优雅，还有跳出再返回此页面动画总是重头开始。
下面敲黑板，重点来了，如何用核心动画打开尴尬局面，说干就干：
- (void)startMoveAnimation {
UIImage *bgImg = [UIImage imageNamed:@"first_login_bg.jpg"];
CGFloat width = 1.f * bgImg.size.width / bgImg.size.height * kScreenHeight;
UIImageView *bgImgV_1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, kScreenHeight)];
bgImgV_1.image = bgImg;
UIImageView *bgImgV_2 = [[UIImageView alloc] initWithFrame:CGRectMake(width, 0, width, kScreenHeight)];
bgImgV_2.image = [UIImage imageNamed:@"first_login_bg.jpg"];
[self.view addSubview:bgImgV_2];
[self.view addSubview:bgImgV_1];
CFTimeInterval duration = 36;
CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
anim1.toValue = @(-width);
anim1.duration = duration;
anim1.repeatCount = HUGE_VALF;
anim1.removedOnCompletion = NO; //解决页面切换之后，动画久停止的问题，其实是
[bgImgV_1.layer addAnimation:anim1 forKey:nil];
CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
anim2.toValue = @(-width);
anim2.duration = duration;
anim2.repeatCount = HUGE_VALF;
anim2.removedOnCompletion = NO;
[bgImgV_2.layer addAnimation:anim2 forKey:nil];
}
CABasicAnimation使用总结
解释：为什么动画结束后返回原状态？
首先我们需要搞明白一点的是，layer动画运行的过程是怎样的？其实在我们给一个视图添加layer动画时，真正移动并不是我们的视图本身，而是 presentation layer 的一个缓存。动画开始时 presentation layer开始移动，原始layer隐藏，动画结束时，presentation layer从屏幕上移除，原始layer显示。这就解释了为什么我们的视图在动画结束后又回到了原来的状态，因为它根本就没动过。
这个同样也可以解释为什么在动画移动过程中，我们为何不能对其进行任何操作。
所以在我们完成layer动画之后，最好将我们的layer属性设置为我们最终状态的属性，然后将presentation layer 移除掉。
至此效果上看来是够优雅了，代码不优雅的地方欢迎指正！
