动画速度(缓冲 10.1) - iOS

TOP

动画速度(缓冲 10.1)(二)

2017-10-11 13:57:46 【大中小】浏览:3288次

同，为了改变UIView动画的缓冲选项，给options参数添加如下常量之一：

1 UIViewAnimationOptionCurveEaseInOut 
2 UIViewAnimationOptionCurveEaseIn 
3 UIViewAnimationOptionCurveEaseOut 
4 UIViewAnimationOptionCurveLinear

它们和CAMediaTimingFunction紧密关联，UIViewAnimationOptionCurveEaseInOut是默认值（这里没有kCAMediaTimingFunctionDefault相对应的值了）。

具体使用方法见清单10.2（注意到这里不再使用UIView额外添加的图层，因为UIKit的动画并不支持这类图层）。

清单10.2 使用UIKit动画的缓冲测试工程

@interface ViewController ()

@property (nonatomic, strong) UIView *colorView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //create a red layer
    self.colorView = [[UIView alloc] init];
    self.colorView.bounds = CGRectMake(0, 0, 100, 100);
    self.colorView.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
    self.colorView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.colorView];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //perform the animation
    [UIView animateWithDuration:1.0 delay:0.0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                            //set the position
                            self.colorView.center = [[touches anyObject] locationInView:self.view];
                        }
                     completion:NULL];

}

@end

View Code

缓冲和关键帧动画

或许你会回想起第八章里面颜色切换的关键帧动画由于线性变换的原因（见清单8.5）看起来有些奇怪，使得颜色变换非常不自然。为了纠正这点，我们来用更加合适的缓冲方法，例如kCAMediaTimingFunctionEaseIn，给图层的颜色变化添加一点脉冲效果，让它更像现实中的一个彩色灯泡。

我们不想给整个动画过程应用这个效果，我们希望对每个动画的过程重复这样的缓冲，于是每次颜色的变换都会有脉冲效果。

CAKeyframeAnimation有一个NSArray类型的timingFunctions属性，我们可以用它来对每次动画的步骤指定不同的计时函数。但是指定函数的个数一定要等于keyframes数组的元素个数减一，因为它是描述每一帧之间动画速度的函数。

在这个例子中，我们自始至终想使用同一个缓冲函数，但我们同样需要一个函数的数组来告诉动画不停地重复每个步骤，而不是在整个动画序列只做一次缓冲，我们简单地使用包含多个相同函数拷贝的数组就可以了（见清单10.3）。

运行更新后的代码，你会发现动画看起来更加自然了。

清单10.3 对CAKeyframeAnimation使用CAMediaTimingFunction

 1 @interface ViewController ()
 2 
 3 @property (nonatomic, weak) IBOutlet UIView *layerView;
 4 @property (nonatomic, weak) IBOutlet CALayer *colorLayer;
 5 
 6 @end
 7 
 8 @implementation ViewController
 9 
10 - (void)viewDidLoad
11 {
12     [super viewDidLoad];
13     //create sublayer
14     self.colorLayer = [CALayer layer];
15     self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
16     self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
17     //add it to our view
18     [self.layerView.layer addSublayer:self.colorLayer];
19 }
20 
21 - (IBAction)changeColor
22 {
23     //create a keyframe animation
24     CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
25     animation.keyPath = @"backgroundColor";
26     animation.duration = 2.0;
27     animation.values = @[
28                          (__bridge id)[UIColor blueColor].CGColor,
29                          (__bridge id)[UIColor redColor].CGColor,
30                          (__bridge id)[UIColor greenColor].CGColor,
31                          (__bridge id)[UIColor blueColor].CGColor ];
32     //add timing function
33     CAMediaTimingFunction *fn = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
34     animation.timingFunctions = @[fn, fn, fn];
35     //apply animation to layer
36     [self.colorLayer addAnimation:animation forKey:nil];
37 }
38 
39 @end

View Code

首页上一页 1 2 下一页尾页 2/2/2
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：在动画过程中取消动画(显式动画)	下一篇：物理模拟(基于定时器的动画 11.2)