ios(CoreAnimation核心動畫 一) CABasicAnimation動畫與錨點

來源:互聯網
上載者:User

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 一起使用。

範例程式碼:

    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屬性來做,個人花了一個小時的時間搞定,證明完全可以實現,

 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"];



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.