Мазмұны
- 01. Жасаңыз және сақтаңыз
- 02. Веб үшін оңтайландыру
- 03. HTML құжатын орнатыңыз
- 04. Макет құрастырыңыз
- 05. SVG орналастырыңыз
- 06. SVG-ге сыныптар қосыңыз
- 07. Бастапқы күйлер
- 08. Анимацияларды жариялаңыз
- 09. Анимация мен қасиеттерді тағайындаңыз
- 10. Тіктөртбұрыш анимациясы
- 11. Мәтіндік анимация
- 12. Басталуды кейінге қалдырыңыз
- 13. Сызықтық сызуды еліктеңіз
- 14. Кескіннің бірінші рамасы
- 15. Сызықтарды салыңыз
- 16. Пішінді толтырыңыз
SVG-ді анимациялау туралы айтатын болсақ, JavaScript кітапханаларына еніп кету идеясының бірі болуы мүмкін. Алайда, бұл жағдай болмауы керек. CSS эффект жасау үшін SVG ішіндегі жеке жолдарды таңдауды басқара алады. Негіздерді білудің өзі тегіс, басылған белгішелерді сәл әсерлі нәрсеге айналдыруға болатындығын білдіреді. Мүмкін, SVG оңтайландыру мен анимацияның негізгі сатыларынан өту уақыты келді. Әр түрлі дизайнға енгенде, мүмкіндіктердің шексіз екенін түсіну көп уақытты қажет етпейді.
Көбірек қозғалыс шабыты үшін Creative Bloq CSS анимация мысалдары және оларды қалай кодтау туралы нұсқаулықты қараңыз.
Құстарға супер ерте билетімен 100 фунт үнемдеңіз CSS жасау, Creative Bloq, Web Designer журналы және net журналы өткізетін бір күндік веб-конференция. Мұнда тапсырыс беріңіз.
01. Жасаңыз және сақтаңыз
Алдымен жұмыс істеу үшін SVG жасаңыз. Бұл оқулық үшін біз Illustrator-да жасалған қарапайым графиканы қолданамыз. SVG-ді экспорттау үшін Illustrator-ді қолданған кезде графикалық өлшемге сәйкес жұмыс үстелінің өлшемін кішірейтіңіз, содан кейін ‘Басқаша сақтау’ батырмасын басыңыз. Ашылмалы мәзірден SVG таңдаңыз, содан кейін SVG параметрлері диалогынан ‘SVG коды…’ таңдаңыз.
02. Веб үшін оңтайландыру
Қажетсіз тегтерді кесу кескінмен жұмыс істеуді жеңілдетеді. Мұны кодты сүйікті редакторға көшіру және бос тегтер мен метадеректерді жою арқылы қолмен жасауға болады. Сонымен қатар, SVGOMG деп аталатын фантастикалық ресурс мұны автоматты түрде жасайды. Кодты SVGOMG интерфейсіндегі ‘Белгілеуді қою’ аймағына қойыңыз, содан кейін суретті төменгі оң жақтағы батырманы пайдаланып қайтадан көшіріңіз.
03. HTML құжатын орнатыңыз
Код редакторыңызды ашып, бос HTML құжатын орнатыңыз. Біз CSS анимациясын файлға жазамыз main.css, сондықтан мұны да жасаңыз. Анимацияға көңіл бөлу үшін біз Bootstrap 4.1.3 тек CSS нұсқасын ұсындық.
04. Макет құрастырыңыз
Біздің макетіміздің сүйектерін құрайық және SVG-ге орын берейік. Біз тақырыпты және екі бағанды қостық: біреуі мәтін үшін сол жағында, екіншісі оң жақта, біз анимация жасайтын SVG-ді ұстаймыз. Бетті тірілту үшін негізгі тегтегі фон ретінде екінші, статикалық SVG пайдаланыңыз.
05. SVG орналастырыңыз
Біз парақтың жоғарғы жағындағы кіріспені қызықты ету үшін анимацияны қолданамыз. Беттің екінші бағанына оңтайландырылған SVG кодын қойыңыз. Егер bootstrap қолдансаңыз, SVG-ге класс беріңіз img-сұйықтық оның ұялы телефондарда таразы екендігіне көз жеткізу үшін.
06. SVG-ге сыныптар қосыңыз
SVG-ге кластарды қосу CSS-ке кескін ішіндегі жеке фигураларды таңдауға мүмкіндік береді. Бұл дегеніміз, сіз әр түрлі уақытта кескіннің әртүрлі формаларын жандандырып, одан да күрделі эффект жасай аласыз.
svg> g> rect width = «147.4107» height = «68.7917» x = «31.2946» y = «114.1042» rx = «4.5882» ry = «3.9565» fill = «# 2a7fff» /> path d = «... «vector-effect =» scaling-stroke «stroke-width =». 470476156 «font-size =» 12 «fill =» # fff «fill-rule =» evenodd «stroke =» # fff «stroke-linecap = «дөңгелек» /> / g> / svg>
07. Бастапқы күйлер
Біздің SVG элементтерімізді CSS-та таңдау кез-келген басқа элементтермен бірдей. Біз SVG ішіндегі элементтерді таңдау үшін өз сабағымызды қолданамыз. SVG-дің екі бөлігі де парақ жүктелген кезде жасырын болып басталады, сондықтан CSS-ті екі элементтің бұлыңғырлығын орнату үшін қолданайық 0.
path.rectText {мөлдірлігі: 0; } rect.rectBackground {мөлдірлігі: 0; }
08. Анимацияларды жариялаңыз
Біз CSS эффект жасауды сұрағанда не істегіміз келетінін білуі үшін әр анимацияның аты мен негізгі кадрларын жариялауымыз керек. Мен таңдадым textDraw және rectFade, өйткені олар әр анимацияны сипаттайды. rectFade қарапайым екі сатылы анимация болады. textDraw қосымша орта қадамға ие болады.
@keyframes textDraw {0% {} 50% {} 100% {}} @keyframes rectFade {бастап {} бастап {}}
09. Анимация мен қасиеттерді тағайындаңыз
Біз қосамыз rectFade үшін анимация rectBackground элементті қосып, оған бір секундтың ұзақтығын беріңіз. Ан easeOut Текше безергісі оны тегіс сезіну үшін қолданылады. Біз қосамыз алға сондықтан анимация аяқталғаннан кейін элемент соңғы негізгі кадрдың қасиеттерін сақтайды.
rect.rectBackground {мөлдірлігі: 0; анимация: rectFade 1s текше-базе (0.645, 0.045, 0.355, 1) алға; }
10. Тіктөртбұрыш анимациясы
Тек екі негізгі кадрдың көмегімен тіктөртбұрыш үшін атрибуттардың басталу және аяқталу жиыны орнатылуы керек. Бастайық 1% ені және аяқталуы 100% «дұрыс нәтижеге дейін кеңейту». Біз сонымен қатар қоя аламыз бұлыңғырлық: 1 соңғы кадрға дейін, сол уақытта пішін өшеді.
@keyframes rectFade {бастап {ені: 1%; } бастап {ені: 100%; мөлдірлік: 1; }}
11. Мәтіндік анимация
Біз мәтінге сызу әсері жасаймыз, содан кейін өшіру үшін толтырғышты қолданамыз. Мәтін анимациясын орнату үшін біз оған textDraw төрт секундтық уақытпен. Бұл қадамда текше қозғалтқыш өзгертіліп, оған қозғалыс жылдамдығы сәл өзгеше болады.
path.rectText {мөлдірлігі: 0; анимация: textDraw 4s текше-безер (.56, -0.04, .32, .7) алға; }
12. Басталуды кейінге қалдырыңыз
Біздің мәтініміз тіктөртбұрыш сөніп біткендей жұмыс істеуі керек. Тік төртбұрыштың ұзақтығы бір секунд болғандықтан, мәтін анимациясының басталуын сол уақытқа қалдырыңыз.
path.rectText {мөлдірлігі: 0; анимация: textDraw 4s текше-безер (.56, -0.04, .32, .7) алға; анимацияның кідірісі: 1с; }
13. Сызықтық сызуды еліктеңіз
Сызықтық әсерді алу үшін біз қолданамыз инсульт-сызықша және инсульт-дашоффет параметрлері. Сіз қолданып отырған SVG-ге байланысты сіздің мәндеріңіз әр түрлі болады. Өз құндылығыңызды табу үшін таңдаулы құралды қолданып, көбейтіңіз инсульт-сызықша бастап 0 бүкіл пішін бір соққымен жабылғанша.
path.rectText {мөлдірлігі: 0; соққы-дашаррей: 735; анимация: textDraw 4s текше-безер (.56, -0.04, .32, .7) алға; анимацияның кідірісі: 1с; }
14. Кескіннің бірінші рамасы
Енді бізде бүкіл мәтін жолын қамтитын өте үлкен инсульт бар, оны тиімді түрде ығыстыру үшін оны өз ұзындығымен өтейік. Қолдану инсульт-дашоффет біздікіндей құндылық үшін dasharray мұны істеу керек. Келіңіздер, мұны бірінші кадрлық кадрға енгізейік. Сондай-ақ, біз кескінді мөлдір етіп, егер ол әлі болмаса, оны ақ түске келтіреміз.
0% {толтыру: rgb (255, 255, 255, 0); инсульт: #fff; соққы-дашофсет: 800; мөлдірлік: 1; }
15. Сызықтарды салыңыз
Біздің ортаңғы негізгі кадрымыз келесіде пайда болады 40% анимация арқылы. Біз әкелеміз инсульт-дашоффет сызықша бүкіл жолды қамтитын етіп нөлге оралады. Толтыру сызба аяқталғаннан кейін ғана пайда болатындығына көз жеткізу үшін осы кезеңде мөлдір толтыруды қайтадан қосуға болады.
40% {инсульт-дашофсет: 0; толтыру: rgb (255, 255, 255, 0,0); }
16. Пішінді толтырыңыз
Анимацияның соңғы бөлігі үшін біз форманы ақ түске толтырамыз. Соңғы кадр үшін бізге тек бояу түсінің альфа мәнін көтеру керек. Бұл толтырудың сөну әсерін тудырады.
100% {толтыру: rgb (255, 255, 255, 1); соққы-дашофсет: 0; мөлдірлік: 1; }
Бұл мақала бастапқыда веб-дизайн журналында жарияланған Веб-дизайнер. 286. шығарылым немесе жазылу.
