ios animation 動畫效果實現

1.過渡動畫 CATransitionjava

   CATransition *animation = [CATransition animation];
    
    [animation setDuration:1.0];
    
    [animation setType:kCATransitionFade];
    
    [animation setSubtype:kCATransitionFromLeft];
    
    [_imgPic.layer addAnimation:animation forKey:nil];

說明:git

  (1).Duration 延遲github

  (2).Typeide

    kCATransitionFade      // 交叉淡化過渡(不支持過渡方向)
函數

    kCATransitionMoveIn   // 新視圖移到舊視圖上面佈局

    kCATransitionPush    // 新視圖把舊視圖推出去測試

      kCATransitionReveal   // 將舊視圖移開,顯示下面的新視圖動畫

    cube     // 立方體翻滾效果url

    oglFlip  // 上下左右翻轉效果spa

    suckEffect   // 收縮效果,如一塊布被抽走(不支持過渡方向)

    rippleEffect // 滴水效果(不支持過渡方向)

    pageCurl     // 向上翻頁效果

    pageUnCurl   // 向下翻頁效果

    cameraIrisHollowOpen   // 相機鏡頭打開效果(不支持過渡方向)

    cameraIrisHollowClose  // 相機鏡頭關上效果(不支持過渡方向) 

2.路徑動畫  CAKeyframeAnimation

    CAKeyframeAnimation *ani=[CAKeyframeAnimation animation];
    CGMutablePathRef aPath=CGPathCreateMutable();
    
    CGPathMoveToPoint(aPath, nil, 20, 20);
    CGPathAddCurveToPoint(aPath, nil, 
                          20, 40,
                          220, 40,
                          240, 380);
    
    ani.path=aPath;
    ani.duration=10;
    ani.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    ani.rotationMode=@"autoReverse";
    [redView.layer addAnimation:ani forKey:@"position"];

//特殊曲線 貝塞爾曲線

//貝塞爾曲線路徑
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    [movePath moveToPoint:CGPointMake(0.0, 0.0)];
    [movePath addQuadCurveToPoint:CGPointMake(self.view.frame.size.width/2.0, self.view.frame.size.height/2.0) controlPoint:CGPointMake(self.view.frame.size.width, self.view.frame.size.height)];

說明:(1).moveToPoint :動畫起始位置

   (2).軌跡

   - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

   //endPoint 完成位置  controllerPoint  軌跡中的位置

 3.基本類型  CABasicAnimation 事例

  //背景色動畫
    CABasicAnimation *animation=[CABasicAnimation animation];
    //設置顏色
    animation.toValue=(id)[UIColor blueColor].CGColor;
    //動畫時間
    animation.duration=1;
    //是否反轉變爲原來的屬性值
    animation.autoreverses=YES;
    //把animation添加到圖層的layer中,即可以播放動畫了。forKey指定要應用此動畫的屬性
    [self.view.layer addAnimation:animation forKey:@"backgroundColor"];


//縮放動畫
    CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
    scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    scaleAnim.removedOnCompletion = YES;


//透明動畫
    CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
    opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
    opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
    opacityAnim.removedOnCompletion = YES;

 4. UIViewAnimationWithBlocks

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

// UIViewAnimationOptions

UIViewAnimationOptionLayoutSubviews //提交動畫的時候佈局子控件,表示子控件將和父控件一同動畫。

UIViewAnimationOptionAllowUserInteraction //動畫時容許用戶交流,好比觸摸

UIViewAnimationOptionBeginFromCurrentState //從當前狀態開始動畫

UIViewAnimationOptionRepeat //動畫無限重複

UIViewAnimationOptionAutoreverse //執行動畫迴路,前提是設置動畫無限重複

UIViewAnimationOptionOverrideInheritedDuration //忽略外層動畫嵌套的執行時間

UIViewAnimationOptionOverrideInheritedCurve //忽略外層動畫嵌套的時間變化曲線

UIViewAnimationOptionAllowAnimatedContent //經過改變屬性和重繪實現動畫效果,若是key沒有提交動畫將使用快照

UIViewAnimationOptionShowHideTransitionViews //用顯隱的方式替代添加移除圖層的動畫效果

UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套繼承的選項

//時間函數曲線相關

UIViewAnimationOptionCurveEaseInOut //時間曲線函數,由慢到快

UIViewAnimationOptionCurveEaseIn //時間曲線函數,由慢到特別快

UIViewAnimationOptionCurveEaseOut //時間曲線函數,由快到慢

UIViewAnimationOptionCurveLinear //時間曲線函數,勻速

//轉場動畫相關的

UIViewAnimationOptionTransitionNone //無轉場動畫

UIViewAnimationOptionTransitionFlipFromLeft //轉場從左翻轉

UIViewAnimationOptionTransitionFlipFromRight //轉場從右翻轉

UIViewAnimationOptionTransitionCurlUp //上卷轉場

UIViewAnimationOptionTransitionCurlDown //下卷轉場

UIViewAnimationOptionTransitionCrossDissolve //轉場交叉消失

UIViewAnimationOptionTransitionFlipFromTop //轉場從上翻轉

UIViewAnimationOptionTransitionFlipFromBottom //轉場從下翻轉

測試demo:https://github.com/lvdachao/animation

相關文章
相關標籤/搜索