美文网首页
CAKeyAnimation动画 练习 拍皮球及弹跳动画

CAKeyAnimation动画 练习 拍皮球及弹跳动画

作者: zp秋枫暮霞 | 来源:发表于2017-04-12 00:05 被阅读76次

创建拍皮球动画

  • 创建个皮球的ImageView(好吧,这是废话!!)及声明需要的变量
@property (nonatomic,strong)UIImageView *ballImage;
{
    __block NSMutableArray *values;  //存储动画的关键点
    __block  NSMutableArray *funs;   //存储对应关键点的动画方式kCAMediaTimingFunctionEaseIn kCAMediaTimingFunctionEaseOut
}

  • 设置imageView 的center(注:因为使用的是position动画 所以需要定义center)
  • 设计皮球弹起的公式,并生成数值代码如下
    __block float ballHeight=self.view.frame.size.height-40-self.ballImage.center.y;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        values=[[NSMutableArray alloc]init];
        funs=[[NSMutableArray alloc]init];
        while (ballHeight>10) { 
            ballHeight=  ballHeight/3*2;  //每次弹起是上次的2/3
            //一个弹跳 kCAMediaTimingFunctionEaseIn kCAMediaTimingFunctionEaseOut
            [values addObject:[NSValue valueWithCGPoint:CGPointMake(100, self.view.frame.size.height-40)]];
            [funs addObject:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
            
            
            [values addObject:[NSValue valueWithCGPoint:CGPointMake(100, self.view.frame.size.height-40-ballHeight)]];
            [funs addObject:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
            
            
        }

    });

  • 创建一个CAKeyframeAnimation的实例,及设置属性该demo涉及到的属性有keyPath、duration、values、timingFunctions;
    CAKeyframeAnimation *keyAnimation=[CAKeyframeAnimation animation];
    keyAnimation.keyPath=@"position";   //设置layer动画的属性
    keyAnimation.duration=0.35*values.count; //设置动画的持续时间
    keyAnimation.values=values;       //设置动画的关键点
    keyAnimation.timingFunctions=funs;  //设置动画的类型
    self.ballImage.layer.position=CGPointMake(100, self.view.frame.size.height-40);
    [self.ballImage.layer addAnimation:keyAnimation forKey:nil];

效果展示


QQ20170411-235714.gif

ok完成!

相关文章

网友评论

      本文标题:CAKeyAnimation动画 练习 拍皮球及弹跳动画

      本文链接:https://www.haomeiwen.com/subject/vidpattx.html