缓动函数与关键帧动画

缓动函数与关键帧动画

缓动函数指定动画效果在执行时的速度，使其看起来更加真实。

现实物体照着一定节奏移动，并不是一开始就移动很快的。当我们打开抽屉时，首先会让它加速，然后慢下来。当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。

http://easings.net/zh-cn

缓动函数能让动画效果看起来更加真实:).

iOS开发中,能用到缓动函数的地方就属于关键帧动画了,以下是我用关键帧动画做出来的模拟真实时钟效果的动画,效果相当逼真哦,只是这个gif图片的效果不好而已.

- (void)viewDidLoad

 [super viewDidLoad];

 // 显示参考用的view

 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 20, 300, 300)];

 showView.layer.borderWidth = 1.f;

 showView.layer.cornerRadius = 150.f;

 showView.layer.borderColor = [UIColor redColor].CGColor;

 showView.center = self.view.center;

 [self.view addSubview:showView];

 // 新建layer

 CALayer *layer = [CALayer layer];

 layer.backgroundColor = [UIColor blackColor].CGColor;

 // 重置锚点

 layer.anchorPoint = CGPointMake(0.f, 0.f);

 // 设置layer的frame值(在showView正中间摆放)

 layer.frame = CGRectMake(showView.middleX, showView.middleY, 1, 150);

 // 添加进showView中

 [showView.layer addSublayer:layer];

 // 定时器

 _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];

 [_timer event:^{

 static int i = 1;

 // 计算好起始值,结束值

 CGFloat oldValue = DEGREES_TO_RADIANS((360/60.f) * i++);

 CGFloat newValue = DEGREES_TO_RADIANS((360/60.f) * i);

 // 关键帧动画

 CAKeyframeAnimation *animation = \

 [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];

 // 设置值

 [animation setValues:[YXEasing calculateFrameFromValue:oldValue

 toValue:newValue

 func:ElasticEaseOut

 frameCount:500]];

 // 设置持续时间

 animation.duration = 0.5f;



核心代码(设置值的地方为本人自己所写,需要你自己实现哦)



是不是很容易呢:)

 

小结:

其实,关键帧动画与基本动画类型没有什么区别,要说区别,那就是关键帧动画要比普通动画更强大,因为它能设置更多的值嘛,普通动画可以实现的效果都可以用关键帧动画替换哦.



 

 


  WPF中的动画——（四）缓动函数 

 原文:WPF中的动画——（四）缓动函数

缓动函数可以通过一系列公式模拟一些物理效果，如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上，可以使得其动画更加平滑。

    var widthAnimation = new DoubleAnimation()    {    ...