可以玩的UI-iOS交互式动画
本篇通过一个例子演示CABasicAnimation 的使用,及交互式动画的实现原理。
首先看下最终完成的效果:
完成效果演示
头像由矩形动画变成圆形,整个过程可以用手指移动来控制,我们一步一步来实现它,let’s GO!
首先实例一个头像 layer:
float w = 120.0;self.headerLayer = [CALayer layer];self.headerLayer.frame = CGRectMake(0, 0, w, w);self.headerLayer.position = CGPointMake((200 - w) / 2, (200 - w) / 2);self.headerLayer.anchorPoint = CGPointMake(0, 0.5);self.headerLayer.contents = (__bridge id)[UIImage imageNamed:@"head.jpg"].CGImage;self.headerLayer.masksToBounds = YES;self.headerLayer.cornerRadius = 0.0;[self.containerView.layer addSublayer:self.headerLayer];
在这里,裁剪圆角主要用 cornerRadius 来完成,初始化为没有圆角。
接下来设置动画,在动画之前,先让动画暂停,否则动画设置完后会自动播放:
self.headerLayer.speed = 0.0;
因为我们的动画包含圆角变换,并沿着y轴平移,这两个动画都要在平移手势的控制之下,我们使用组合动画的方式来实现:
CABasicAnimation *animation = [CABasicAnimation animation];animation.keyPath = @"cornerRadius";animation.toValue = @(w / 2);animation.duration = 1.0;CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];positionAnimation.toValue = @(self.headerLayer.position.y - w);positionAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];CAAnimationGroup *animaGroup = [CAAnimationGroup animation];animaGroup.duration = 2.0f;animaGroup.fillMode = kCAFillModeForwards;animaGroup.removedOnCompletion = NO;animaGroup.animations = @[animation, positionAnimation];[self.headerLayer addAnimation:animaGroup forKey:@"Animation"];
最后我们设置手势的解决:
- (void)pan:(UIPanGestureRecognizer *)pan{ CGFloat x = [pan translationInView:self.view].x; x /= 200.0f; CFTimeInterval timeOffset = self.headerLayer.timeOffset; timeOffset = MIN(0.999, MAX(0.0, timeOffset - x)); self.headerLayer.timeOffset = timeOffset; self.titleLabel.layer.timeOffset = timeOffset; [pan setTranslation:CGPointZero inView:self.view];}
手动交互的关键是控制 layer 的 timeOffset,它可以控制当前动画执行的时间偏移量,范围在0~1之间,所以我们要将移动手势的位置和动画的时间点做一个换算。另外注意将手势重置,以保证每次能取得相对于上一次的偏移位置(x)。
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 可以玩的UI-iOS交互式动画
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 可以玩的UI-iOS交互式动画