博客> ios弹球效果与帧动画的理解
ios弹球效果与帧动画的理解
2017-09-22 19:56 评论:0 阅读:1156 liweijiedavid
ios 帧动画
    才疏学浅,抛砖引玉,稍探对帧动画的应用理解,纯属自己感悟,还请多多指教。多多学习。 要实现的效果。 实现的是一个简单的弹球效果,球从一个高度落下会在地面上多次弹跳,最终静止的效果。

 3.gif

   如果不懂ios动画的实现,思考怎么去实现这种效果。相似的事物总有相似点,只要细心留意,仔细思考,总会找到相似事物的发展规律,不仅历史总是惊人的相似,类似事物的发展、结构、结局也会有相似的地方,生活就是最好的老师,理解原理,抓住本质。一不小心跑题了。
   对与上面动画的例子,我们可以想到一些生活中一些相似的场景,毕竟相似就有共同点,万变不离其宗。它是动态的,我们可以联想到老式的胶片机,通过不断连接一帧一帧的画面,来实现播放电影画面的效果,或者还提时代那种小人书,快速的翻动每一页,让我们感受到动态的快乐等等,那么对于该例子,ios提供了一种CoreAnimation中的CAKeyframeAnimation方法来实现,当然,可以通过其它方法。
   如果我们不知道CAKeyframeAnimation有什么属性,通过分析胶片机、小人书的实现方式,我们很容易的分析到,他们是通过快速的播放每个的画面,在我们眼睛不能够分辨每一帧具体的位置的时候,就进入到了下一个画面。所以,首先,我们需要一个存储帧页面的一个数组,这时候,你或许有了疑问,打篮球的时候,篮球不变,通过快速运动,也让我们感觉动态,如果想到这种情况,那么很自然而然的就明白了,要分两种情况。
   而CAKeyframeAnimation中有两种重要的属性,path与values。
   1. path。这是一个 CGPathRef  对象,默认是空的,当我们创建好CAKeyframeAnimation的实例的时候,可以通过制定一个自己定义的path来让  某一个物体按照这个路径进行动画。这个值默认是nil  当其被设定的时候  values  这个属性就被覆盖 。
   2. values是一个数组,提供了一组关键帧的值,  当使用path的 时候 values的值自动被忽略。
   总之,在CAKeyframeAnimation的天下里,path与values不能呈平分天下之势,必须是一人的天下,有你没我。当然,CAKeyframeAnimation还有其它的属性,比如设置时间,动画状态等。重要的是实现方法与思路。属性可以慢慢补充,慢慢学习。
    那么对与该例子,你可能会想到运用path,绘制path路径来实现,确实path绘制路径,可以实现这种只是路径变化的场景。但是事物没有唯一,多少都有想通,本文利用values的方式实现,存储的是球view的position。
       //creat keyfram animation
CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 1.0;
animation.delegate = self;
animation.values = @[
                     [NSValue valueWithCGPoint:CGPointMake(150, 32)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 268)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 140)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 268)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 220)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 268)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 250)],
                     [NSValue valueWithCGPoint:CGPointMake(150, 268)]
                     ];

animation.timingFunctions = @[
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                              [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn]
                              ];

animation.keyTimes = @[@0.0, @0.3, @0.5, @0.7, @0.8, @0.9, @0.95, @1.0];  //时间限制
//apply animation
self.ballView.layer.position = CGPointMake(150, 268);
[self.ballView.layer addAnimation:animation forKey:nil];

   值的注意的是一定要加上 animation.keyPath = @"position";因为animation.values存储的是来位置数组。通过存储的位置数组来实现小球的动画效果。CAMediaTimingFunction可以实现动画速度何时快慢匀速等。当然在

CAKeyframeAnimation里也可以实现一些动画效果,比如 kCATransitionFade淡出;kCATransitionMoveIn覆盖原图;kCATransitionPush推出; kCATransitionReveal底部显出来以及动画方向等。 除此之外,可以使用fromValue 、toValue的思想,来实现这种效果。将不断改变的fromValue 、toValue值转化成对应的坐标,利用 animation.values = frames;来实现,注意也是需要加上animation.keyPath = @"position";的。 多指教,多学习,身体健康,工作顺利。

收藏
2
sina weixin mail 回到顶部