CSS3-те анимация жасау (2 бөлім)

Алдыңғы постта CSS3те анимация жасаудың қарапайым мысалын көрсеткен едім. Енді осы жазбада CSS3тегі анимация жайында толықтай тоқталып кетейін.

Жалпы анимация дегеніміз не )))
Анимация ол екі не одан да көп кадрлардың белгілі бір уақыт ішінде ауысып тұруы. жекелеген бейнелер жылдам әрі бір қалыпта қайталануы қозғалып тұрған бейненің иллюзиясын береді.

Веб сайт дизайнында анимация кеңінен қолданылады. Кең көлемдегі анимациялар Flash технологиясымен жасалынады. Ал кішігірім анимациялар Javascript-та немесе Jquery фреймворкы арқылы жүзеге асырылады.

Бірақ соңғы кездері Flash технологиясынан барынша бас бартып, барлығын толықтай HTML5 пен CSS3те жүзеге асыруға тырысып жатыр. (Стив Джобстың арқасында). Ал кішігірім анимация үшін Jquery ді қолдану артықтау сияқты. Сондықтан сіздердің назарыңызға CSS3 тің animation функциясын ұсынамын.) (негізі функция емес свойства еді, бірақ оның қазақша аудармасы I. ср. ерекшелік; қадір-касиет; қасиет; сипат II. жегжаттық; сүйек жақындық деп аударып берді сөйлем кз). Иә қазір CSS3ті қолдайтын браузерлер саусақпен санарлық, бірақ ертелі кеш бәрібір барлығы CSS3 ке өтеді. Сол кезде ол не? деп қалмас үшін біліп алыңдар. (Safari 4 тен ал Chrome 3 тен бастап CSS3 анимациясын көрсете алады (файрфокстың соңғы нұсқалары да тәуір көрсетіп тұр))

Сонымен анықтама:

animation функциясы арқылы бірден бірнеше анимациялық функцияны қатар жазып сипаттауға болады. бірақ оны болашақта жазатын боламыз, әзірше мылжың кодттармен толықтыруға тура келеді.

Мысалы margin сияқты:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
/*былай шұбыртып жазылады*/

бірақ
margin: 10px 20px 15px 5px; /* былай қысқартып жазуға да болады */


Анимациялық функцияны тізімі (баптаулары десек те келетін сияқты):
  • animation-name — мында анимацияның аты жазылады
  • animation-duration — мында анимация ұзақтығы жазылады (секундапен s немесе миллисекундпен ms жазылады)
  • animation-timing-function — анимацияның бірінші кадр мен екінші кадр аралығындағы аралық мәндерін есептеу түрі сипатталады %) (не жазғанымды өзім де түсінбей қалған сияқтымын ))) қысқасы бұны әзірше қалдыра тұрайық ))
  • animation-delay — мында анимацияның тоқтау ұзақтығы (секундапен s немесе миллисекундпен ms жазылады)
  • animation-iteration-count — мында анимацияның қайталану циклы жазылады (яғни неше рет қайталатыны жазылады мәндері санмен беріледі немесе infinite деп жазасыз егер шексіз қайталансын десеңіз
  • animation-direction — мында анимация бағыты жазылады (бұлны жазбай кетсеңіз де болады немесе alternate деп жазып кетесіз (мысалы мәтіннің колемін он есе үлкейтетін анимацияда егер alternate мәні тұрса алдымен мәтін он есеге үлкейеді де кері ұарай он есеге кішірейеді)
  • animation-play-state — анимаицяны тоқтату не жүргізу жайында жазылады (мысалда түсіндіремін)
осы бар болғаны жеті функция арқылы анимацияны баптаймыз)) (шошымаңдар, бұлардың бәрін жазу міндетті емес, тек анимация атын жазу керек қалайда)

әзірше бір де бір браузер animation деп жазған стильді қолдамайды, есесіне әр браузер ядросына мылжың кодта жеке жазып шығамыз (-webkit- деп хром мен сафариде жасауы үшін жазамыз, -moz- деп файрфокс үшін жазамыз, негізі опера үшін де -o- деген жазылады, бірақ әзірше оны опера қолдамайды, артық болмас деп жазып қойсаң да болады. анимацияны қолдайтын опера шыққанда қосымша жазып жүрмейсіз, эксплоерде қалай жазу керектігін әдейі жазбай кетемін (ол браузерден бас бартыңдар ААА ))

мылжың кодта мысалы:
-webkit-animation-name /*хром мен сафари үшін былай жазамыз*/
-moz-animation-name /*былай файрфоксқа жазамыз*/
-o-animation-name /*операға былай жазамыз*/


