使用 CADisplayLink 'combined' 和 CAMediaTimingFunction 为 UIView 设置动画。 (获得任意曲线)
animate a UIView using CADisplayLink 'combined' with CAMediaTimingFunction. (to get a arbitrary curve)
我正在使用 CADisplayLink
制作视图动画,它只是插入一个值并重绘视图本身。
例如我有一个视图 MyView
并且它有一个 属性 value
,每当设置值时我调用 setNeedsDisplay
并且视图知道要绘制什么。
我使用 CADisplayLink
来制作动画,我希望视图在值之间 'morph'。我通过插入动画开始和停止的值来做到这一点 Value:
- (CGFloat)interpolatedValue:(CGFloat)sourceValue withValue:(CGFloat)targetValue forProgress:(CGFloat)progress;
现在获得线性进展很容易并且获得 'specific curve'(好的)但我希望能够利用 CAMediaTimingFunction
来做到这一点(或其他一些预先存在的逻辑 - 我不'想重新发明轮子' :)
这个很棒的要点 RSTiming
可能对您有用。您可以使用标准 CAMediaTimingFunction 定义计时函数,甚至可以使用 2 个控制点定义贝塞尔曲线来定义自定义函数。
如果我得到了你的设置,你可能会有这样的东西:
ViewController
#import "ViewController.h"
#import "AnimatedView.h"
#include <stdlib.h>
@interface ViewController ()
@property (nonatomic, strong) CADisplayLink *displayLink;
@property (weak, nonatomic) IBOutlet AnimatedView *viewToAnimate;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateFrame)];
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
}
- (void)updateFrame {
[self.viewToAnimate updateAnimation];
}
- (IBAction)updateAnimationTapped:(id)sender {
self.viewToAnimate.value = arc4random_uniform(101) / 100.0;
NSLog(@"Next animation value: %f", self.viewToAnimate.value);
}
@end
动画视图
#import "AnimatedView.h"
#import "RSTimingFunction.h"
@interface AnimatedView()
{
CGFloat _lastValue;
CGFloat _progressStep;
CGFloat _currentProgress;
}
@property (nonatomic, strong) RSTimingFunction *animationProgress;
@end
@implementation AnimatedView
- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
if ((self = [super initWithCoder:aDecoder]))
{
_progressStep = 0.01; // defines animation speed
_currentProgress = 1.0;
self.animationProgress = [RSTimingFunction timingFunctionWithName:kRSTimingFunctionEaseInEaseOut];
}
return self;
}
- (void)setValue:(CGFloat)value {
if (_value != value)
{
_lastValue = _value;
_value = value;
_currentProgress = 0.0;
}
}
- (void)updateAnimation
{
if (_currentProgress > 1.0)
return;
_currentProgress += _progressStep;
CGFloat currentAnimationValue = _lastValue + (_value - _lastValue) * [self.animationProgress valueForX:_currentProgress];
self.alpha = currentAnimationValue; // as an example animate alpha
}
@end
如前所述,您甚至可以设置 2 个控制点来创建以三次贝塞尔曲线为模型的计时函数。
self.animationProgress = [RSTimingFunction timingFunctionWithControlPoint1:CGPointMake(0.6, 0.6) controlPoint2:CGPointMake(0.1, 0.8)];
会产生下面的定时动画(使用CAMediaTimingFunction playground制作)
我正在使用 CADisplayLink
制作视图动画,它只是插入一个值并重绘视图本身。
例如我有一个视图 MyView
并且它有一个 属性 value
,每当设置值时我调用 setNeedsDisplay
并且视图知道要绘制什么。
我使用 CADisplayLink
来制作动画,我希望视图在值之间 'morph'。我通过插入动画开始和停止的值来做到这一点 Value:
- (CGFloat)interpolatedValue:(CGFloat)sourceValue withValue:(CGFloat)targetValue forProgress:(CGFloat)progress;
现在获得线性进展很容易并且获得 'specific curve'(好的)但我希望能够利用 CAMediaTimingFunction
来做到这一点(或其他一些预先存在的逻辑 - 我不'想重新发明轮子' :)
这个很棒的要点 RSTiming
可能对您有用。您可以使用标准 CAMediaTimingFunction 定义计时函数,甚至可以使用 2 个控制点定义贝塞尔曲线来定义自定义函数。
如果我得到了你的设置,你可能会有这样的东西:
ViewController
#import "ViewController.h"
#import "AnimatedView.h"
#include <stdlib.h>
@interface ViewController ()
@property (nonatomic, strong) CADisplayLink *displayLink;
@property (weak, nonatomic) IBOutlet AnimatedView *viewToAnimate;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateFrame)];
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
}
- (void)updateFrame {
[self.viewToAnimate updateAnimation];
}
- (IBAction)updateAnimationTapped:(id)sender {
self.viewToAnimate.value = arc4random_uniform(101) / 100.0;
NSLog(@"Next animation value: %f", self.viewToAnimate.value);
}
@end
动画视图
#import "AnimatedView.h"
#import "RSTimingFunction.h"
@interface AnimatedView()
{
CGFloat _lastValue;
CGFloat _progressStep;
CGFloat _currentProgress;
}
@property (nonatomic, strong) RSTimingFunction *animationProgress;
@end
@implementation AnimatedView
- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
if ((self = [super initWithCoder:aDecoder]))
{
_progressStep = 0.01; // defines animation speed
_currentProgress = 1.0;
self.animationProgress = [RSTimingFunction timingFunctionWithName:kRSTimingFunctionEaseInEaseOut];
}
return self;
}
- (void)setValue:(CGFloat)value {
if (_value != value)
{
_lastValue = _value;
_value = value;
_currentProgress = 0.0;
}
}
- (void)updateAnimation
{
if (_currentProgress > 1.0)
return;
_currentProgress += _progressStep;
CGFloat currentAnimationValue = _lastValue + (_value - _lastValue) * [self.animationProgress valueForX:_currentProgress];
self.alpha = currentAnimationValue; // as an example animate alpha
}
@end
如前所述,您甚至可以设置 2 个控制点来创建以三次贝塞尔曲线为模型的计时函数。
self.animationProgress = [RSTimingFunction timingFunctionWithControlPoint1:CGPointMake(0.6, 0.6) controlPoint2:CGPointMake(0.1, 0.8)];
会产生下面的定时动画(使用CAMediaTimingFunction playground制作)