昨天整理整理动画方面的资料,一方面把继承关系弄懂。另外一方面看看这个方面应用在哪里比较多,尝试看一些开源的代码。在练习的过程中,又挖了一个坑。基于动画预览在ios开发很容易呈现效果出来,而在mac 使用NSView来模拟一下,不小心发现NSView 的坐标系和IOS不一样,坐标反过来了。于是查阅了一些关于Mac 软件开发的文档,确实有这样一回事。具体还搞不清楚为什么苹果要搞这么一套坐标系方式。目前知道mac 开发和IOS开发 两者还是有很大区别。打个比方,遇到一个设置背景颜色的,在IOS只需要设置backGroupColor的属性值,而在NSView 则需要在drawRect下才可以设置。
话回过头,昨天继续练习了CABasicAnimation相关,一个淡入淡出的透明度变化的动画,它的应用场景很多,用法很简单,只是需要设置一下时间和变化数值,就可以实现效果。
淡入的数值变化
CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"opacity"];
animation.duration = 0.35;
animation.fromValue =[NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:0.8f];
坐标移动位置的变化
//定义startPos 和endPos的值
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.duration =0.35;
animation.fromValue = [NSValue valueWithCGPoint:startPos];
animation.toValue =[NSValue valueWithCGPoint:endPos];
animation.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
//加入图层
这些用法使用很容易只是需要设置一下即可,而用到这个CAKeyframeAnimation 的时候,原理也很简单。为每一帧添加数值表现变化,就能做出一些动画表现。
如:从A点 移动到B点,再移动到C点 停止。这样一个位置变化的过程,这个
CAKeyframeAnimation 使用会很容易上手。
有个疑惑的是,我在keyTimes设置时间点,在duration也设置了一个时间?这两个时间会不会冲突?当时我疑惑了一阵。在CABasicAnimation duration的时间是很容易理解的。而在CAKeyframeAnimation 这个值和keyTimes 会不会产生冲突?我将其duration 设置很大的时候,这个动画表现得很慢,设置很短的时候表现很快。这样子总体的动画时间还是受这个值影响。
引用
keyTimes:伴随数值(values)数组的时间数组,指定每一个数值的显示时间,时间 开始于0 并以小数增长,终止于1。
这两个值意思可以看出并不一样。
CAKeyframeAnimation *animation =[CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.keyTimes =@[@(0),@(0.5),@(1)];
animation.values =@[[NSValue valueWithCGPoint:startPoint],[NSValue valueWithCGPoint:targetPos],[NSValue valueWithCGPoint:endPos]];
animation.duration = 0.35;
[item.layer addAnimation:animation forKey:@"key"];
之前学过UIView 的视图动画也是非常实用。它可以在完成的事情后处理一些行为,这个就看使用场景如何设定。
对于它变化的属性还是很多,只能在练习过程当中加以整理。
分组动画,可以将多个CABasicAnimation 串起来,组成一个连续动画。
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[animaA,animaB];
group.duration =animaA.duration+animaB.duration;
[self.view addAnimation:group forKey:nil];
这样子一串动画就完成了。