CSS: Скачаща топка Анимация
Original on http://www.the-art-of-web.com/css/bouncing-ball-animation/
След въвеждането от нашите Трансформира CSS , и чрез използване на поуките от прилагането на 3D преобразува и анимации, тази статия представя анимация на подскачащи топката – за сега само в две измерения, но тя не трябва да се прекалено много на една крачка , за да се движат до три.
Тези анимация ще работят в Safari, Chrome и Firefox 5 (Beta). Но само Safari поддържа 3D трансформации, така че ефектът в други браузъри е по-малко драматичен. За Firefox трябва да се направят някои промени на CSS.
1. Определяне на анимация keyframes
За тази анимация, ние ще използваме две keyframes – един, за да преведат топката хоризонтално с постоянна скорост и второ, да се прилагат приблизително параболичен вертикално движение подскачащи. Възможно е да комбинирани хоризонтални и вертикални преводи в един-единствен Keyframe, но това няма да работи за ефекта, ние сме след.
Хоризонтално движение може лесно да се осъществява чрез използване на следните Keyframe:
<style type="text/css">
@-webkit-keyframes travel {
from { }
to { left: 640px; }
}
</style>
Това ще бъдат съотнесени Keyframe-късно чрез възложените име “пътува” и прилагат с използване на линейна функция за времето на преход, който променя посоката си с всяка итерация.
За вертикални, подскачащи, анимация, ние ще направи използването на лекотата и лекота на времето функции, за да симулира ефекта на гравитационното поле:
<style type="text/css">
@-webkit-keyframes bounce {
from, to {
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 220px;
-webkit-animation-timing-function: ease-in;
}
}
</style>
Това Keyframe е обявен за “отскок” за бъдещи справки.
Комбинирането на двете keyframes ще се движат нашите “топка” хоризонтално през 640 пиксела и вертикално чрез 220 пиксела. Тези стойности разбира се трябва да бъдат коригирани, за да съвпада с размера на “сцената”.
2. Настройка на сцената за анимация
Както винаги, ние започваме от създаването на “сцената”, в която анимацията е да се извърши. В този случай просто DIV с размери от 660 х 240 пиксела. Би било хубаво, нека просто ширината да бъде 100%, но е трудно да пусне някои елементи, без да знае точната ширина на пикселите.
<style type="text/css">
#stage {
position: relative;
margin: 1em auto;
width: 660px;
height: 240px;
border: 2px solid #666;
background: #cff;
}
</style>
В рамките на този етап ние ще се създаде DIV елемент, което се движи напред-назад хоризонтално, и в рамките на този DIV, представляващи “топката”, който отскача нагоре и надолу:
<style type="text/css">
#traveler {
position: absolute;
width: 20px;
height: 240px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 4.8s;
}
#bouncer {
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 10px;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4.2s;
}
</style>
Така размерите на нашата “топка” ще бъде 20 х 20 пиксела, със заоблени ъгли .
3. Настройка на топката в движение
Ние завършват с няколко прости HTML маркиране:
<div id="stage">
<div id="traveler">
<div id="bouncer"><!-- --></div>
</div>
</div>
Ако вашият браузър поддържа анимация ще се стартира автоматично и продължава за неопределено време в полето (или # етап) по- долу:
Добавихме един допълнителен елемент и някои модели, за да подчертае X и Y-компоненти на анимацията, но в противен случай кодът е точно така, както бяха представени. Тази демонстрация в момента ще работи само в WebKit браузъри (Safari / iPhone / IPAD и Chrome) и най-новите Firefox. Не JavaScript е необходимо.
- CSS: скача-animation.css
Ето Screencast (QuickTime 777kb), показващи ефекта . В Safari анимацията е всъщност доста гладко. IPhone има някои jerkiness, но не е толкова зле, колкото този Screencast.
4. Сриващите листо демонстрация
Само с няколко промени в Скачаща топка анимация, ние може да генерира много по-сложни ефекти, като това акробатика листа:
За да обясни как работи това, използването на ротации в 3D е трудно, но можете да изтеглите CSS и да го изпробвате сами:
- CSS: лист-animation.css
Можете да видите ефект тук като Screencast (QuickTime 3.0MB). Отново, Screencast наистина не се отдаде на анимация, което е много по-гладко – поне в Safari.
5. Бележки за Firefox 5.0 Beta
Ако използвате Firefox 5.0 ще видите анимациите на тази страница. CSS маркиране, за да ги работи, е почти същата, само вие трябва да:
- замени WebKit с-moz;
- Въведете се започне от стойности за всички keyframes;
- използват се върти в мястото на rotateZ;
- rotateY също изглежда да не работят (така че няма 3D ефекти ).
Във всяка от CSS файлове, свързани по-рано можете да видите кода за WebKit (Safari) и Mozilla (Firefox) браузъри.
Моля, имайте предвид, че тези CSS стандарти все още са в преход, така че може да се промени с течение на времето, преди да бъдат финализирани. Те няма да работят изобщо в Internet Explorer 9 и по-рано, но може да работи до известна степен в IE10, ако използвате най-MS- продавач префикс.
