iOS基本動畫/關鍵幀動畫/利用緩動函數實現物理動畫效果
先說下基本動畫部分
基本動畫部分比較簡單, 但能實現的動畫效果也很局限
使用方法大致為:
#1. 創建原始UI或者畫面
#2. 創建CABasicAnimation實例, 并設置keypart/duration/fromValue/toValue
#3. 設置動畫最終停留的位置
#4. 將配置好的動畫添加到layer層中
舉個例子, 比如實現一個圓形從上往下移動, 上代碼:
//設置原始畫面 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; showView.layer.masksToBounds = YES; showView.layer.cornerRadius = 50.f; showView.layer.backgroundColor = [UIColor redColor].CGColor; [self.view addSubview:showView]; //創建基本動畫 CABasicAnimation *basicAnimation = [CABasicAnimation animation]; //設置屬性 basicAnimation.keyPath = @"position"; basicAnimation.duration = 4.0f; basicAnimation.fromValue = [NSValue valueWithCGPoint:showView.center]; basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(50, 300)]; //設置動畫結束位置 showView.center = CGPointMake(50, 300); //添加動畫到layer層 [showView.layer addAnimation:basicAnimation forKey:nil];
接下來說下關鍵幀動畫
其實跟基本動畫差不多, 只是能設置多個動畫路徑 使用方法也類似, 大致為
#1. 創建原始UI或者畫面
#2. 創建CAKeyframeAnimation實例, 并設置keypart/duration/values 相比基本動畫只能設置開始和結束點, 關鍵幀動畫能添加多個動畫路徑點
#3. 設置動畫最終停留的位置
#4. 將配置好的動畫添加到layer層中
舉個例子, 紅色圓形左右晃動往下墜落 上代碼:
//設置原始畫面 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; showView.layer.masksToBounds = YES; showView.layer.cornerRadius = 50.f; showView.layer.backgroundColor = [UIColor redColor].CGColor; [self.view addSubview:showView]; //創建關鍵幀動畫 CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation]; //設置動畫屬性 keyFrameAnimation.keyPath = @"position"; keyFrameAnimation.duration = 4.0f; keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center], [NSValue valueWithCGPoint:CGPointMake(100, 100)], [NSValue valueWithCGPoint:CGPointMake(50, 150)], [NSValue valueWithCGPoint:CGPointMake(200, 200)]]; //設置動畫結束位置 showView.center = CGPointMake(200, 200); //添加動畫到layer層 [showView.layer addAnimation:keyFrameAnimation forKey:nil];
最后是利用緩動函數配合關鍵幀動畫實現比較復雜的物理性動畫
先說說什么是緩動函數, 就是有高人寫了一個庫可以計算出模擬物理性動畫(比如彈簧效果)所要的路徑
Github地址: https://github.com/YouXianMing/EasingAnimation
具體有哪些動畫效果可看庫中的緩動函數查詢表, 簡單舉個小球落地的效果
上代碼:
//設置原始畫面 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; showView.layer.masksToBounds = YES; showView.layer.cornerRadius = 50.f; showView.layer.backgroundColor = [UIColor redColor].CGColor; [self.view addSubview:showView]; //創建關鍵幀動畫 CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation]; //設置動畫屬性 keyFrameAnimation.keyPath = @"position"; keyFrameAnimation.duration = 4.0f; //關鍵處, 在這里使用的緩動函數計算點路徑 keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center toPoint:CGPointMake(50, 300) func:BounceEaseOut frameCount:4.0f * 30]; //設置動畫結束位置 showView.center = CGPointMake(50, 300); //添加動畫到layer層 [showView.layer addAnimation:keyFrameAnimation forKey:nil];
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
