CABasicAnimation รีเซ็ตเป็นค่าเริ่มต้นหลังจากที่การเคลื่อนไหวเสร็จสมบูรณ์

ฉันหมุน CALayer และพยายามหยุดที่ตำแหน่งสุดท้ายหลังจากที่ภาพเคลื่อนไหวเสร็จสมบูรณ์

แต่หลังจากที่ภาพเคลื่อนไหวเสร็จสมบูรณ์มันจะรีเซ็ตเป็นตำแหน่งเริ่มต้น

(เอกสาร xcode กล่าวอย่างชัดเจนว่าแอนิเมชันจะไม่อัปเดตมูลค่าของทรัพย์สิน)

ข้อเสนอแนะใด ๆ วิธีการบรรลุสิ่งนี้

นี่คือคำตอบมันเป็นการผสมผสานระหว่างคำตอบของฉันกับของกฤษณะ

cabasicanimation.fillMode = kCAFillModeForwards;
cabasicanimation.removedOnCompletion = NO;

kCAFillModeRemovedค่าเริ่มต้นคือ (ซึ่งเป็นพฤติกรรมการรีเซ็ตที่คุณเห็น)

ปัญหาของ RemoveOnCompletion คือองค์ประกอบ UI ไม่อนุญาตให้ผู้ใช้โต้ตอบ

ฉันเทคนิคคือการตั้งค่าจากในภาพเคลื่อนไหวและค่าถึงบนวัตถุ แอนิเมชันจะเติมค่า TO ให้อัตโนมัติก่อนที่จะเริ่มและเมื่อนำออกแล้วจะทำให้วัตถุอยู่ในสถานะที่ถูกต้อง

// fade in
CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath: @"opacity"];
alphaAnimation.fillMode = kCAFillModeForwards;

alphaAnimation.fromValue = NUM_FLOAT(0);
self.view.layer.opacity = 1;

[self.view.layer addAnimation: alphaAnimation forKey: @"fade"];

ตั้งค่าคุณสมบัติต่อไปนี้:

animationObject.removedOnCompletion = NO;

เพียงวางไว้ในรหัสของคุณ

CAAnimationGroup *theGroup = [CAAnimationGroup animation];

theGroup.fillMode = kCAFillModeForwards;

theGroup.removedOnCompletion = NO;

คุณก็สามารถตั้งค่าที่สำคัญของCABasicAnimationการpositionเมื่อคุณเพิ่มเข้าไปในชั้น โดยการทำเช่นนี้มันจะแทนที่ภาพเคลื่อนไหวโดยนัยที่ทำในตำแหน่งสำหรับการส่งผ่านปัจจุบันในการวนซ้ำที่ทำงาน

CGFloat yOffset = 30;
CGPoint endPosition = CGPointMake(someLayer.position.x,someLayer.position.y + yOffset);

someLayer.position = endPosition; // Implicit animation for position

CABasicAnimation * animation =[CABasicAnimation animationWithKeyPath:@"position.y"]; 

animation.fromValue = @(someLayer.position.y);
animation.toValue = @(someLayer.position.y + yOffset);

[someLayer addAnimation:animation forKey:@"position"]; // The explicit animation 'animation' override implicit animation

คุณสามารถมีข้อมูลเพิ่มเติมเกี่ยวกับเซสชันวิดีโอ WWDC Apple 421 - สิ่งจำเป็นสำหรับภาพเคลื่อนไหวหลัก (กลางวิดีโอ)

CALayer มีเลเยอร์โมเดลและเลเยอร์การนำเสนอ ระหว่างภาพเคลื่อนไหวเลเยอร์การนำเสนอจะอัปเดตโดยอิสระจากโมเดล เมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์เลเยอร์การนำเสนอจะได้รับการอัปเดตด้วยค่าจากแบบจำลอง หากคุณต้องการหลีกเลี่ยงการกระโดดสั่นสะเทือนหลังจากที่ภาพเคลื่อนไหวสิ้นสุดลงกุญแจสำคัญคือการทำให้ทั้งสองเลเยอร์ซิงค์กัน

หากคุณทราบค่าสิ้นสุดคุณสามารถตั้งค่ารุ่นได้โดยตรง

self.view.layer.opacity = 1;

แต่ถ้าคุณมีภาพเคลื่อนไหวที่คุณไม่ทราบตำแหน่งสิ้นสุด (เช่นจางช้าที่ผู้ใช้สามารถหยุดชั่วคราวแล้วย้อนกลับ) คุณสามารถสอบถามเลเยอร์การนำเสนอโดยตรงเพื่อค้นหาค่าปัจจุบันแล้วอัปเดตโมเดล

