亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用Core Animation創建自定義緩動功能?

如何使用Core Animation創建自定義緩動功能?

慕森卡 2019-11-05 11:19:01
我在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];

}

我知道這可能不像您想要的那么簡單,但這只是一個開始。


查看完整回答
反對 回復 2019-11-05
?
繁星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協議來實現自己的時序曲線。


查看完整回答
反對 回復 2019-11-05
?
白板的微信

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];


}


查看完整回答
反對 回復 2019-11-05
  • 3 回答
  • 0 關注
  • 784 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號