Сонымен анимацияның баптауларын жазып сипаттап болғаннан кейін оны шақырып, анимация стильін беру үшін @keyframes — ережесін шақырамыз.
оның түрі мынадай:
@keyframes <анимация аты (манағы animation-name ге жазғанымыз)> {
    <кадр нөмірі (пайызбен беріледі немесе from деп жазамыз, анимация басы деген сөз (0% деп жазуға да болады)> {
        мында стильдер жазылады
    }
    <мында да номері пайызбен жазылады> {
        мында стильдер жазылады
    }
    ..................... /*көптеген кадрларды жазссаңыз да болады, бірақ басы мен соңын жазып қоя қойсаңдар да болады. ортасындағы кадрларды өзі шығарып береді*/
    <соңғы кадр 100% немесе to деп жазасыз соңы деп жазу үшін> {
        мында стильдер жазылады
    }	
}


айтпақшы бұған да мылжың код керек (@-webkit-keyframes хром сафари, @-moz-keyframes файрфокс, @-o-keyframes опера)

Осымен Теория бітті, енді практика.

екі мысал жәрәр.

бірінші мысал

Тапсырма: алдымен 50x50px, жиегі қызыл, бҰоыштарының дөңгелену радиусы 25px блок болады, ол блог анимация бойынша өзінің көлемін 400x400px ге үлкейтіп бұрыштарының дөңгелену радиусы 200px ге артып, фоны қызыл түске боялуы керек

Енді осындай нәтижеге жету үшін саусақтарымызды аямай код жазамыз:

алдымен html коды:
<div class="mysal_1"></div>


болк шығардық, енді CSSте стильін жазамыз

.mysal_1 {
	width: 50px;
	height: 50px;
	border: 3px solid #909;
	border-radius: 25px;
	animation-name: 'animacia_1';	//анимация аты
	animation-duration: 5s;	// анимация ұзақтығы
/*мылжың код (әр браузер ядросына жеке жазамыз әзірше*/

	-webkit-animation-name: 'animacia_1';
	-webkit-animation-duration: 5s;	

	-moz-animation-name: 'animacia_1';
	-moz-animation-duration: 5s;	

	-o-animation-name: 'animacia_1';	
	-o-animation-duration: 5s
	}
	
@keyframes 'animacia_1' { 
	from { // бірінші кадрға ештеңе жазбаймыз, себебі бірінші кадрда ештеңе өзгермейді
	}
	to {
	width: 400px;
	height: 400px;
	border-radius: 200px; // кадр соңы
	}
/* болашақта осылай жазатын оламыз, ал әзірше әр браугерге жеке жазып шығамыз*/

@-webkit-keyframes 'animacia_1' { 
	from { 
	}
	to {
	background-color:#F00;
	width: 400px;
	height: 400px;
	border-radius: 200px;
	}

}
@-moz-keyframes 'animacia_1' { 
	from { 
	}
	to {
	background-color:#F00;
	width: 400px;
	height: 400px;
	border-radius: 200px;
	}

}
@-o-keyframes 'animacia_1' { 
	from { 
	}
	to {
	background-color:#F00;
	width: 400px;
	height: 400px;
	border-radius: 200px;
	}

}


міне мынадай болды

hosting.users.kz/css3-2.html

бооолды )) бар болғаны осы ғана )) соңында көресіңдер ұалай шыққанын, бірден екінші мысалға көшейік.

не ғо айып етпеңіздер )) екінші мысалды жазбаймын. жазған тақырыбымды бір оқып шығып едім, өзім де түсінбей қалған сияқтымын )) animation функциясынан бастап жазғаным қателік болған сияқты. оңайынан бастауым керек еді ))

осы білгендеріңмен қанағаттанданыңдар. түсінбей қалғандарың түсіндендерден сұрап алың ))) келесі постта transition функциясынан бастап жазамын. сосын кейін animation ға өтеміз. )))

6 пікір

Korkem
Оооооо рахмет бауырым, көөөп көмегі тиді..)))
Jako
Ибаййй миым-ай,қаштым мен…
MSHERIMBEK
Несі бар, барлығы түсінікті сияқты ғой:)
Jako
Е ол сендерге ғой бірден түсінікті, біздің бас кірпіш пен бетонға толып қалған емес пе?
kuka097
Мынаны көріп оқығым келмей қалдығо…
Abylai
қорқпа үйреніп кетесің ))
Тек тіркелген қолданушылар ғана пікір қалдыра алады.