我在iOS中很好地CALayer為CGPath（QuadCurve）設置了動畫。但是我想使用比Apple 提供的少數幾個有趣的緩動功能（EaseIn / EaseOut等）。例如，反彈功能或彈性功能。這些事情可能與MediaTimingFunction（貝塞爾曲線）有關：但我想創建更復雜的計時功能。問題在于媒體計時似乎需要一個三次方貝塞爾曲線，而這個貝塞爾曲線不夠強大，無法產生以下效果：該代碼創建上面是很簡單的在其他框架中，這使得這個非常令人沮喪。請注意，這些曲線是將輸入時間映射到輸出時間（Tt曲線），而不是時間位置曲線。例如，easeOutBounce（T）= t返回一個新的t。然后，該t用于繪制運動（或我們應該設置動畫的任何屬性）。因此，我想創建一個復雜的自定義，CAMediaTimingFunction但是我不知道如何執行此操作，或者是否有可能？還有其他選擇嗎？編輯：這是步驟的具體示例。很有教育意義:)我想沿著從點a到b的直線為對象設置動畫，但是我希望它使用上面的easeOutBounce曲線“反彈”其沿直線的運動。這意味著它將遵循從a到b的精確線，但是將比使用當前基于貝塞爾的CAMediaTimingFunction可能的方式更加復雜地加速和減速。讓該線成為CGPath指定的任意曲線移動。它仍應沿該曲線移動，但應與直線示例相同的方式加速和減速。從理論上講，我認為它應該像這樣工作：讓我們將運動曲線描述為關鍵幀動畫move（t）= p，其中t是時間[0..1]，p是在時間t計算的位置。因此，move（0）返回曲線起點的位置，move（0.5）精確地到達中間，而move（1）結束。使用時間函數time（T）= t提供t的移動值應該給我我想要的。為了產生彈跳效果，計時功能應針對time（0.8）和time（0.8）返回相同的t值（只是一個例子）。只需替換計時功能即可獲得不同的效果。（是的，可以通過創建和連接來回移動的四個線段來進行跳線，但這不是必須的。畢竟，它只是一個簡單的線性函數，將時間值映射到位置。）我希望我在這里有意義。
3 回答
慕后森
TA貢獻1802條經驗 獲得超5個贊
我找到了這個：
可可與愛-核心動畫中的參數加速曲線
但是我認為可以通過使用塊使其變得更簡單，更易讀。因此，我們可以在CAKeyframeAnimation上定義一個類別，如下所示：
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
現在用法將如下所示：
// 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];
}
我知道這可能不像您想要的那么簡單，但這只是一個開始。
繁星coding
TA貢獻1797條經驗 獲得超4個贊
從iOS 10開始，可以使用兩個新的計時對象更輕松地創建自定義計時功能。
1）UICubicTimingParameters允許將三次貝塞爾曲線定義為緩動函數。
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)
或僅在動畫設計器初始化時使用控制點
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)?
這項很棒的服務將幫助您為曲線選擇控制點。
2）UISpringTimingParameters使開發人員可以控制阻尼比，質量，剛度和初始速度來創建所需的彈簧性能。
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)
持續時間參數仍在Animator中顯示，但在春季計時中將被忽略。
如果這兩個選項還不夠，您還可以通過確認UITimingCurveProvider協議來實現自己的時序曲線。
白板的微信
TA貢獻1883條經驗 獲得超3個贊
創建自定義計時功能的一種方法是使用CAMediaTimingFunction中的functionWithControlPoints ::::工廠方法（也有相應的initWithControlPoints :::: init方法）。這是為您的計時功能創建貝塞爾曲線。它不是任意曲線，但貝塞爾曲線非常有力且靈活。掌握控制點需要一些實踐。提示：大多數繪圖程序都可以創建貝塞爾曲線。進行這些操作將使您對用控制點表示的曲線產生視覺反饋。
在這個鏈接指向蘋果的文檔。關于如何從曲線構造預構建函數的內容很簡短，但很有用。
編輯：以下代碼顯示了一個簡單的反彈動畫。為此，我創建了一個合成的計時函數（值和計時 NSArray屬性），并為動畫的每個片段賦予了不同的時間長度（keytimes屬性）。這樣，您可以合成貝塞爾曲線以為動畫合成更復雜的時序。這是一篇有關此類動畫的好文章，并提供了不錯的示例代碼。
- (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 關注
- 784 瀏覽
添加回答
舉報
0/150
提交
取消