NSNumber *opacity = [self.layer.presentationLayer valueForKeyPath:@"opacity"];
[self.layer setValue:opacity forKeyPath:@"opacity"];

การดึงค่าจากเลเยอร์การนำเสนอนั้นมีประโยชน์อย่างยิ่งสำหรับการปรับขนาดหรือการหมุนเวียนคีย์พา ธ (เช่นtransform.scale, transform.rotation)

โดยไม่ต้องใช้ removedOnCompletion

คุณสามารถลองใช้เทคนิคนี้:

self.animateOnX(item: shapeLayer)

func animateOnX(item:CAShapeLayer)
{
    let endPostion = CGPoint(x: 200, y: 0)
    let pathAnimation = CABasicAnimation(keyPath: "position")
    //
    pathAnimation.duration = 20
    pathAnimation.fromValue = CGPoint(x: 0, y: 0)//comment this line and notice the difference
    pathAnimation.toValue =  endPostion
    pathAnimation.fillMode = kCAFillModeBoth

    item.position = endPostion//prevent the CABasicAnimation from resetting item's position when the animation finishes

    item.add(pathAnimation, forKey: nil)
}

ดังนั้นปัญหาของฉันคือฉันพยายามหมุนวัตถุบนท่าทางแพนและดังนั้นฉันจึงมีภาพเคลื่อนไหวที่เหมือนกันหลายอย่างในแต่ละการเคลื่อนไหว ผมมีทั้งfillMode = kCAFillModeForwardsและisRemovedOnCompletion = falseแต่มันก็ไม่ได้ช่วย ในกรณีของฉันฉันต้องตรวจสอบให้แน่ใจว่าคีย์ภาพเคลื่อนไหวนั้นแตกต่างกันทุกครั้งที่ฉันเพิ่มภาพเคลื่อนไหวใหม่ :

let angle = // here is my computed angle
let rotate = CABasicAnimation(keyPath: "transform.rotation.z")
rotate.toValue = angle
rotate.duration = 0.1
rotate.isRemovedOnCompletion = false
rotate.fillMode = CAMediaTimingFillMode.forwards

head.layer.add(rotate, forKey: "rotate\(angle)")

เพียงตั้งค่าfillModeและremovedOnCompletionไม่ทำงานสำหรับฉัน ฉันจะแก้ไขปัญหาโดยการตั้งค่าทั้งหมดของคุณสมบัติดังต่อไปยังวัตถุ CABasicAnimation นี้:

CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"];
ba.duration = 0.38f;
ba.fillMode = kCAFillModeForwards;
ba.removedOnCompletion = NO;
ba.autoreverses = NO;
ba.repeatCount = 0;
ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.85f, 0.85f, 1.0f)];
[myView.layer addAnimation:ba forKey:nil];

รหัสนี้แปลงmyViewเป็น 85% ของขนาด (มิติที่ 3 ไม่เปลี่ยนแปลง)

ภาพเคลื่อนไหวแกนรักษาสองลำดับชั้นชั้น: ชั้นรุ่นและชั้นนำเสนอ เมื่อภาพเคลื่อนไหวกำลังดำเนินการเลเยอร์โมเดลจะไม่เสียหายและทำให้เป็นค่าเริ่มต้น โดยค่าเริ่มต้นภาพเคลื่อนไหวจะถูกลบออกเมื่อมันเสร็จสมบูรณ์ จากนั้นเลเยอร์การนำเสนอจะกลับไปเป็นค่าของเลเยอร์โมเดล

เพียงตั้งค่าremovedOnCompletionให้NOหมายความว่าภาพเคลื่อนไหวจะไม่ถูกลบออกและสูญเสียความทรงจำ นอกจากนี้เลเยอร์โมเดลและเลเยอร์การนำเสนอจะไม่ซิงโครไนซ์อีกต่อไปซึ่งอาจนำไปสู่ข้อบกพร่องที่อาจเกิดขึ้น

ดังนั้นมันจะเป็นทางออกที่ดีกว่าในการอัปเดตคุณสมบัติโดยตรงบนเลเยอร์โมเดลเป็นค่าสุดท้าย

self.view.layer.opacity = 1;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation.fromValue = 0;
animation.toValue = 1;
[self.view.layer addAnimation:animation forKey:nil];

หากมีภาพเคลื่อนไหวโดยนัยใด ๆ ที่เกิดจากโค้ดบรรทัดแรกด้านบนให้ลองปิดหาก:

