CSS3 Continuous Rotate Animation (เช่นเดียวกับนาฬิกาแดดที่โหลด)

120

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

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

ฉันได้ลองเปลี่ยนระยะเวลาของแอนิเมชั่นแล้ว แต่มันก็ไม่แตกต่างกันถ้าคุณทำให้ช้าลงให้พูดว่า 5s มันชัดเจนมากขึ้นว่าหลังจากการหมุนครั้งแรกจะมีการหยุดชั่วคราวก่อนที่มันจะหมุนอีกครั้ง นี่คือการหยุดชั่วคราวที่ฉันต้องการกำจัด

ความช่วยเหลือใด ๆ ที่ชื่นชมมากขอบคุณ

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

14

โค้ดเฉพาะของ Webkit ไม่ได้ทำให้ CSS3 น้อยลง .. เนื่องจากไม่มีผู้ให้บริการรายใดที่ให้ฟังก์ชันที่เท่าเทียมกันในเวลานั้น :)

— 19h

4

แอนิเมชั่นไม่ควรทำงานตั้งแต่ 0 ถึง 359 ใช่หรือไม่ ถ้ามันวิ่งจาก 0 ถึง 360 คุณจะต้องเล่นเฟรมที่ 0 สองครั้งเนื่องจากเฟรม 0 และเฟรม 360 จะเหมือนกัน ...

— Brad Parks

1

@BradParks ในทางกลับกันถ้าคุณเปลี่ยนจาก 0 ถึง 359 ภาพเคลื่อนไหวที่ควรจะเกิดขึ้นที่ 359.5 จะถูกข้ามไปโดยสิ้นเชิง ในกรณีส่วนใหญ่การทับซ้อนกันของ 0 และ 360 จะเร็วมากจนมองไม่เห็น

— Blazemonger

@Blazemonger ไม่จำเป็น. คุณสามารถทดลองใช้ด้วยตัวเองใน jsfiddle และดูว่าอาจไม่ละเอียดมากนัก

— Ilan Biala

1

สิ่งที่ '359 องศา' ทั้งหมดนี้ไร้สาระ - คุณไม่สามารถควบคุมขั้นตอนของภาพเคลื่อนไหวได้ สมมติว่าภาพเคลื่อนไหว 1 วินาทีมี 60fps ที่ 6 องศาต่อเฟรมดังนั้นคุณควรหยุดที่ "354 องศา" แต่อย่างที่บอกว่าคุณไม่สามารถควบคุมอัตราเฟรมตรงนี้ได้ดังนั้นมันจึงค่อนข้างไร้ประโยชน์ ฉันคิดว่าการใช้งานอัจฉริยะสามารถตรวจจับ 0-360 และปรับเปลี่ยนตามนั้น ฉันแค่คูณเวลาและมุมด้วย 100 นั่นคือ 0 องศาถึง 36000 องศาดังนั้นความผิดพลาดทางทฤษฎีจะเกิดขึ้นทุกๆ 100 รอบเท่านั้น แต่ฉันพบว่าคุณจะได้รับความผิดพลาดของภาพเคลื่อนไหวไม่ว่าคุณจะทำอะไรก็ตาม

— Simon_Weaver

71

ปัญหาของคุณได้ที่นี่เป็นที่คุณได้ให้มาเมื่อคุณต้องการ-webkit-TRANSITION-timing-function -webkit-ANIMATION-timing-functionค่า 0 ถึง 360 ของคุณจะทำงานได้อย่างถูกต้อง

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

ข้อผิดพลาดทั่วไปในการคัดลอกวาง ขอบคุณมาก! (จริงๆแล้วฉันได้รับ css จากshareaholicและเนื่องจากคุณสมบัติที่ตั้งชื่อผิดจึงใช้easeฟังก์ชันจับเวลาเริ่มต้น)

— doekman

55

คุณอาจสังเกตเห็นความล่าช้าเล็กน้อยเนื่องจาก 0deg และ 360deg เป็นจุดเดียวกันดังนั้นมันจึงเปลี่ยนจากจุดที่ 1 ในวงกลมกลับไปที่จุด 1 มันไม่มีนัยสำคัญมาก แต่ในการแก้ไขสิ่งที่คุณต้องทำคือเปลี่ยน 360deg เป็น 359deg

