zoukankan      html  css  js  c++  java
  • ios(CoreAnimation核心动画 ) CABasicAnimation动画与锚点

    一、position和anchorPoint


    position:用来设置CALayer在父层中的位置,以父层的左上角为原点(0, 0)

    anchorPoint(锚点):

    称为“定位点”、“锚点”

    决定着CALayer身上的哪个点会在position属性所指的位置

    以自己的左上角为原点(0, 0)

    它的x、y取值范围都是0~1,默认值为(0.5, 0.5)

    推荐一个连接:http://www.cnblogs.com/wendingding/p/3800736.html讲的非常详细,而且有图视,默认的锚点为中心点:(0.5,0.5),如果重新设置了锚点,运行动画的时候会发现整个控件移动了,所以在设置锚点的时候需要重新设置position,

    CGPoint oldAnchorPoint = _homeBtn.layer.anchorPoint;

    _homeBtn.layer.anchorPoint =CGPointMake(0.5,0);

    [_homeBtn.layersetPosition:CGPointMake(_homeBtn.layer.position.x + _homeBtn.layer.bounds.size.width * (_homeBtn.layer.anchorPoint.x - oldAnchorPoint.x),_homeBtn.layer.position.y +_homeBtn.layer.bounds.size.height * (_homeBtn.layer.anchorPoint.y - oldAnchorPoint.y))];


    二:CABasicAnimation的使用

    当你创建一个 CABasicAnimation 时,你需要通过-setFromValue 和-setToValue 来指定一个开始值和结束值。 当你增加基础动画到层中的时候,它开始运行。

    Autoreverses

    当你设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到 开始的值。

    Duration
    Duration 这个参数你已经相当熟悉了。它设定开始值到结束值花费的时间。期间会被速度的属性所影响。 RemovedOnCompletion
    这个属性默认为 YES,那意味着,在指定的时间段完成后,动画就自动的从层上移除了。这个一般不用。

    假如你想要再次用这个动画时,你需要设定这个属性为 NO。这样的话,下次你在通过-set 方法设定动画的属 性时,它将再次使用你的动画,而非默认的动画。

    Speed

    默认的值为 1.0.这意味着动画播放按照默认的速度。如果你改变这个值为 2.0,动画会用 2 倍的速度播放。 这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟---一半的 持续时间。

    BeginTime

    这个属性在组动画中很有用。它根据父动画组的持续时间,指定了开始播放动画的时间。默认的是 0.0.组 动画在下个段落中讨论“Animation Grouping”。

    TimeOffset

    如果一个时间偏移量是被设定,动画不会真正的可见,直到根据父动画组中的执行时间得到的时间都流逝 了。

    RepeatCount

    默认的是 0,意味着动画只会播放一次。如果指定一个无限大的重复次数,使用 1e100f。这个不应该和 repeatDration 属性一块使用。

    RepeatDuration

    这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间流逝完。它不应该和 repeatCount 一起使用。

    示例代码:

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
        CGPoint fromPoint = self.testImage.center;
         
        //路径曲线controlPoint为基准点
        UIBezierPath * movePath = [UIBezierPath bezierPath];
        [movePath moveToPoint:fromPoint];
        CGPoint toPoint = CGPointMake(300, 460);
        [movePath addQuadCurveToPoint:toPoint controlPoint:CGPointMake(300, 0)];
         
        //关键帧  设置动画路径
        CAKeyframeAnimation * moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //    moveAnimation.path = movePath.CGPath;
        moveAnimation.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 100)],[NSValue valueWithCGPoint:CGPointMake(100, 300)],[NSValue valueWithCGPoint:CGPointMake(300, 300)],[NSValue valueWithCGPoint:CGPointMake(300, 100)]];
        moveAnimation.removedOnCompletion = YES;
         
        //缩放变化
        CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
        scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
        scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
        scaleAnimation.removedOnCompletion = YES;
         
    //    //透明度变化
    //    CABasicAnimation * opacityAnimation = [CABasicAnimation animationWithKeyPath:@"alpha"];
    //    opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    //    opacityAnimation.toValue = [NSNumber numberWithFloat:0.1];
    //    opacityAnimation.removedOnCompletion = YES;
         
        //旋转
        CABasicAnimation * tranformAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
        tranformAnimation.fromValue = [NSNumber numberWithFloat:0.f];
        tranformAnimation.toValue = [NSNumber numberWithFloat:M_PI];
        tranformAnimation.cumulative = YES;
        tranformAnimation.removedOnCompletion = YES;
         
        CAAnimationGroup*animaGroup = [CAAnimationGroup animation];
        animaGroup.animations = @[moveAnimation,scaleAnimation,tranformAnimation];
        animaGroup.duration = 2.f;

    可以通过改变animationWithKeyPath来改变动画:

    transform.scale = 比例轉換

    transform.scale.x = 闊的比例轉換

    transform.scale.y = 高的比例轉換

    transform.rotation.z = 平面圖的旋轉

    opacity = 透明度

    margin

    zPosition

    backgroundColor 背景颜色

    cornerRadius 圆角

    borderWidth

    bounds

    contents

    contentsRect

    cornerRadius

    frame

    hidden

    mask

    masksToBounds

    opacity

    position

    shadowColor

    shadowOffset

    shadowOpacity

    shadowRadius



    58同城客户端,tabbar的点击的动画效果,就可以通过设置CABasicAnimation属性来做,个人花了一个小时的时间搞定,证明完全可以实现,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    CGPoint oldAnchorPoint =  _homeBtn.layer.anchorPoint;
       _homeBtn.layer.anchorPoint = CGPointMake(0.5, 0);
        [_homeBtn.layer setPosition:CGPointMake(_homeBtn.layer.position.x + _homeBtn.layer.bounds.size.width * (_homeBtn.layer.anchorPoint.x - oldAnchorPoint.x), _homeBtn.layer.position.y + _homeBtn.layer.bounds.size.height * (_homeBtn.layer.anchorPoint.y - oldAnchorPoint.y))];
        
        
       CABasicAnimation*shakeAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
        
       shakeAnimation.duration = 0.07;
       shakeAnimation.autoreverses = YES;//当你设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到 开始的值。
       shakeAnimation.repeatCount = 2;
       shakeAnimation.removedOnCompletion = NO;
       shakeAnimation.fromValue = [NSNumber  numberWithFloat:-0.05];
       shakeAnimation.toValue = [NSNumber  numberWithFloat:0.05];
        
       [self.homeBtn.layer addAnimation:shakeAnimation forKey:@"shakeAnimation"];
  • 相关阅读:
    Go 语言简介(下)— 特性
    Array.length vs Array.prototype.length
    【转】javascript Object使用Array的方法
    【转】大话程序猿眼里的高并发架构
    【转】The magic behind array length property
    【转】Build Your own Simplified AngularJS in 200 Lines of JavaScript
    【转】在 2016 年做 PHP 开发是一种什么样的体验?(一)
    【转】大话程序猿眼里的高并发
    php通过token验证表单重复提交
    windows 杀进程软件
  • 原文地址:https://www.cnblogs.com/bao-yu/p/5444993.html
Copyright © 2011-2022 走看看