Bagaimana cara membuat fungsi easing kustom dengan Core Animation?

Saya menganimasikan CALayersepanjang CGPath(QuadCurve) dengan cukup baik di iOS. Tapi saya ingin menggunakan fungsi easing yang lebih menarik daripada yang disediakan oleh Apple (EaseIn / EaseOut dll). Misalnya, fungsi pantulan atau elastis.

Hal-hal berikut dapat dilakukan dengan MediaTimingFunction (bezier):

Tapi saya ingin membuat fungsi pengaturan waktu yang lebih kompleks. Masalahnya adalah bahwa pengaturan waktu media tampaknya memerlukan bezier kubik yang tidak cukup kuat untuk menciptakan efek berikut:

_{(sumber: sparrow-framework.org )}

The kode untuk membuat cukup sederhana di atas adalah dalam framework lain, yang membuat sangat frustasi ini. Perhatikan bahwa kurva memetakan waktu masukan ke waktu keluaran (kurva Tt) dan bukan kurva waktu-posisi. Misalnya, easyOutBounce (T) = t mengembalikan t baru . Kemudian t itu digunakan untuk memplot gerakan (atau properti apa pun yang harus kita animasikan).

Jadi, saya ingin membuat kebiasaan yang rumit CAMediaTimingFunctiontetapi saya tidak tahu bagaimana melakukannya, atau apakah itu mungkin? Apakah ada alternatif lain?

EDIT:

Berikut adalah contoh konkret untuk langkah. Sangat mendidik :)

1. Saya ingin menganimasikan objek di sepanjang garis dari titik a ke b , tetapi saya ingin objek "memantulkan" pergerakannya di sepanjang garis menggunakan kurva kemudahanOutBounce di atas. Ini berarti itu akan mengikuti garis yang tepat dari a ke b , tetapi akan mempercepat dan melambat dengan cara yang lebih kompleks daripada yang mungkin menggunakan CAMediaTimingFunction berbasis bezier saat ini.

2. Mari kita buat garis itu setiap gerakan kurva arbitrer yang ditentukan dengan CGPath. Itu harus tetap bergerak di sepanjang kurva itu, tetapi itu harus dipercepat dan diperlambat dengan cara yang sama seperti pada contoh garis.

Secara teori saya pikir itu harus bekerja seperti ini:

Mari kita gambarkan kurva pergerakan sebagai animasi keyframe move (t) = p , dimana t adalah waktu [0..1], p adalah posisi yang dihitung pada waktu t . Jadi move (0) mengembalikan posisi pada awal kurva, gerakkan (0,5) tepat di tengah dan gerakkan (1) di akhir. Menggunakan fungsi waktu waktu (T) = t untuk memberikan nilai t untuk memindahkan harus memberi saya apa yang saya inginkan. Untuk efek pantulan, fungsi waktu harus mengembalikan nilai t yang sama untuk waktu (0.8) dan waktu (0.8)(hanya contoh). Ganti saja fungsi pengaturan waktu untuk mendapatkan efek yang berbeda.

(Ya, memantulkan garis mungkin dilakukan dengan membuat dan menggabungkan empat segmen garis yang bolak-balik, tetapi itu tidak perlu. Bagaimanapun, ini hanya fungsi linier sederhana yang memetakan nilai waktu ke posisi.)

Saya harap saya masuk akal di sini.

Aku menemukan ini:

Cocoa with Love - Kurva akselerasi parametrik di Core Animation

Tapi saya pikir itu bisa dibuat lebih sederhana dan lebih mudah dibaca dengan menggunakan blok. Jadi kita dapat menentukan kategori di CAKeyframeAnimation yang terlihat seperti ini:

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

Sekarang penggunaannya akan terlihat seperti ini:

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

Saya tahu ini mungkin tidak sesederhana yang Anda inginkan, tetapi ini adalah permulaan.

Dari iOS 10 menjadi mungkin untuk membuat fungsi pengaturan waktu kustom lebih mudah menggunakan dua objek pengaturan waktu baru.

1) UICubicTimingParameters memungkinkan untuk menentukan kurva Bézier kubik sebagai fungsi easing.

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)

atau cukup menggunakan titik kontrol pada inisialisasi animator

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) 

Layanan luar biasa ini akan membantu memilih titik kontrol untuk lekuk tubuh Anda.

2) UISpringTimingParameters memungkinkan pengembang memanipulasi rasio redaman , massa , kekakuan , dan kecepatan awal untuk menciptakan perilaku pegas yang diinginkan.

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)

Parameter durasi masih disajikan di Animator, tetapi akan diabaikan untuk pengaturan waktu musim semi.

