CSS: แอนิเมชันเทียบกับการเปลี่ยน

157

ดังนั้นฉันเข้าใจวิธีการเปลี่ยนทั้ง CSS3 และภาพเคลื่อนไหว สิ่งที่ไม่ชัดเจนและฉัน googled คือเมื่อใดที่จะใช้

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

อย่างไรก็ตามมีบางกรณีที่สามารถใช้เอฟเฟกต์ดังกล่าวได้ทั้งสองวิธี ตัวอย่างที่ง่ายและทั่วไปจะใช้เมนูเลื่อนลิ้นชักสไตล์ Facebook:

เอฟเฟกต์นี้สามารถทำได้โดยการเปลี่ยนผ่านดังนี้:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

หรือผ่านภาพเคลื่อนไหวเช่นนั้น:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

ด้วย HTML ที่มีลักษณะดังนี้:

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

และสคริปต์ jQuery นี้ประกอบขึ้นด้วย:

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

สิ่งที่ฉันต้องการทำความเข้าใจคือข้อดีและข้อเสียของวิธีการเหล่านี้คืออะไร

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

css css-transitions css-animations

— รหัสกวี
แหล่งที่มา

211

ดูเหมือนว่าคุณจะมีวิธีจัดการกับมันไม่ได้ทำเมื่อไหร่

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

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

— อาดัม
แหล่งที่มา

7

ลองดูบทความนี้ด้วยkirupa.com/html5/css3_animations_vs_transitions.htm ชี้ให้เห็นอย่างถูกต้องว่าช่วงการเปลี่ยนภาพเป็นวิธีการที่จะไปเมื่อทำการโต้ตอบ javascript

— Scott Jungwirth

40

ฉันจะให้คำจำกัดความพูดเพื่อตัวเอง (ตาม Merriam-Webster):

การเปลี่ยน : การเคลื่อนไหวการพัฒนาหรือวิวัฒนาการจากรูปแบบหนึ่งเวทีหรือรูปแบบหนึ่งไปอีกรูปแบบหนึ่ง

นิเมชั่น : Endowed กับชีวิตหรือคุณภาพชีวิต; เต็มไปด้วยการเคลื่อนไหว

ชื่อเหมาะสมกับวัตถุประสงค์อย่างเหมาะสมใน CSS

ตัวอย่างที่คุณให้ควรใช้ช่วงการเปลี่ยนภาพเนื่องจากเป็นเพียงการเปลี่ยนแปลงจากสถานะหนึ่งไปอีกสถานะหนึ่ง

— Zach Saucier
แหล่งที่มา

21

คำตอบที่สั้นลงตรงประเด็น:

การเปลี่ยนแปลง:

ต้องการองค์ประกอบที่เป็นจุดวิกฤติ (: hover,: focus ฯลฯ )
2 สถานะภาพเคลื่อนไหวเท่านั้น (เริ่มต้นและสิ้นสุด)
ใช้สำหรับภาพเคลื่อนไหวที่ง่ายขึ้น (ปุ่มเมนูแบบเลื่อนลงและอื่น ๆ )
สร้างภาพเคลื่อนไหว / เอฟเฟกต์ได้ง่ายขึ้น

ภาพเคลื่อนไหว @keyframes:

มันสามารถใช้สำหรับการเคลื่อนไหวที่ไม่มีที่สิ้นสุด
สามารถตั้งค่ามากกว่า 2 สถานะ
ไม่มีขอบเขต

ทั้งสองใช้การเร่งความเร็ว CPU เพื่อให้ได้ผลลัพธ์ที่ราบรื่น

— Grecdev
แหล่งที่มา

เมื่อคุณพูดว่า "การเร่งความเร็ว CPU" คุณอาจหมายถึง "การเร่งความเร็ว GPU" ฉันเชื่อว่าภาพเคลื่อนไหวที่ไม่ใช่การคำนวณใหม่เช่น "แปล" ได้รับประโยชน์นั้น

— jv-dev

12

แอนิเมชันใช้โค้ดมากขึ้นเว้นแต่คุณจะใช้การเปลี่ยนภาพซ้ำไปซ้ำมาซึ่งในกรณีนี้การเคลื่อนไหวจะดีขึ้น
คุณสามารถมีเอฟเฟกต์ต่าง ๆ สำหรับการเลื่อนเข้าและออกโดยไม่ต้องมีภาพเคลื่อนไหว เพียงแค่มีการเปลี่ยนแปลงที่แตกต่างกันทั้งในกฎดั้งเดิมและกฎที่แก้ไข:
```
.two-transitions {
    transition: all 50ms linear;
}

.two-transitions:hover {
    transition: all 800ms ease-out;
}
```
ภาพเคลื่อนไหวเป็นเพียงนามธรรมของการเปลี่ยนภาพดังนั้นหากการเปลี่ยนภาพเป็นการเร่งความเร็วด้วยฮาร์ดแวร์ภาพเคลื่อนไหวจะเป็นเช่นนั้น มันไม่ต่างอะไรเลย
ทั้งสองมีความทันสมัยมาก
กฎง่ายๆคือถ้าฉันใช้ช่วงการเปลี่ยนภาพสามครั้งเหมือนกันมันน่าจะเป็นภาพเคลื่อนไหว สิ่งนี้ง่ายต่อการบำรุงรักษาและเปลี่ยนแปลงในอนาคต แต่ถ้าคุณใช้เพียงครั้งเดียวมันจะยิ่งทำให้แอนิเมชั่นดีขึ้นและอาจไม่คุ้มค่า

