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"];
  • 相关阅读:
    新autoJS写淘宝福年种福果
    autoJS写淘宝福年种福果
    简七学理财知识
    python一键搭ftp服务器
    域名伪装
    [SWPU2019]Web1
    [网鼎杯 2020 朱雀组]phpweb
    Doc
    Docker简单使用教程
    MySQL数据库基本操作
  • 原文地址:https://www.cnblogs.com/bao-yu/p/5444993.html
Copyright © 2011-2022 走看看