[CATransaction begin];
[CATransaction setDisableActions:YES];
self.view.layer.opacity = 1;
[CATransaction commit];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation.fromValue = 0;
animation.toValue = 1;
[self.view.layer addAnimation:animation forKey:nil];

• อ้างอิง:
  • แอนิเมชั่นอธิบายโดย objc.io
  • "การเขียนโปรแกรม iOS 7 ผลักดันขีด จำกัด "โดย Rob Napier และ Mugunth Kumar

งานนี้:

let animation = CABasicAnimation(keyPath: "opacity")
animation.fromValue = 0
animation.toValue = 1
animation.duration = 0.3

someLayer.opacity = 1 // important, this is the state you want visible after the animation finishes.
someLayer.addAnimation(animation, forKey: "myAnimation")

ภาพเคลื่อนไหวหลักแสดง 'เลเยอร์การนำเสนอ' บนเลเยอร์ปกติของคุณระหว่างภาพเคลื่อนไหว ดังนั้นตั้งค่าความทึบ (หรืออะไรก็ตาม) เป็นสิ่งที่คุณต้องการให้เห็นเมื่อภาพเคลื่อนไหวเสร็จสิ้นแล้วเลเยอร์การนำเสนอจะหายไป ทำเช่นนี้ในบรรทัดก่อนที่คุณจะเพิ่มภาพเคลื่อนไหวเพื่อหลีกเลี่ยงการสั่นไหวเมื่อมันเสร็จสมบูรณ์

หากคุณต้องการล่าช้าให้ทำดังนี้:

let animation = CABasicAnimation(keyPath: "opacity")
animation.fromValue = 0
animation.toValue = 1
animation.duration = 0.3
animation.beginTime = someLayer.convertTime(CACurrentMediaTime(), fromLayer: nil) + 1
animation.fillMode = kCAFillModeBackwards // So the opacity is 0 while the animation waits to start.

someLayer.opacity = 1 // <- important, this is the state you want visible after the animation finishes.
someLayer.addAnimation(animation, forKey: "myAnimation")

สุดท้ายถ้าคุณใช้ 'removedOnCompletion = false' มันจะรั่ว CAAnimations จนกว่าเลเยอร์จะถูกกำจัดในที่สุด - หลีกเลี่ยง

@Leslie Godwin คำตอบนั้นไม่ค่อยดีนัก "self.view.layer.opacity = 1;" เสร็จสิ้นทันที (ใช้เวลาประมาณหนึ่งวินาที) โปรดแก้ไข alphaAnimation.duration เป็น 10.0 ถ้าคุณมีข้อสงสัย คุณต้องลบบรรทัดนี้

ดังนั้นเมื่อคุณแก้ไข fillMode เป็น kCAFillModeForwards และ removeOnCompletion เป็น NO คุณปล่อยให้อนิเมชั่นอยู่ในเลเยอร์ หากคุณกำหนดตัวแทนภาพเคลื่อนไหวและลองทำสิ่งต่อไปนี้:

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
 [theLayer removeAllAnimations];
}

... เลเยอร์คืนค่าทันทีในขณะที่คุณรันบรรทัดนี้ มันเป็นสิ่งที่เราต้องการหลีกเลี่ยง

คุณต้องแก้ไขคุณสมบัติเลเยอร์ก่อนที่จะลบภาพเคลื่อนไหวออก ลองสิ่งนี้:

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
     if([anim isKindOfClass:[CABasicAnimation class] ]) // check, because of the cast
    {
        CALayer *theLayer = 0;
        if(anim==[_b1 animationForKey:@"opacity"])
            theLayer = _b1; // I have two layers
        else
        if(anim==[_b2 animationForKey:@"opacity"])
            theLayer = _b2;

        if(theLayer)
        {
            CGFloat toValue = [((CABasicAnimation*)anim).toValue floatValue];
            [theLayer setOpacity:toValue];

            [theLayer removeAllAnimations];
        }
    }
}

ดูเหมือนว่าการตั้งค่าสถานะ RemoveOnCompletion ถูกตั้งค่าเป็นเท็จและ fillMode ตั้งค่าเป็น kCAFillModeForwards ไม่ทำงานสำหรับฉันเช่นกัน

หลังจากที่ฉันใช้แอนิเมชั่นใหม่บนเลเยอร์แล้วอนิเมชั่นอ็อบเจ็กต์จะถูกรีเซ็ตเป็นสถานะเริ่มต้นจากนั้นก็เคลื่อนไหวจากสถานะนั้น สิ่งที่ต้องทำเพิ่มเติมคือการตั้งค่าคุณสมบัติที่ต้องการของเลเยอร์โมเดลตามคุณสมบัติของเลเยอร์การนำเสนอก่อนที่จะตั้งค่าภาพเคลื่อนไหวใหม่ดังนี้:

someLayer.path = ((CAShapeLayer *)[someLayer presentationLayer]).path;
[someLayer addAnimation:someAnimation forKey:@"someAnimation"];

ทางออกที่ง่ายที่สุดคือการใช้ภาพเคลื่อนไหวโดยนัย สิ่งนี้จะจัดการกับปัญหาทั้งหมดให้คุณ:

self.layer?.backgroundColor = NSColor.red.cgColor;

หากคุณต้องการปรับแต่งเช่นระยะเวลาคุณสามารถใช้NSAnimationContext:

    NSAnimationContext.beginGrouping();
    NSAnimationContext.current.duration = 0.5;
    self.layer?.backgroundColor = NSColor.red.cgColor;
    NSAnimationContext.endGrouping();

หมายเหตุ: นี่เป็นการทดสอบบน macOS เท่านั้น

ตอนแรกฉันไม่เห็นภาพเคลื่อนไหวใด ๆ เมื่อทำสิ่งนี้ ปัญหาคือเลเยอร์ของเลเยอร์ที่ได้รับการสนับสนุนมุมมองไม่ได้บอกเป็นนัยถึงการเคลื่อนไหว ในการแก้ปัญหานี้ตรวจสอบให้แน่ใจว่าคุณเพิ่มเลเยอร์ด้วยตัวคุณเอง (ก่อนตั้งค่ามุมมองเป็นเลเยอร์สำรอง)

ตัวอย่างวิธีการทำเช่นนี้จะเป็น:

override func awakeFromNib() {
    self.layer = CALayer();
    //self.wantsLayer = true;
}

การใช้self.wantsLayerไม่ได้สร้างความแตกต่างในการทดสอบของฉัน แต่อาจมีผลข้างเคียงบางอย่างที่ฉันไม่ทราบ

นี่คือตัวอย่างจากสนามเด็กเล่น:

import PlaygroundSupport
import UIKit

let resultRotation = CGFloat.pi / 2
let view = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 200.0, height: 300.0))
view.backgroundColor = .red

//--------------------------------------------------------------------------------

let rotate = CABasicAnimation(keyPath: "transform.rotation.z") // 1
rotate.fromValue = CGFloat.pi / 3 // 2
rotate.toValue = resultRotation // 3
rotate.duration = 5.0 // 4
rotate.beginTime = CACurrentMediaTime() + 1.0 // 5
// rotate.isRemovedOnCompletion = false // 6
rotate.fillMode = .backwards // 7

view.layer.add(rotate, forKey: nil) // 8
view.layer.setAffineTransform(CGAffineTransform(rotationAngle: resultRotation)) // 9

//--------------------------------------------------------------------------------

PlaygroundPage.current.liveView = view

1. สร้างรูปแบบภาพเคลื่อนไหว
2. ตั้งค่าตำแหน่งเริ่มต้นของภาพเคลื่อนไหว (สามารถข้ามได้ขึ้นอยู่กับเลย์เอาต์เลเยอร์ปัจจุบันของคุณ)
3. กำหนดตำแหน่งสิ้นสุดของภาพเคลื่อนไหว
4. กำหนดระยะเวลาของภาพเคลื่อนไหว
5. ภาพเคลื่อนไหวล่าช้าเป็นเวลาหนึ่งวินาที
6. อย่าตั้งค่าfalseเป็นisRemovedOnCompletion- ปล่อยให้ Core Animation ล้างหลังจากภาพเคลื่อนไหวเสร็จสิ้น
7. นี่คือส่วนแรกของเคล็ดลับ - คุณพูดกับ Core Animation เพื่อวางแอนิเมชันของคุณไปยังตำแหน่งเริ่มต้น (คุณตั้งไว้ในขั้นตอนที่ # 2) ก่อนที่จะเริ่มแอนิเมชัน - ขยายเวลาย้อนหลัง
8. คัดลอกอนิเมชั่นออบเจ็กต์ที่เตรียมไว้เพิ่มไปยังเลเยอร์และเริ่มภาพเคลื่อนไหวหลังจากความล่าช้า (คุณตั้งค่าในขั้นตอน # 5)
9. ส่วนที่สองคือการกำหนดตำแหน่งสิ้นสุดที่ถูกต้องของเลเยอร์ - หลังจากที่ภาพเคลื่อนไหวถูกลบเลเยอร์ของคุณจะแสดงในตำแหน่งที่ถูกต้อง