Jika kedua opsi ini tidak cukup, Anda juga dapat menerapkan kurva waktu Anda sendiri dengan mengonfirmasi ke protokol UITimingCurveProvider .

Lebih lengkapnya, cara membuat animasi dengan parameter timing yang berbeda bisa Anda temukan di dokumentasi .

Lihat juga presentasi Kemajuan Animasi dan Transisi UIKit dari WWDC 2016.

Cara untuk membuat fungsi pengaturan waktu kustom adalah dengan menggunakan metode functionWithControlPoints :::: pabrik di CAMediaTimingFunction (ada metode initWithControlPoints :::: init yang sesuai juga). Apa yang dilakukannya adalah membuat kurva Bézier untuk fungsi pengaturan waktu Anda. Ini bukan kurva yang berubah-ubah, tetapi kurva Bézier sangat kuat dan fleksibel. Dibutuhkan sedikit latihan untuk memahami poin kontrol. Tip: kebanyakan program menggambar dapat membuat kurva Bézier. Bermain dengan itu akan memberi Anda umpan balik visual pada kurva yang Anda wakili dengan titik kontrol.

The link ini poin untuk dokumentasi apel. Ada bagian singkat tapi berguna tentang bagaimana fungsi pra-bangun dibangun dari kurva.

Edit: Kode berikut menunjukkan animasi pantulan sederhana. Untuk melakukannya, saya membuat fungsi pengaturan waktu ( nilai dan pengaturan waktu properti NSArray) dan memberi setiap segmen animasi panjang waktu yang berbeda ( properti keytimes ). Dengan cara ini Anda dapat membuat kurva Bézier untuk membuat pengaturan waktu yang lebih canggih untuk animasi. Ini adalah artikel bagus tentang jenis animasi ini dengan kode contoh yang bagus.

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

}

Tidak yakin apakah Anda masih mencari, tetapi PRTween terlihat cukup mengesankan dalam hal kemampuannya untuk melampaui apa yang Core Animation berikan di luar kotak, terutama, fungsi pengaturan waktu khusus. Itu juga dikemas dengan banyak — jika tidak semua — kurva easing populer yang disediakan oleh berbagai kerangka web.

Implementasi versi cepat adalah TFAnimation . Demo adalah animasi kurva sin . GunakanTFBasicAnimation seperti CABasicAnimationkecuali assign timeFunctiondengan blok selain timingFunction.

Kuncinya adalah subclass CAKeyframeAnimationdan menghitung posisi frame dengan timeFunctiondalam 1 / 60fpsinterval s. Setelah semua tambahkan semua nilai yang dihitung ke valuesdari CAKeyframeAnimationdan waktu dengan interval keyTimesjuga.

Saya membuat pendekatan berbasis blok, yang menghasilkan grup animasi, dengan banyak animasi.

Setiap animasi, per properti, dapat menggunakan 1 dari 33 kurva parametrik yang berbeda, fungsi pengaturan waktu Peluruhan dengan kecepatan awal, atau pegas khusus yang dikonfigurasi sesuai kebutuhan Anda.

Setelah grup dibuat, itu di-cache di Tampilan, dan dapat dipicu menggunakan AnimationKey, dengan atau tanpa animasi. Setelah dipicu, animasi akan disinkronkan sesuai dengan nilai lapisan presentasi, dan diterapkan sesuai dengan itu.

Kerangka tersebut dapat ditemukan di sini FlightAnimator

Berikut contohnya di bawah ini:

struct AnimationKeys {
    static let StageOneAnimationKey  = "StageOneAnimationKey"
    static let StageTwoAnimationKey  = "StageTwoAnimationKey"
}

...

view.registerAnimation(forKey: AnimationKeys.StageOneAnimationKey, maker:  { (maker) in

    maker.animateBounds(toValue: newBounds,
                     duration: 0.5,
                     easingFunction: .EaseOutCubic)

    maker.animatePosition(toValue: newPosition,
                     duration: 0.5,
                     easingFunction: .EaseOutCubic)

    maker.triggerTimedAnimation(forKey: AnimationKeys.StageTwoAnimationKey,
                           onView: self.secondaryView,
                           atProgress: 0.5, 
                           maker: { (makerStageTwo) in

        makerStageTwo.animateBounds(withDuration: 0.5,
                             easingFunction: .EaseOutCubic,
                             toValue: newSecondaryBounds)

        makerStageTwo.animatePosition(withDuration: 0.5,
                             easingFunction: .EaseOutCubic,
                             toValue: newSecondaryCenter)
     })                    
})

Untuk memicu animasi

view.applyAnimation(forKey: AnimationKeys.StageOneAnimationKey)