— paulcpederson
แหล่งที่มา

ฉันควรเพิ่มด้วยว่าภาพเคลื่อนไหวมีคีย์เฟรมซึ่งช่วยให้คุณทำสิ่งที่ซับซ้อนและควบคุมได้ซึ่งเป็นเรื่องที่น่าอัศจรรย์

— paulcpederson

3

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

การเปลี่ยนแปลงในอีกด้านหนึ่งระบุว่าทรัพย์สิน (หรือคุณสมบัติ) ควรดำเนินการเปลี่ยนแปลงอย่างไร การเปลี่ยนแปลงแต่ละครั้ง การตั้งค่าใหม่สำหรับพร็อพเพอร์ตี้ไม่ว่าจะด้วย JavaScript หรือ CSS นั้นเป็นการเปลี่ยนแปลงเสมอ แต่โดยปกติแล้วมันจะไม่ราบรื่น โดยการตั้งค่าtransitionในสไตล์ css คุณกำหนดวิธีที่แตกต่างกัน (ราบรื่น) เพื่อทำการเปลี่ยนแปลงเหล่านี้

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

— Jonan Georgiev
แหล่งที่มา

1

ฉันไม่เห็นด้วยกับคำจำกัดความนี้เนื่องจากทั้งสองระบุว่าอะไร

— Zach Saucier

3

มีบางสิ่งที่สามารถพูดได้เกี่ยวกับประสิทธิภาพ ทั้งคู่ใช้ประโยชน์จากการเร่งความเร็ว h / w หรือไม่?

ในเบราว์เซอร์ที่ทันสมัย, H / w เร่งความเร็วเกิดขึ้นสำหรับคุณสมบัติfilter, และopacity transformสิ่งนี้มีไว้สำหรับทั้ง CSS Animations และ CSS Transitions

— Eric Willigers
แหล่งที่มา

1

.yourClass {
    transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}

.yourClass:hover {
    color: #f00;
}

<p class="yourClass"> Hover me </p>

ขยายตัวอย่างข้อมูล

-1

ฉันเชื่อว่าการเปลี่ยนภาพเคลื่อนไหว CSS3 กับ CSS3จะให้คำตอบที่คุณต้องการ

โดยทั่วไปด้านล่างมีประเด็นบางประการ:

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

— PixelsTech
แหล่งที่มา

3

# 2 และ # 3 ไม่เป็นความจริง

— Zach Saucier

1

ฉันไม่แน่ใจว่า # 3 จริงหรือไม่? ดูเหมือนว่าเป็นจุดที่ควรพิจารณาและการนับภาพเคลื่อนไหว - การนับซ้ำเป็นคุณสมบัติที่ถูกต้อง: developer.mozilla.org/en-US/docs/Web/CSS/?hl=th

1

สองสิ่งที่มี: 1) หากการเปลี่ยนแปลงเริ่มต้นขึ้นอีกครั้งในภายหลังจะยังคงเป็น "ทำซ้ำ" แม้ว่าจะไม่ได้เกิดขึ้นทันทีหลังจากการทำซ้ำครั้งแรก 2) คุณสามารถมีช่วงการเปลี่ยนภาพที่เกิดขึ้นซ้ำ ๆ ได้ทันทีขึ้นอยู่กับภาพเคลื่อนไหว ดูบทความ CSS-Tricks ของฉันสำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่ฉันหมายถึง

— Zach Saucier

-1

อย่ารบกวนตัวเองซึ่งดีกว่า การให้ของฉันคือว่าถ้าคุณสามารถแก้ปัญหาของคุณด้วยโค้ดเพียงหนึ่งหรือสองบรรทัดก็แค่ทำมันแทนที่จะเขียนโค้ดเป็นมัดซึ่งจะส่งผลให้เกิดพฤติกรรมที่คล้ายกัน อย่างไรก็ตามการเปลี่ยนแปลงก็เหมือนภาพเคลื่อนไหวย่อย ๆ นั่นหมายถึงการเปลี่ยนแปลงสามารถแก้ไขปัญหาบางอย่างในขณะที่การเคลื่อนไหวในทางกลับกันสามารถแก้ปัญหาทั้งหมดได้ แอนิเมชันช่วยให้คุณสามารถควบคุมแต่ละด่านเริ่มจาก 0% ไปจนถึง 100% ซึ่งเป็นสิ่งที่ไม่สามารถทำได้จริง ๆ แอนิเมชันต้องการให้คุณเขียนรหัสจำนวนมากในขณะที่การเปลี่ยนแปลงใช้รหัสหนึ่งหรือสองบรรทัดเพื่อดำเนินการผลลัพธ์เดียวกันโดยขึ้นอยู่กับสิ่งที่คุณกำลังทำอยู่ มาจากจุดของ JavaScript ที่ดีที่สุดคือการใช้การเปลี่ยนแปลง สิ่งใดที่เกี่ยวข้องกับเพียงสองเฟสคือเริ่มต้นและสิ้นสุดการเปลี่ยนการใช้ สรุปถ้าเครียดอย่า '

— Unyime
แหล่งที่มา