美文网首页
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