作者: 落影loyinglin 地址: 介绍记录、总结开发遇到一些问题,大家一起交流学习。 效果展示下面是一个很多平台都有的入门豪华礼物动画——烟花。 图片压缩、加载与裁剪1、图片压缩美术给出的图片,即使是压缩过,仍存在较大的压缩空间,可以用这里或者更好的大小优化。 2、图片加载主要有
3、图片裁剪为了减少图片资源的大小,有时候会把多个帧动画做成连续的一张图。这时需要程序加载一整张资源图,并在相应的位置进行裁剪。 UIImage* sourceImage = [UIImage imageNamed:@'image/animation/gift_boat']; CGSize sourceSize = sourceImage.size; CGImageRef cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage,CGRectMake(0, 0, const_position_boat_x, sourceSize.height)); gWaveFrameImage = [UIImage imageWithCGImage:cgimage]; CGImageRelease(cgimage); cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage, CGRectMake(const_position_boat_x, 0, const_position_boat_width, sourceSize.height)); gBoatFrameImage = [UIImage imageWithCGImage:cgimage]; CGImageRelease(cgimage); cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage, CGRectMake(const_position_boat_x const_position_boat_width, 0, sourceSize.width - const_position_boat_x - const_position_boat_width, sourceSize.height)); gShadowFrameImage = [UIImage imageWithCGImage:cgimage]; CGImageRelease(cgimage); 动画剖析与时间轴下面这个是一个全屏类型的“天使”礼物动画,我们来剖析下这个动画的构成。
时间轴实现为了让动画按照时间顺序一一执行,可以把动画按时间和对象分成多个方法,通过GCD在指定的时间调用。 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self playMeteorAnimation]; }); dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self playLandAnimation]; }); dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(6.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self playLightAnimation]; }); dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(7.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self playStarAnimation]; }); dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(TOTAL_TIME * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ @weakify(self); [UIView animateWithDuration:0.5 animations:^{ self.alpha = 0; } completion:^(BOOL finished) { @strongify(self); [self removeFromSuperview]; [self callBackManager]; }]; }); 常用动画效果1、视图变暗、变大alpha值属性是透明度,把背景设置成淡黑色,然后调整alpha可以达到背景渐变的视图效果; [UIView animateWithDuration:1.5 animations:^{ self.mBackgroundView.alpha = 0.5; self.mAngelView.transform = CGAffineTransformMakeScale(1.2, 1.2); }]; 2、匀速运动、交错效果right是项目封装的一个属性,本质是对UIView的frame进行操作; [UIView animateWithDuration:TOTAL_TIME delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.mAngelCloudView0.right = 250; self.mAngelCloudView1.right -= 190; } completion:nil]; 3、上下往返运动CAKeyframeAnimation是关键帧动画,对layer的postion的y坐标进行操作; CAKeyframeAnimation *upDownAnimation; upDownAnimation = [CAKeyframeAnimation animationWithKeyPath:@'position.y']; upDownAnimation.values = @[@(self.mAngelLandView1.layer.position.y), @(self.mAngelLandView1.layer.position.y 5), @(self.mAngelLandView1.layer.position.y)]; upDownAnimation.duration = 2; upDownAnimation.fillMode = kCAFillModeBoth; upDownAnimation.calculationMode = kCAAnimationCubic; upDownAnimation.repeatCount = HUGE_VALF; [self.mAngelLandView1.layer addAnimation:upDownAnimation forKey:@'upDownAnimation']; 4、闪烁效果闪烁的本质是alpha的变化,但是UIView的block动画不好实现重复效果; CAKeyframeAnimation *opacityAnimation; opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@'opacity']; opacityAnimation.values = @[@(0), @(1), @(0)]; opacityAnimation.duration = 1.5; opacityAnimation.fillMode = kCAFillModeBoth; opacityAnimation.calculationMode = kCAAnimationCubic; opacityAnimation.repeatCount = HUGE_VALF; [self.mAngelStarView.layer addAnimation:opacityAnimation forKey:@'opacityAnimation']; 5、贝塞尔曲线运动贝塞尔曲线是优化动画体验的很重要部分,比如说天上掉下来的羽毛,地上冒起来的气泡,空中飘荡的气球,都可以用贝塞尔曲线来绘制,从而获得很好的视觉体验; UIImage *image = [[AnimationImageCache shareInstance] getImageWithName:@'gift_castle_hot_air_balloon3.png']; UIImageView *hotAirBalloonView0 = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, image.size.width / 2, image.size.height / 2)]; [self addSubview:hotAirBalloonView0]; [hotAirBalloonView0 setImage:image]; // 飘动 CGPoint position = CGPointMake(self.width, hotAirBalloonView0.top); CGFloat duration = 5; CAKeyframeAnimation *positionAnimate = [CAKeyframeAnimation animationWithKeyPath:@'position']; positionAnimate.repeatCount = 1; positionAnimate.duration = duration; positionAnimate.fillMode = kCAFillModeForwards; positionAnimate.removedOnCompletion = NO; UIBezierPath *sPath = [UIBezierPath bezierPath]; [sPath moveToPoint:position]; [sPath addCurveToPoint:CGPointMake(-image.size.width / 2, position.y) controlPoint1:CGPointMake(self.width / 3 * 2, position.y - 60) controlPoint2:CGPointMake(self.width / 3, position.y 60)]; positionAnimate.path = sPath.CGPath; [hotAirBalloonView0.layer addAnimation:positionAnimate forKey:@'positionAnimate']; 6、遮罩动画遮罩效果可以实现彩虹??出现、烟花爆炸、画卷打开等效果,通过改变遮罩的大小,影响原始图片的展示,达到动画的效果; UIBezierPath *maskStartPath = [UIBezierPath bezierPathWithRect:CGRectMake(CGRectGetWidth(rainbowView1.bounds), 0, CGRectGetWidth(rainbowView1.bounds), CGRectGetHeight(rainbowView1.bounds))]; UIBezierPath *maskFinalPath = [UIBezierPath bezierPathWithRect:rainbowView1.bounds]; CAShapeLayer *maskLayer = [CAShapeLayer layer]; rainbowView1.layer.mask = maskLayer; maskLayer.path = maskFinalPath.CGPath; CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@'path']; maskLayerAnimation.fromValue = (__bridge id)maskStartPath.CGPath; maskLayerAnimation.toValue = (__bridge id)maskFinalPath.CGPath; maskLayerAnimation.removedOnCompletion = NO; maskLayerAnimation.duration = 2.0; maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [maskLayer addAnimation:maskLayerAnimation forKey:@'maskLayerAnimation']; 7、旋转效果灯光扫动,花朵旋转等旋转效果,都可以transform的rotation.z属性来实现; CAKeyframeAnimation* rotationAnimation; rotationAnimation = [CAKeyframeAnimation animationWithKeyPath:@'transform.rotation.z']; rotationAnimation.values = @[@(M_PI / 12), @(M_PI / 3), @(M_PI / 12)]; rotationAnimation.duration = 2.5; rotationAnimation.fillMode = kCAFillModeBoth; rotationAnimation.calculationMode = kCAAnimationCubic; // rotationAnimation.cumulative = YES; rotationAnimation.repeatCount = HUGE_VALF; [self.mLightLeftView.layer addAnimation:rotationAnimation forKey:@'rotationAnimation']; 8、帧动画某些复杂动画不是靠对原始图像操作进行操作就能实现,这时候就要用到帧动画;
NSMutableArray<UIImage *> *images = [NSMutableArray<UIImage *> array]; for (int i = 0; i < 6; i) { UIImage *img = [[AnimationImageCache shareInstance] getDriveImageWithName:[NSString stringWithFormat:@'gift_animation_angel_phoenix%d.png', i]]; if (img) { [images addObject:img]; } } self.mAngelPhoenixView.image = [[AnimationImageCache shareInstance] getDriveImageWithName:@'gift_animation_angel_phoenix0.png']; self.mAngelPhoenixView.animationImages = images; self.mAngelPhoenixView.animationDuration = 0.8; self.mAngelPhoenixView.animationRepeatCount = 1; [self.mAngelPhoenixView startAnimating]; 总结UIView的block动画中,completion持有的是强引用,需要避免造成循环引用。
天使动画的图片大小为900KB,运行时占内存15MB,播放完毕后,如果收到内存不足的警告会释放内存; 烟花动画的图片大小为400KB,运行时占用的内存为20MB,播放完毕后,会马上释放内存;
1218 人转发iOS朋友圈
有意思啊 还要错过关注我? |
|
来自: 昵称40795092 > 《OC》