我在iOS中很好地CALayer為CGPath（QuadCurve）設(shè)置了動(dòng)畫。但是我想使用比Apple 提供的少數(shù)幾個(gè)有趣的緩動(dòng)功能（EaseIn / EaseOut等）。例如，反彈功能或彈性功能。這些事情可能與MediaTimingFunction（貝塞爾曲線）有關(guān)：但我想創(chuàng)建更復(fù)雜的計(jì)時(shí)功能。問(wèn)題在于媒體計(jì)時(shí)似乎需要一個(gè)三次方貝塞爾曲線，而這個(gè)貝塞爾曲線不夠強(qiáng)大，無(wú)法產(chǎn)生以下效果：該代碼創(chuàng)建上面是很簡(jiǎn)單的在其他框架中，這使得這個(gè)非常令人沮喪。請(qǐng)注意，這些曲線是將輸入時(shí)間映射到輸出時(shí)間（Tt曲線），而不是時(shí)間位置曲線。例如，easeOutBounce（T）= t返回一個(gè)新的t。然后，該t用于繪制運(yùn)動(dòng)（或我們應(yīng)該設(shè)置動(dòng)畫的任何屬性）。因此，我想創(chuàng)建一個(gè)復(fù)雜的自定義，CAMediaTimingFunction但是我不知道如何執(zhí)行此操作，或者是否有可能？還有其他選擇嗎？編輯：這是步驟的具體示例。很有教育意義:)我想沿著從點(diǎn)a到b的直線為對(duì)象設(shè)置動(dòng)畫，但是我希望它使用上面的easeOutBounce曲線“反彈”其沿直線的運(yùn)動(dòng)。這意味著它將遵循從a到b的精確線，但是將比使用當(dāng)前基于貝塞爾的CAMediaTimingFunction可能的方式更加復(fù)雜地加速和減速。讓該線成為CGPath指定的任意曲線移動(dòng)。它仍應(yīng)沿該曲線移動(dòng)，但應(yīng)與直線示例相同的方式加速和減速。從理論上講，我認(rèn)為它應(yīng)該像這樣工作：讓我們將運(yùn)動(dòng)曲線描述為關(guān)鍵幀動(dòng)畫move（t）= p，其中t是時(shí)間[0..1]，p是在時(shí)間t計(jì)算的位置。因此，move（0）返回曲線起點(diǎn)的位置，move（0.5）精確地到達(dá)中間，而move（1）結(jié)束。使用時(shí)間函數(shù)time（T）= t提供t的移動(dòng)值應(yīng)該給我我想要的。為了產(chǎn)生彈跳效果，計(jì)時(shí)功能應(yīng)針對(duì)time（0.8）和time（0.8）返回相同的t值（只是一個(gè)例子）。只需替換計(jì)時(shí)功能即可獲得不同的效果。（是的，可以通過(guò)創(chuàng)建和連接來(lái)回移動(dòng)的四個(gè)線段來(lái)進(jìn)行跳線，但這不是必須的。畢竟，它只是一個(gè)簡(jiǎn)單的線性函數(shù)，將時(shí)間值映射到位置。）我希望我在這里有意義。
3 回答
慕后森
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
我找到了這個(gè)：
可可與愛(ài)-核心動(dòng)畫中的參數(shù)加速曲線
但是我認(rèn)為可以通過(guò)使用塊使其變得更簡(jiǎn)單，更易讀。因此，我們可以在CAKeyframeAnimation上定義一個(gè)類別，如下所示：
CAKeyframeAnimation + Parametric.h：
// this should be a function that takes a time value between
// 0.0 and 1.0 (where 0.0 is the beginning of the animation
// and 1.0 is the end) and returns a scale factor where 0.0
// would produce the starting value and 1.0 would produce the
// ending value
typedef double (^KeyframeParametricBlock)(double);
@interface CAKeyframeAnimation (Parametric)
+ (id)animationWithKeyPath:(NSString *)path
function:(KeyframeParametricBlock)block
fromValue:(double)fromValue
toValue:(double)toValue;
CAKeyframeAnimation + Parametric.m：
@implementation CAKeyframeAnimation (Parametric)
+ (id)animationWithKeyPath:(NSString *)path
function:(KeyframeParametricBlock)block
fromValue:(double)fromValue
toValue:(double)toValue {
// get a keyframe animation to set up
CAKeyframeAnimation *animation =
[CAKeyframeAnimation animationWithKeyPath:path];
// break the time into steps
// (the more steps, the smoother the animation)
NSUInteger steps = 100;
NSMutableArray *values = [NSMutableArray arrayWithCapacity:steps];
double time = 0.0;
double timeStep = 1.0 / (double)(steps - 1);
for(NSUInteger i = 0; i < steps; i++) {
double value = fromValue + (block(time) * (toValue - fromValue));
[values addObject:[NSNumber numberWithDouble:value]];
time += timeStep;
}
// we want linear animation between keyframes, with equal time steps
animation.calculationMode = kCAAnimationLinear;
// set keyframes and we're done
[animation setValues:values];
return(animation);
}
@end
現(xiàn)在用法將如下所示：
// define a parametric function
KeyframeParametricBlock function = ^double(double time) {
return(1.0 - pow((1.0 - time), 2.0));
};
if (layer) {
[CATransaction begin];
[CATransaction
setValue:[NSNumber numberWithFloat:2.5]
forKey:kCATransactionAnimationDuration];
// make an animation
CAAnimation *drop = [CAKeyframeAnimation
animationWithKeyPath:@"position.y"
function:function fromValue:30.0 toValue:450.0];
// use it
[layer addAnimation:drop forKey:@"position"];
[CATransaction commit];
}
我知道這可能不像您想要的那么簡(jiǎn)單，但這只是一個(gè)開(kāi)始。
繁星coding
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個(gè)贊
從iOS 10開(kāi)始，可以使用兩個(gè)新的計(jì)時(shí)對(duì)象更輕松地創(chuàng)建自定義計(jì)時(shí)功能。
1）UICubicTimingParameters允許將三次貝塞爾曲線定義為緩動(dòng)函數(shù)。
let cubicTimingParameters = UICubicTimingParameters(controlPoint1: CGPoint(x: 0.25, y: 0.1), controlPoint2: CGPoint(x: 0.25, y: 1))
let animator = UIViewPropertyAnimator(duration: 0.3, timingParameters: cubicTimingParameters)
或僅在動(dòng)畫設(shè)計(jì)器初始化時(shí)使用控制點(diǎn)
let controlPoint1 = CGPoint(x: 0.25, y: 0.1)
let controlPoint2 = CGPoint(x: 0.25, y: 1)
let animator = UIViewPropertyAnimator(duration: 0.3, controlPoint1: controlPoint1, controlPoint2: controlPoint2)?
這項(xiàng)很棒的服務(wù)將幫助您為曲線選擇控制點(diǎn)。
2）UISpringTimingParameters使開(kāi)發(fā)人員可以控制阻尼比，質(zhì)量，剛度和初始速度來(lái)創(chuàng)建所需的彈簧性能。
let velocity = CGVector(dx: 1, dy: 0)
let springParameters = UISpringTimingParameters(mass: 1.8, stiffness: 330, damping: 33, initialVelocity: velocity)
let springAnimator = UIViewPropertyAnimator(duration: 0.0, timingParameters: springParameters)
持續(xù)時(shí)間參數(shù)仍在Animator中顯示，但在春季計(jì)時(shí)中將被忽略。
如果這兩個(gè)選項(xiàng)還不夠，您還可以通過(guò)確認(rèn)UITimingCurveProvider協(xié)議來(lái)實(shí)現(xiàn)自己的時(shí)序曲線。
白板的微信
TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊
創(chuàng)建自定義計(jì)時(shí)功能的一種方法是使用CAMediaTimingFunction中的functionWithControlPoints ::::工廠方法（也有相應(yīng)的initWithControlPoints :::: init方法）。這是為您的計(jì)時(shí)功能創(chuàng)建貝塞爾曲線。它不是任意曲線，但貝塞爾曲線非常有力且靈活。掌握控制點(diǎn)需要一些實(shí)踐。提示：大多數(shù)繪圖程序都可以創(chuàng)建貝塞爾曲線。進(jìn)行這些操作將使您對(duì)用控制點(diǎn)表示的曲線產(chǎn)生視覺(jué)反饋。
在這個(gè)鏈接指向蘋果的文檔。關(guān)于如何從曲線構(gòu)造預(yù)構(gòu)建函數(shù)的內(nèi)容很簡(jiǎn)短，但很有用。
編輯：以下代碼顯示了一個(gè)簡(jiǎn)單的反彈動(dòng)畫。為此，我創(chuàng)建了一個(gè)合成的計(jì)時(shí)函數(shù)（值和計(jì)時(shí) NSArray屬性），并為動(dòng)畫的每個(gè)片段賦予了不同的時(shí)間長(zhǎng)度（keytimes屬性）。這樣，您可以合成貝塞爾曲線以為動(dòng)畫合成更復(fù)雜的時(shí)序。這是一篇有關(guān)此類動(dòng)畫的好文章，并提供了不錯(cuò)的示例代碼。
- (void)viewDidLoad {
UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];
v.backgroundColor = [UIColor redColor];
CGFloat y = self.view.bounds.size.height;
v.center = CGPointMake(self.view.bounds.size.width/2.0, 50.0/2.0);
[self.view addSubview:v];
//[CATransaction begin];
CAKeyframeAnimation * animation;
animation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
animation.duration = 3.0;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
NSMutableArray *values = [NSMutableArray array];
NSMutableArray *timings = [NSMutableArray array];
NSMutableArray *keytimes = [NSMutableArray array];
//Start
[values addObject:[NSNumber numberWithFloat:25.0]];
[timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];
[keytimes addObject:[NSNumber numberWithFloat:0.0]];
//Drop down
[values addObject:[NSNumber numberWithFloat:y]];
[timings addObject:GetTiming(kCAMediaTimingFunctionEaseOut)];
[keytimes addObject:[NSNumber numberWithFloat:0.6]];
// bounce up
[values addObject:[NSNumber numberWithFloat:0.7 * y]];
[timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];
[keytimes addObject:[NSNumber numberWithFloat:0.8]];
// fihish down
[values addObject:[NSNumber numberWithFloat:y]];
[keytimes addObject:[NSNumber numberWithFloat:1.0]];
//[timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];
animation.values = values;
animation.timingFunctions = timings;
animation.keyTimes = keytimes;
[v.layer addAnimation:animation forKey:nil];
//[CATransaction commit];
}
- 3 回答
- 0 關(guān)注
- 786 瀏覽
添加回答
舉報(bào)
0/150
提交
取消