jsfiddle ของฉันแสดงภาพเคลื่อนไหวของคุณ:

#myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

นอกจากนี้สิ่งที่อาจคล้ายกับไอคอนโหลดแอปเปิ้ลมากขึ้นก็คือภาพเคลื่อนไหวที่เปลี่ยนความทึบ / สีของแถบสีเทาแทนการหมุนไอคอน

— Ilan Biala
แหล่งที่มา

3

JS Fiddle ของคุณมีการใช้งานที่รวบรัดที่สุดเท่าที่ฉันเคยเห็นสำหรับการหมุนภาพอย่างง่าย - สมบูรณ์แบบ (และขอบคุณสำหรับการโพสต์)

— Philip Murphy

ขอบคุณแจ้งให้เราทราบหากคุณต้องการความช่วยเหลืออื่น ๆ ฉันใช้คำนำหน้า webkit สำหรับภาพเคลื่อนไหว แต่คุณควรใส่คำนำหน้า mozilla ด้วยเพราะใช้กฎ -moz-css แทน

— Ilan Biala

คุณยังสามารถคูณเวลาและมุมด้วย 100 - เช่น 0 องศาถึง 36000 องศา :-)

— Simon_Weaver

@Simon_Weaver ยังคงต้องเป็น 35999deg เพื่อไม่ให้เห็นเฟรมคู่ใด ๆ

— Ilan Biala

2

@IlanBiala ยกเว้นฉันสงสัยมากว่าการ์ดแสดงผลของคุณกำลังทำงานที่ 720fps ;-) เป็นไปไม่ได้ที่คุณจะรู้ว่าการเพิ่มขึ้นระหว่างเฟรมคืออะไรโดยไม่ทราบอัตราเฟรม หากมีสิ่งใดที่คุณสามารถใส่ 348 องศาได้เช่นกันเพราะที่ครึ่งวินาทีที่ 60fps แต่ละเฟรมจะเลื่อนไป 12 องศา ฉันอยากจะใส่ 360 และหวังว่าจะมีคนฉลาดโปรแกรมเบราว์เซอร์ให้ปรับโดยอัตโนมัติ

— Simon_Weaver

27

คุณสามารถใช้ภาพเคลื่อนไหวเช่นนี้:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

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

2

ทางออกที่ยอดเยี่ยมและง่ายดาย!

— TheLD

8

หากคุณกำลังมองหาเวอร์ชัน webkit เท่านั้นสิ่งนี้ดี: http://s3.amazonaws.com/37assets/svn/463-single_spinner.htmlจากhttp://37signals.com/svn/posts/2577-loading- ปั่นภาพเคลื่อนไหวโดยใช้ CSS-และ WebKit

— ทิวดอร์
แหล่งที่มา

9

เจ๋งมาก. จริงๆแล้วฉันสะสมสปินเนอร์ทั้งGIFและCSS. คอลเลกชันของฉัน หากคุณทราบข้อมูลเพิ่มเติมโปรดแจ้งให้เราทราบ

— doekman

1

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

ถ้าเป็นไปได้ให้เปลี่ยน. png เป็นไฟล์ดั้งเดิม

ดู; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome ไม่ให้ฉันหยุดชั่วคราวด้วยวิธีนี้

— อเล็กซ์
แหล่งที่มา

สมบูรณ์แบบฉันค่อนข้างมั่นใจว่าสมมติฐานของคุณถูกต้อง แต่ฉันใช้ PNG เพราะไอคอนโหลดของฉันไม่ใช่นาฬิกาแดดมันเป็นสัญลักษณ์รูปแบบนิวเคลียร์ ... ไม่จำเป็นต้องเป็นเช่นนั้นฉันสามารถเปลี่ยนเป็นวิธีที่คุณได้ แนะนำ - ขอบคุณ!

— Gcoop

1

ฉันสร้างห้องสมุดขนาดเล็กที่ช่วยให้คุณใช้เครื่องสั่นโดยไม่มีภาพได้อย่างง่ายดาย

ใช้ CSS3 แต่กลับเข้าสู่ JavaScript หากเบราว์เซอร์ไม่รองรับ

// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

ตัวอย่าง .

— อเล็กซ์
แหล่งที่มา