بۇنى تەسۋىرلەپ بېرىڭ: سىز يېڭى تۈرگە قاتنىشىسىز ، كود ساندۇقىغا شۇڭغۇپ كىرىسىز ، دەسلەپكى بىر نەچچە سائەت ئىچىدە كىشىنى ئۈمىدسىزلەندۈرىدىغان بىر نەرسىنى بايقايسىز. ئۇسلۇب جەدۋىلىگە تارقالغان ، ئوخشاش بىر ئاساسىي كارتون ئۈچۈن نۇرغۇن @keyframes ئېنىقلىمىسىنى تاپالايسىز. ئۈچ خىل ئوخشىمىغان سۇسلاش ئۈنۈمى ، ئىككى ياكى ئۈچ تام تەسۋىرنىڭ ئۆزگىرىشى ، بىر نەچچە چوڭايتىش كارتون فىلىمى ۋە كەم دېگەندە ئىككى خىل ئوخشىمىغان ئايلانما كارتون ، چۈنكى ، نېمىشقا بولمايدۇ؟ @keyframes pulse { دىن { كۆلەم: 1; } to { كۆلەم: 1.1; } }
@keyframes چوڭ-تومۇر { 0%, 20%, 100% { كۆلەم: 1; } 10%, 40% { كۆلەم: 1.2; } }
ئەگەر بۇ ئەھۋال تونۇشتەك تۇيۇلسا ، سىز يالغۇز ئەمەس. ھەر خىل تۈرلەردىكى تەجرىبەمدە ، مەن يەتكۈزەلەيدىغان ئەڭ مۇقىم تېز غەلبىنىڭ بىرى ئاچقۇچلۇق رامكىلارنى مۇستەھكەملەش ۋە قېلىپلاشتۇرۇش. ئۇ شۇنداق ئىشەنچلىك ئەندىزە بولۇپ قالدى ، مەن ھازىر بۇ تازىلاشنى ھەر قانداق يېڭى كود يەشكۈچتىكى بىرىنچى ۋەزىپەمنىڭ بىرى سۈپىتىدە ئۈمىد قىلىمەن. مالىمانچىلىقنىڭ ئارقىسىدىكى لوگىكا بۇ ئارتۇقچىلىقنى ئويلىغىنىڭىزدا ناھايىتى ئەقىلگە مۇۋاپىق. كۈندىلىك خىزمىتىمىزدە ھەممىمىز ئوخشاش ئاساسىي كارتونلارنى ئىشلىتىمىز: سۇسلاش ، تام تەسۋىر ، چوڭايتىش ، ئايلىنىش ۋە باشقا كۆپ ئۇچرايدىغان ئۈنۈملەر. بۇ كارتونلار ناھايىتى ئاددىي بولۇپ ، خىزمەتنى ئورۇنداش ئۈچۈن تېز @keyframes ئېنىقلىمىسىنى قامچىلاش ئاسان. مەركەزلىك كارتون سىستېمىسى بولمىسا ، پروگراممېرلار بۇ ئاچقۇچلۇق رامكىلارنى تەبىئىيلا كود يازىدۇ ، بۇنىڭغا ئوخشاش كارتونلارنىڭ كود يەشكۈچىنىڭ باشقا جايلىرىدا مەۋجۇت ئىكەنلىكىنى بىلمەيدۇ. بۇ زاپچاسلارنى ئاساس قىلغان بىناكارلىق قۇرۇلۇشلىرىدا ئىشلىگەندە كۆپ ئۇچرايدۇ (كۆپىنچە مۇشۇ كۈنلەردە قىلىمىز) ، چۈنكى گۇرۇپپىلار دائىم قوللىنىشچان پروگراممىنىڭ ئوخشىمىغان جايلىرىدا پاراللېل ئىشلەيدۇ. نەتىجە؟ كارتون قالايمىقانچىلىق. كىچىك مەسىلە ئاچقۇچلۇق رامكىلارنى كۆپەيتىشتىكى ئەڭ روشەن مەسىلىلەر تەرەققىيات ۋاقتى ۋە زۆرۈر بولمىغان كودلار ئىسراپ بولىدۇ. كۆپ ئاچقۇچلۇق ئېنىقلىما تەلەپلەر ئۆزگەرگەندە يېڭىلايدىغان كۆپ جاينى كۆرسىتىدۇ. سۇس كارتون ۋاقتىڭىزنى تەڭشەش كېرەكمۇ؟ كود يەشكۈچتىكى ھەر بىر مىسالنى ئوۋلىشىڭىز كېرەك. بوشىتىش ئىقتىدارىنى قېلىپلاشتۇرماقچىمۇ؟ بارلىق ئۆزگىرىشلەرنى تېپىشقا ئامەت تىلەيمەن. ئاسراش نۇقتىلىرىنىڭ كۆپىيىشى ھەتتا ئاددىي كارتون يېڭىلاشنىمۇ ۋاقىت ئىسراپ قىلىدىغان ۋەزىپە قىلىدۇ. چوڭ مەسىلە بۇ كۇنۇپكا تاختىسىنىڭ كۆپەيتىلىشى يەر يۈزىگە يوشۇرۇنغان تېخىمۇ يوشۇرۇن مەسىلە پەيدا قىلىدۇ: يەرشارى دائىرىسى توزىقى. زاپچاسنى ئاساس قىلغان قۇرۇلۇشلار بىلەن ھەمكارلاشقاندىمۇ ، CSS ئاچقۇچ رامكىسى دۇنيا مىقياسىدا ھەمىشە ئېنىقلىنىدۇ. بۇ بارلىق كۇنۇپكىلارنىڭ بارلىق زاپچاسلارغا ماس كېلىدىغانلىقىدىن دېرەك بېرىدۇ. ھەمىشە. شۇنداق ، كارتون فىلىمىڭىز تەركىبىدە ئېنىقلىغان ئاچقۇچلۇق رامكىلارنى ئىشلىتىشى ناتايىن. ئۇ يەر شارى دائىرىسىگە يۈكلەنگەن ئوخشاش ئىسىم بىلەن ماس كېلىدىغان ئەڭ ئاخىرقى ئاچقۇچ رامكىسىنى ئىشلىتىدۇ. بارلىق ئاچقۇچلۇق رامكىلىرىڭىز ئوخشاش بولسىلا ، بۇ قارىماققا كىچىك مەسىلەدەك قىلىدۇ. ئەمما مەلۇم بىر ئىشلىتىش قېپى ئۈچۈن كارتوننى خاسلاشتۇرماقچى بولغان پەيتتە ، ئاۋارىچىلىككە دۇچ كېلىسىز ، ياكى تېخىمۇ ناچار بولغىنى ، سىز ئۇلارنى كەلتۈرۈپ چىقىرىدىغان ئادەم بولۇپ قالىسىز. ياكى كارتون فىلىمىڭىز كارغا كەلمەيدۇ ، چۈنكى سىزدىن كېيىن قاچىلانغان باشقا بىر زاپچاس ، كۇنۇپكا تاختىڭىزنى قاپلىۋالىدۇ ، ياكى زاپچاسلىرىڭىز ئاخىرقى قېتىم يۈكلىنىدۇ ۋە ئېھتىياتسىزلىقتىن بۇ كۇنۇپكا نامىنىڭ نامىنى ئىشلىتىپ باشقا بارلىق زاپچاسلارنىڭ كارتون ھەرىكىتىنى ئۆزگەرتىدۇ ، ھەتتا ئۇنى ھېس قىلالماسلىقىڭىز مۇمكىن. بۇ مەسىلىنى كۆرسىتىپ بېرىدىغان ئاددىي بىر مىسال: .component-one { / * زاپچاس ئۇسلۇبى * / كارتون فىلىم: تومۇر 1s ئاسانلىقچە چەكسىز ئالمىشىش }
/ * بۇ @keyframes ئېنىقلىمىسى ئىشلىمەيدۇ * / @keyframes pulse { دىن { كۆلەم: 1; } to { كۆلەم: 1.1; } }
/ * كېيىن كودتا ... * /
.component-two { / * زاپچاس ئۇسلۇبى * / كارتون: تومۇر 1s ئاسان-ئاسان چەكسىز. }
/ * بۇ ئاچقۇچلۇق رامكىلار ھەر ئىككى زاپچاسقا ماس كېلىدۇ * / @keyframes pulse { 0%, 20%, 100% { كۆلەم: 1; } 10%, 40% { كۆلەم: 1.2; } }
ھەر ئىككى زاپچاس ئوخشاش كارتون نامىنى ئىشلىتىدۇ ، ئەمما ئىككىنچى @keyframes ئېنىقلىمىسى بىرىنچىسىنى قاپلىۋالىدۇ. ھازىر قايسى تەركىبلەر قايسى كۇنۇپكىلارنىڭ ئېنىقلانغان بولۇشىدىن قەتئىينەزەر ، ئىككىنچى بۆلەك ۋە ئىككىنچى بۆلەك ئىككىنچى ئاچقۇچلۇق رامكىنى ئىشلىتىدۇ. Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 1 نى كۆرۈڭ. ئەڭ ناچار يېرى؟ بۇ كۆپىنچە يەرلىك تەرەققىياتتا ناھايىتى ياخشى ئىشلەيدۇ ، ئەمما قۇرۇلۇش جەريانىدا ئۇسلۇب جەدۋىلىڭىزنىڭ يۈكلەش تەرتىپىنى ئۆزگەرتكەندە ئىشلەپچىقىرىشتا سىرلىق بۇزۇلۇپ كېتىدۇ. سىز قايسى زاپچاسلارنىڭ قاچىلانغانلىقى ۋە قايسى تەرتىپ بويىچە ئوخشىمايدىغانلىقىنى كۆرسىتىپ بېرىدىغان ھەرىكەتلەر بىلەن ئاخىرلىشىسىز. ھەل قىلىش چارىسى: بىرلىككە كەلگەن ئاچقۇچلۇق رامكا بۇ قالايمىقانچىلىقنىڭ جاۋابى ھەيران قالارلىق دەرىجىدە ئاددىي: ئورتاق ئۇسلۇب جەدۋىلىدە ساقلانغان ئالدىن بېكىتىلگەن ھەرىكەتچان كۇنۇپكا. ھەر بىر زاپچاسنىڭ ئۆزىنىڭ كارتون فىلىمىگە ئېنىقلىما بېرىشىنىڭ ئورنىغا ، بىز ھۆججەتلىرى تولۇق ، ئاسان بولغان مەركەزلىك ئاچقۇچلۇق رامكىلارنى قۇرىمىزئىشلىتىش ، ئاسراش ۋە تۈرنىڭ كونكرېت ئېھتىياجىغا ماسلاشتۇرۇش. ئۇنى ئاچقۇچلۇق بەلگە دەپ ئويلاڭ. بىز رەڭ ۋە بوشلۇق ئۈچۈن بەلگە ئىشلەتكەنگە ئوخشاش ، نۇرغۇن كىشىلىرىمىز ئۇزۇنلۇق ۋە بوشاشتۇرۇش فۇنكسىيەسىگە ئوخشاش كارتون خۇسۇسىيىتى ئۈچۈن بەلگە ئىشلەتكەنگە ئوخشاش ، نېمىشقا ئاچقۇچ كۇنۇپكىسى ئۈچۈن بەلگە ئىشلەتمەيمىز؟ بۇ ئۇسۇل كىچىك مەسىلىنى (كود كۆپەيتىش) ۋە چوڭراق مەسىلىنى (يەرشارى دائىرىسى توقۇنۇشى) بىرلا ۋاقىتتا ھەل قىلىش بىلەن بىر ۋاقىتتا ، سىز ئىشلىتىۋاتقان نۆۋەتتىكى لايىھىلەش بەلگە خىزمەت ئېقىمى بىلەن تەبىئىي بىرلەشتۈرەلەيدۇ. ئىدىيە بىۋاسىتە: بارلىق ئورتاق كارتونلىرىمىز ئۈچۈن بىرلا ھەقىقەت مەنبەسىنى بارلىققا كەلتۈرۈڭ. بۇ ھەمبەھىر ئۇسلۇب جەدۋىلىدە ئەستايىدىللىق بىلەن ياسالغان ئاچقۇچلۇق رامكىلار بار بولۇپ ، تۈرىمىز ئەمەلىيەتتە ئىشلىتىدىغان كارتون ئەندىزىسىنى ئۆز ئىچىگە ئالىدۇ. ئەمدى كود يەشكۈچنىڭ مەلۇم يېرىدە سۇس كارتوننىڭ بار-يوقلۇقىنى پەرەز قىلىشقا بولمايدۇ. باشقا زاپچاسلارنىڭ ئېھتىياتسىزلىقتىن قاپلانغان كارتونلىرى ئەمدى بولمايدۇ. ئەمما بۇ يەردە ئاچقۇچ: بۇلار پەقەت تۇراقلىق كۆپەيتىش-چاپلاش كارتونلىرىلا ئەمەس. ئۇلار CSS خاسلىقى ئارقىلىق ھەرىكەتچان ۋە خاسلاشتۇرغىلى بولىدىغان قىلىپ لايىھىلەنگەن بولۇپ ، بىز يەنىلا بىر يەردە سەل چوڭراق «تومۇر» كارتونغا ئېھتىياجلىق بولسىڭىز ، كارتوننى كونكرېت ئىشلىتىش قېپىغا ماسلاشتۇرۇش بىلەن بىللە ، ئىزچىللىقنى ساقلىيالايمىز. تۇنجى ئاچقۇچلۇق رامكا قۇرۇلدى بىز ھەل قىلىشقا تېگىشلىك تۇنجى تۆۋەن ئېسىلغان مېۋىلەرنىڭ بىرى «سۇسلاش» كارتون فىلىمى. مېنىڭ يېقىنقى تۈرلىرىمنىڭ بىرىدە ، مەن ئوندىن ئارتۇق سۇسلىشىش ئېنىقلىمىسىنى بايقىدىم ، شۇنداق ، ئۇلارنىڭ ھەممىسى پەقەت 0 دىن 1 گىچە بولغان بوشلۇقنى جانلاندۇردى. شۇڭا ، بىز يېڭى ئۇسلۇب جەدۋىلى قۇرايلى ، ئۇنى kf-tokens.css دەپ ئاتايمىز ، ئۇنى تۈرىمىزگە ئەكىرىپ ، ئاچقۇچلۇق رامكىمىزنى ئىچىگە مۇۋاپىق باھا بىلەن قويايلى. / * keyframes-tokens.css * /
/ * * سۇسلاش - سۇس كىرىش كارتون * ئىشلىتىلىشى: كارتون: kf-fade-in 0.3s ئاسانلاشتۇرۇلىدۇ * / @keyframes kf-fade-in { دىن { ئېنىقلىق: 0; } to { ئېنىقلىق: 1; } }
بۇ يەككە @keyframes خىتابنامىسى كود يەشكۈچتىكى چېچىلىپ كەتكەن سۇس كارتونلارنىڭ ئورنىنى ئالىدۇ. پاكىز ، ئاددىي ۋە دۇنيا مىقياسىدا قوللىنىلىدۇ. ھازىر بىز بۇ بەلگە ئېنىقلانغاندىن كېيىن ، ئۇنى بارلىق تۈرلىرىمىزدىن ئىشلىتەلەيمىز: .modal { كارتون فىلىم: kf-fade-in 0.3s ئاسانلاشتۇرۇلىدۇ }
.tooltip { كارتون فىلىم: kf-fade-in 0.2s ئوڭايسىزلىنىش }
.notification { كارتون فىلىم: kf-fade-in 0.5s قۇلايلىق }
Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 2 نى كۆرۈڭ. ئەسكەرتىش: بىز بارلىق @keyframes ئىسىملىرىمىزدا kf- prefix ئىشلىتىۋاتىمىز. بۇ ئالدى قوشۇلغۇچى ئىسىم بوشلۇقى بولۇپ ، بۇ تۈردىكى مەۋجۇت كارتونلار بىلەن ئىسىم قويۇش توقۇنۇشىنىڭ ئالدىنى ئالىدۇ ۋە بۇ ئاچقۇچلۇق رامكىلارنىڭ بىزنىڭ ئاچقۇچلۇق رامكا بەلگە ھۆججىتىمىزدىن كەلگەنلىكىنى دەرھال ئېنىق كۆرسىتىپ بېرىدۇ. ھەرىكەتچان تام تەسۋىر ياساش Kf- سۇسلاشتۇرۇلغان ئاچقۇچلۇق رامكىلار ناھايىتى ياخشى ئىشلەيدۇ ، چۈنكى ئۇ ئاددىي ھەم ئىشلارنى قالايمىقان قىلىدىغان بوشلۇق يوق. باشقا كارتون فىلىملەردە ، بىز تېخىمۇ ھەرىكەتچان بولۇشىمىز كېرەك ، بۇ يەردە بىز CSS خاس مۈلۈكلىرىنىڭ غايەت زور كۈچىنى جارى قىلدۇرالايمىز. چېچىلىپ كەتكەن تۇراقلىق كارتونغا سېلىشتۇرغاندا ، ئاچقۇچلۇق بەلگە بەلگىسى ھەقىقەتەن پارقىرايدۇ. ئورتاق بىر سىنارىيەنى ئالايلى: «تام تەسۋىر» كارتونلىرى. ئەمما قەيەردىن سىيرىلىدۇ؟ ئوڭدىن 100px؟ سولدىن 50%؟ ئۇ ئېكراننىڭ ئۈستىدىن كىرەمدۇ؟ ياكى ئاستىدىن لەيلەپ قېلىشى مۇمكىن؟ شۇڭا نۇرغۇن مۇمكىنچىلىكلەر بار ، ئەمما ھەر بىر يۆنىلىش ۋە ھەر خىل ئۆزگىرىش ئۈچۈن ئايرىم ئاچقۇچ رامكىسى قۇرۇشنىڭ ئورنىغا ، بىز بارلىق سىنارىيەلەرگە ماس كېلىدىغان جانلىق بەلگە ھاسىل قىلالايمىز: / * * تام تەسۋىر - يۆنىلىشلىك تام تەسۋىر كارتون * --Kf-slide-from دىن يۆنىلىشنى كونترول قىلىڭ * سۈكۈت: سولدىن سىيرىلىدۇ (-100%) * ئىشلىتىش: * كارتون فىلىم: kf-slide-in 0.3s ئاسانلاشتۇرۇلىدۇ * --kf-slide-from: -100px 0; // سولدىن سىيرىلىش * --kf-slide-from: 100px 0; // ئوڭدىن سىيرىلىش * --kf-slide-from: 0 -50px; // يۇقىرىدىن سىيرىلىش * /
@keyframes kf-slide-in { دىن { تەرجىمە: var (- kf-slide-from, -100% 0); } to { تەرجىمە: 0 0; } }
ھازىر بىز بۇ يەككە @keyframes بەلگىسىنى ھەر قانداق تام تەسۋىر يۆنىلىشى ئۈچۈن --kf- تام تەسۋىردىن خاس مۈلۈكنى ئۆزگەرتىش ئارقىلىق ئىشلىتەلەيمىز: .sidebar { كارتون فىلىم: kf-slide-0.3s ئاسانلاشتۇرۇلىدۇ / * سۈكۈتتىكى قىممەتنى ئىشلىتىدۇ: سولدىن تام تەسۋىر * / }
.notification { كارتون فىلىم: kf-slide-in 0.4s ئوڭايسىزلىنىش --kf-slide-from: 0 -50px; / * ئۈستىدىن سىيرىلىش * / }
.modal { animation: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; / * ئاستى-ئوڭدىن سىيرىلىش * / }
بۇ ئۇسۇل ئىزچىللىقنى ساقلاش بىلەن بىللە بىزگە ئاجايىپ جانلىقلىق ئاتا قىلىدۇ. بىر ئاچقۇچلۇق خىتابنامە ، چەكسىز مۇمكىنچىلىك. Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 3 نى كۆرۈڭ. ئەگەر بىز كارتونلىرىمىزنى تېخىمۇ جانلىق قىلماقچى بولساق ، «سىيرىلىش» ئۈنۈمىگىمۇ يول قويساق ، قىلالايمىزكېيىنكى بۆلەكتە كۆرگەنگە ئوخشاش --kf- تام تەسۋىرنى خاس مۈلۈككە قوشۇڭ. قوش يۆنىلىشلىك چوڭايتىش كۇنۇپكىسى تۈرلەردە تەكرارلىنىدىغان يەنە بىر كۆپ ئۇچرايدىغان كارتون «چوڭايتىش» ئۈنۈمى. مەيلى توست ئۇچۇرلىرى ئۈچۈن ئىنچىكە چوڭلۇقتا بولسۇن ، مودېللارنى دراماتىك چوڭايتىش ياكى ماۋزۇلارغا مۇلايىم كىچىكلىتىش ئۈنۈمى بولسۇن ، چوڭايتىش كارتونلىرى ھەممە يەردە بار. ھەر بىر كۆلەم قىممىتى ئۈچۈن ئايرىم ئاچقۇچ رامكىسى قۇرۇشنىڭ ئورنىغا ، بىر يۈرۈش جانلىق kf-zoom كۇنۇپكا تاختىسىنى قۇرايلى:
/ * * چوڭايتىش - كۆلەمدىكى كارتون * --Kf-zoom-from ۋە --kf-zoom-نى ئىشلىتىپ كۆلەم قىممىتىنى كونترول قىلىڭ * سۈكۈت:% 80 تىن% 100 كىچە چوڭايتىدۇ (0.8 دىن 1 گىچە) * ئىشلىتىش: * كارتون: kf-zoom 0.2s ئاسانلاشتۇرۇلىدۇ * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // چوڭايتىش% 50 تىن% 100 كىچە * --kf-zoom-from: 1; --kf-zoom-to: 0; // چوڭايتىش% 100 تىن% 0 كىچە * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // چوڭايتىش% 100 تىن% 110 كىچە * /
@keyframes kf-zoom { دىن { كۆلەم: var (- kf-zoom-from, 0.8); } to { كۆلەم: var (- kf-zoom-to, 1); } }
بىر ئېنىقلىما ئارقىلىق ، بىز ئېھتىياجلىق بولغان چوڭايتىشنىڭ ئۆزگىرىشىنى ئەمەلگە ئاشۇرالايمىز: .toast { animation: kf-slide-in 0.2s, kf-zoom 0.4s قولايسىز; --kf-slide-from: 0 100%; / * ئۈستىدىن سىيرىلىش * / / * سۈكۈتتىكى چوڭايتىشنى ئىشلىتىدۇ: تارازا% 80 تىن% 100 كىچە * / }
.modal { كارتون: kf-zoom 0.3s كۇب-بېزېر (0.34 ، 1.56 ، 0.64 ، 1); --kf-zoom-from: 0; / * دراماتىك چوڭايتىش% 0 تىن% 100 كىچە * / }
.heading { animation: kf-fade-in 2s, kf-zoom 2s ئاسان; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; / * مۇلايىم كۆلەم تۆۋەن }
سۈكۈتتىكى 0.8 (% 80) كۆپىنچە UI ئېلېمېنتلىرىغا ماس كېلىدۇ ، مەسىلەن توست ئۇچۇرلىرى ۋە كارتىلارغا ئوخشاش ، ئالاھىدە ئەھۋاللارنى تەڭشەش يەنىلا ئاسان. Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 4 [چاتما] نى كۆرۈڭ. سىز يېقىنقى مىساللاردا قىزىقارلىق بىر نەرسىنى بايقىغان بولۇشىڭىز مۇمكىن: بىز كارتوننى بىرلەشتۈردۇق. @Keyframes بەلگىسى بىلەن ئىشلەشنىڭ مۇھىم ئەۋزەللىكىنىڭ بىرى ، ئۇلار ئۆز-ئارا ماس قەدەمدە بىرلەشتۈرۈش ئۈچۈن لايىھەلەنگەن. بۇ سىلىق تەركىب قەستەن ئەمەس ، تاسادىپىي ئەمەس. بىز كارتون تەركىبلىرىنى كېيىنرەك تەپسىلىي مۇلاھىزە قىلىمىز ، بۇنىڭ قەيەردە مەسىلە بولۇپ قالىدىغانلىقىنى ئۆز ئىچىگە ئالىدۇ ، ئەمما كۆپىنچە بىرىكمىلەر بىۋاسىتە ۋە يولغا قويۇش ئاسان. ئەسكەرتىش: بۇ ماقالىنى يېزىش جەريانىدا ، بەلكىم ئۇنى يازغانلىقىم ئۈچۈن ، مەن كىرىش كارتونلىرىنىڭ پۈتكۈل ئوي-پىكىرلىرىنى قايتا ئويلىنىۋاتقانلىقىمنى بايقىدىم. CSS دىكى يېقىنقى ئىلگىرىلەشلەر بىلەن بىز يەنىلا ئۇلارغا ئېھتىياجلىقمۇ؟ تەلىيىمىزگە ، ئادام ئارگىل ئوخشاش سوئاللارنى تەتقىق قىلىپ ، بىلوگىدا ناھايىتى قالتىس ئىپادىلىگەن. بۇ بۇ يەردە يېزىلغانلارغا زىت ئەمەس ، ئەمما ئۇ ئويلىنىشقا ئەرزىيدىغان ئۇسۇلنى ئوتتۇرىغا قويدى ، بولۇپمۇ تۈرلىرىڭىز كىرىش كارتونلىرىغا تايانسا. ئۈزلۈكسىز كارتون كىرىش كارتونلىرى «سۇسلاش» ، «سىيرىلىش» ۋە «چوڭايتىش» قا ئوخشاش بىر قېتىم يۈز بېرىپ ، توختاپ قالسىمۇ ، توختىماي ھەرىكەتلىنىدىغان ھەرىكەتلەر دىققەتنى تارتىش ياكى داۋام قىلىۋاتقان پائالىيەتلەرنى كۆرسىتىش ئۈچۈن مۇددەتسىز ئايلىنىدۇ. مەن ئۇچراتقان ئەڭ كۆپ ئۇچرايدىغان ئىككى كارتون «ئايلىنىش» (كۆرسەتكۈچ يۈكلەش ئۈچۈن) ۋە «تومۇر» (مۇھىم ئېلېمېنتلارنى گەۋدىلەندۈرۈش ئۈچۈن). بۇ كارتون فىلىملەر ئاچقۇچلۇق بەلگە ھاسىل قىلغاندا ئۆزگىچە رىقابەتلەرنى ئوتتۇرىغا قويدى. ئادەتتە بىر ھالەتتىن يەنە بىر ھالەتكە ئۆتىدىغان كىرىش كارتونلىرىغا ئوخشىمايدىغىنى ، ئۈزلۈكسىز ھەرىكەتلەر ئۇلارنىڭ ھەرىكەت ئەندىزىسىدە يۇقىرى دەرىجىدە خاسلاشتۇرۇلۇشى كېرەك. The Spin Doctor ھەر بىر تۈردە كۆپ ئايلانما كارتون ئىشلىتىلگەندەك قىلىدۇ. بەزىلىرى سائەت يۆنىلىشىدە ئايلىنىدۇ ، بەزىلىرى سائەت قارشى يۆنىلىشتە ئايلىنىدۇ. بەزىلىرى 360 گرادۇسلۇق ئايلىنىشنى قىلىدۇ ، بەزىلىرى تېخىمۇ تېز ئۈنۈم ئۈچۈن كۆپ قېتىم بۇرۇلۇش قىلىدۇ. ھەر بىر ئۆزگىرىش ئۈچۈن ئايرىم ئاچقۇچ رامكىسى قۇرۇشنىڭ ئورنىغا ، بارلىق سىنارىيەلەرنى بىر تەرەپ قىلىدىغان جانلىق ئەۋرىشىم قۇرايلى:
/ * * ئايلىنىش - ئايلىنىش كارتون * --Kf-spin-from ۋە --kf-spin دىن پايدىلىنىپ ئايلىنىش دائىرىسىنى كونترول قىلىڭ * --Kf-spin-turn نى ئىشلىتىپ ئايلىنىش مىقدارىنى كونترول قىلىڭ * سۈكۈت: 0deg دىن 360deg غا ئايلىنىدۇ (1 تولۇق ئايلىنىش) * ئىشلىتىش: * كارتون: kf-spin 1s سىزىقلىق چەكسىز; * --kf-spin-turn: 2; // 2 تولۇق ئايلىنىش * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // يېرىم ئايلىنىش * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // سائەتكە قارشى * /
@keyframes kf-spin { دىن { ئايلاندۇرۇش: var (- kf-spin-from, 0deg); } to { ئايلاندۇرۇش: ھېسابلاش (var (- kf-spin-from, 0deg) + var (- kf-spin-to, 360deg) * var (- kf-spin-turn, 1)); } }
ھازىر بىز ياقتۇرىدىغان ھەر قانداق ئايلانما ئۆزگىرىش ھاسىل قىلالايمىز:
.loading-spinner { كارتون: kf-spin 1s سىزىقلىق چەكسىز; / * سۈكۈتتىكىنى ئىشلىتىدۇ: 0deg دىن 360deg غا ئايلىنىدۇ * / }
.fast-loader { كارتون: kf-spin 1.2s ئاسانلىقچە چەكسىز ئالمىشىش --kf-spin-turn: 3; / * ھەر بىر دەۋرىيلىكنىڭ ھەر بىر يۆنىلىشى ئۈچۈن 3 تولۇق ئايلىنىش* / }
.steped-reverse { كارتون: kf-spin 1.5s قەدەم (8) چەكسىز; --kf-spin-to: -360deg; / * سائەت قارشى يۆنىلىشتە * / }
.subtle-wiggle { كارتون: kf-spin 2s ئوڭايسىز چەكسىز ئالمىشىش --kf-spin-from: -16deg; --kf-spin-to: 32deg; / * wiggle 36 deg: -18deg بىلەن + 18deg * / }
Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 5 نى كۆرۈڭ. بۇ خىل ئۇسۇلنىڭ گۈزەللىكى شۇكى ، ئوخشاش ئاچقۇچلۇق رامكىلار ئايلانما يۈك قاچىلاش ، ئايلانما سىنبەلگە ، تەۋرىنىش ئۈنۈمى ، ھەتتا مۇرەككەپ كۆپ بۇرۇلۇش كارتونلىرى ئۈچۈن خىزمەت قىلىدۇ. Pulse Paradox تومۇر كارتونلىرى تېخىمۇ مۇرەككەپ ، چۈنكى ئۇلار ئوخشىمىغان خۇسۇسىيەتلەرنى «تومۇر» قىلالايدۇ. بەزىلىرى تارازىنى توسۇۋالىدۇ ، بەزىلىرى سۈزۈكلۈكنى ئۇرغۇتىدۇ ، بەزىلىرى تومۇرنىڭ رەڭ خۇسۇسىيىتى يورۇقلۇق ياكى تويۇنۇشقا ئوخشاش. ھەر بىر مۈلۈك ئۈچۈن ئايرىم ئاچقۇچ رامكىسى قۇرۇشنىڭ ئورنىغا ، بىز ھەر قانداق CSS خاسلىقى بىلەن ئىشلەيدىغان ئاچقۇچلۇق رامكىلارنى قۇرالايمىز. بۇ يەردە چوڭ-كىچىكلىكى ۋە ئوچۇق-ئاشكارە تاللاشلىرى بار تومۇر ئاچقۇچنىڭ مىسالى:
/ * * تومۇر - سوقۇلغان كارتون * --Kf-pulse-scale-from ۋە --kf-pulse-scale-to نى ئىشلىتىپ كۆلەم دائىرىسىنى كونترول قىلىڭ * --Kf-pulse-opacity-from ۋە --kf-pulse-opacity نى ئىشلىتىپ ، ئېنىقلىق دائىرىسىنى كونترول قىلىڭ * سۈكۈت: تومۇر يوق (بارلىق قىممەتلەر 1) * ئىشلىتىش: * كارتون: kf-pulse 2s ئاسانلىقچە چەكسىز ئالمىشىش. * --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; // كۆلەمدىكى تومۇر * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // ئوپتىكىلىق تومۇر * /
@keyframes kf-pulse { دىن { كۆلەم: var (- kf-pulse-scale-from, 1); opacity: var (- kf-pulse-opacity-from, 1); } to { كۆلەم: var (- kf-pulse-scale-to, 1); ئېنىقلىق: var (- kf-pulse-opacity-to, 1); } }
بۇ كۆپ خىل خۇسۇسىيەتنى جانلىق جانلىق جانلىق تومۇر ھاسىل قىلىدۇ: .call-to-action { كارتون: kf-pulse 0.6s چەكسىز ئالمىشىش --kf-pulse-opacity-from: 0.5; / * ئوپتىكىلىق تومۇر * / }
.notification-dot { كارتون: kf-pulse 0.6s ئاسانلىقچە چەكسىز ئالمىشىش --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; / * كۆلەمدىكى تومۇر * / }
.text-highlight { كارتون: kf-pulse 1.5s ئاسانلىقچە چەكسىز. --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; / * كۆلەم ۋە سۈزۈك تومۇر * / }
Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 6 نى كۆرۈڭ. بۇ يەككە kf-pulse ئاچقۇچ ھالقىسى ئىنچىكە دىققەتنى تارتىشتىن تارتىپ دراماتىك يارقىن نۇقتىلارغىچە ھەممىسىنى بىر تەرەپ قىلالايدۇ ، ھەممىسىنى تەڭشەش ئاسان. Advanced Easing ئاچقۇچلۇق بەلگە بەلگىسىنى ئىشلىتىشتىكى ئەڭ ياخشى ئىشلارنىڭ بىرى كارتون كۇتۇپخانىمىزنى كېڭەيتىشنىڭ ئاسانلىقى ۋە نۇرغۇن پروگراممېرلارنىڭ ئېلاستىك ياكى قاڭقىشقا ئوخشاش باشتىن-ئاخىر يېزىشنى ئاۋارە قىلمايدىغان ئۈنۈم بىلەن تەمىنلىشىدۇر. بۇ يەردە ئاددىي «قاڭقىش» كۇنۇپكا تاختىسىنىڭ بەلگە مىسالى بار ، ئۇ سەكرەش ئېگىزلىكىنى كونترول قىلىش ئۈچۈن خاس مۈلۈكتىن --kf- قاڭقىشتىن پايدىلىنىدۇ. / * * قاڭقىش - قاڭقىش كىرىش كارتون * سەكرەش ئېگىزلىكىنى كونترول قىلىش ئۈچۈن --kf-bounce-from نى ئىشلىتىڭ * سۈكۈت: 100vh دىن سەكرەيدۇ (ئېكران سىرتىدا) * ئىشلىتىش: * كارتون: kf-bounce 3s ئاسانلىقچە; * --kf-bounce-from: 200px; // 200px ئېگىزلىكىدىن سەكرەش * /
@keyframes kf-bounce { 0% { تەرجىمە: 0 calc (var (- kf-bounce-from, 100vh) * -1); }
34% { تەرجىمە: 0 calc (var (- kf-bounce-from, 100vh) * -0.4); }
55% { تەرجىمە: 0 calc (var (- kf-bounce-from, 100vh) * -0.2); }
72% { تەرجىمە: 0 calc (var (- kf-bounce-from, 100vh) * -0.1); }
85% { تەرجىمە: 0 calc (var (- kf-bounce-from, 100vh) * -0.05); }
94% { تەرجىمە: 0 calc (var (- kf-bounce-from, 100vh) * -0.025); }
99% { تەرجىمە: 0 calc (var (- kf-bounce-from, 100vh) * -0.0125); }
22% ، 45% ، 64% ، 79% ، 90% ، 97% ، 100% { تەرجىمە: 0 0; animation-time-function: ئاسانلاشتۇرۇش; } }
«ئېلاستىك» قا ئوخشاش كارتونلار ئاچقۇچ رامكىسىدىكى ھېسابلاش سەۋەبىدىن سەل قىيىن. بىز --kf- ئېلاستىكىلىق X دىن X ۋە --kf- ئېلاستىك- Y دىن ئايرىم ئېنىقلىشىمىز كېرەك (ھەر ئىككىسى ئىختىيارى) ، ئۇلار بىرلىكتە ئېكراننىڭ ھەر قانداق يېرىدىن ئېلاستىك كىرىش ئېغىزى ھاسىل قىلىشىمىزغا يول قويىدۇ.
/ * * ئېلاستىك In - ئېلاستىكىلىق كىرىش كارتون * X دىن --kf-elastic-X ۋە --kf-elastic-Y دىن پايدىلىنىپ باشلىنىش ئورنىنى كونترول قىلىڭ * سۈكۈت: ئۈستۈنكى مەركىزىدىن كىرىدۇ (0, -100vh) * ئىشلىتىش: * كارتون: kf-elastic-in 2s ئاسانلىقچە ھەر ئىككىسى * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // (-50px ، -200px) دىن كىرىڭ * /
@keyframes kf-elastic-in { 0% { تەرجىمە: calc (var (- kf-elastic-from-X, -50vw) * 1) calc (var (- kf-elastic-from-Y, 0px) * 1); }
16% { تەرجىمە: calc (var (- kf-elastic-from-X, -50vw) * -0.3227) calc (var (- kf-elastic-from-Y, 0px) * -0.3227); }
28% { تەرجىمە: calc (var (- kf-elastic-from-X, -50vw) * 0.1312)calc (var (- kf-elastic-from-Y, 0px) * 0.1312); }
44% { تەرجىمە: calc (var (- kf-elastic-from-X, -50vw) * -0.0463) calc (var (- kf-elastic-from-Y, 0px) * -0.0463); }
59% { تەرجىمە: calc (var (- kf-elastic-from-X, -50vw) * 0.0164) calc (var (- kf-elastic-from-Y, 0px) * 0.0164); }
73% { تەرجىمە: calc (var (- kf-elastic-from-X, -50vw) * -0.0058) calc (var (- kf-elastic-from-Y, 0px) * -0.0058); }
88% { تەرجىمە: calc (var (- kf-elastic-from-X, -50vw) * 0.0020) calc (var (- kf-elastic-from-Y, 0px) * 0.0020); }
100% { تەرجىمە: 0 0; } }
بۇ ئۇسۇل پەقەت بىرلا خاس مۈلۈكنى ئۆزگەرتىش ئارقىلىقلا ، تۈرىمىزدىكى ئىلغار ئاچقۇچلۇق رامكىلارنى قايتا ئىشلىتىش ۋە خاسلاشتۇرۇشنى ئاسانلاشتۇرىدۇ.
.bounce-and-zoom { animation: kf-bounce 3s ئاسان ، kf-zoom 3s سىزىق; --kf-zoom-from: 0; }
.bounce-and-slide { animation-composition: add; / * ھەر ئىككى كارتون تەرجىمە ئىشلىتىدۇ * / animation: kf-bounce 3s ئاسان ، kf-slide-in 3s قولايسىز; --kf-slide-from: -200px; }
.elastic-in { كارتون فىلىمى: kf-elastic-in 2s نىڭ ھەر ئىككىلىسى ئاسان. }
Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 7 نى كۆرۈڭ. مۇشۇ ۋاقىتقىچە ، بىز ئاچقۇچلۇق رامكىلارنى قانداق قىلىپ ئەقلىي ۋە ئۈنۈملۈك ئۇسۇلدا مۇستەھكەملىيەلەيدىغانلىقىمىزنى كۆردۇق. ئەلۋەتتە ، سىز بەلكىم تۈرلىرىڭىزنىڭ ئېھتىياجىغا تېخىمۇ ماس كېلىدىغان ئىشلارنى تەڭشەشنى ئويلىشىڭىز مۇمكىن ، ئەمما بىز بىر قانچە كۆپ ئۇچرايدىغان كارتون ۋە كۈندىلىك ئىشلىتىش ئەھۋاللىرىنى مىسال قىلىپ ئۆتىمىز. ئۇنىڭ ئۈستىگە بۇ ئاچقۇچلۇق بەلگە بەلگە ئورنىتىلغاندىن كېيىن ، ھازىر پۈتكۈل تۈردە ئىزچىل ، سىجىل ، جانلىق كارتون ھاسىل قىلىدىغان كۈچلۈك قۇرۇلۇش بۆلەكلىرىمىز بار. قايتا كۆپەيتىلگەن ئاچقۇچلۇق رامكىلار يوق ، يەرشارى دائىرىسى توقۇنۇشى بولمايدۇ. بىزنىڭ بارلىق كارتون ئېھتىياجىمىزنى بىر تەرەپ قىلىدىغان پاكىز ، قۇلايلىق ئۇسۇل. ئەمما ھەقىقىي مەسىلە: بۇ بىنالارنى قانداق تەشكىللەيمىز؟ ھەممىنى بىر يەرگە قويۇش بىز ئاساسىي ئاچقۇچلۇق بەلگىلەرنى بىرلەشتۈرۈشنىڭ ئاددىي ئىكەنلىكىنى كۆردۇق. بىز ئالاھىدە كارتونغا ئېنىقلىما بېرىش ، ئىككىنچىسىنى ئېنىقلاش ، ئېھتىياجغا ئاساسەن ئۆزگەرگۈچى مىقدارنى بەلگىلەشتىن باشقا ئالاھىدە نەرسە لازىم ئەمەس. / * * تام تەسۋىردە سۇسلاش .toast { animation: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/ * چوڭايتىش + سۇسلاش * / .modal { animation: kf-fade-in 0.3s, kf-zoom 0.3s كۇب-بېزېر (0.34 ، 1.56 ، 0.64 ، 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; }
/ * تومۇردىكى تام تەسۋىر * / .notification { animation: kf-slide-in 0.5s, kf-pulse 1.2s ئاسانلىقچە چەكسىز ئالمىشىدۇ. --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
بۇ بىرىكمىلەر ناھايىتى ياخشى ئىشلەيدۇ ، چۈنكى ھەر بىر كارتون ئوخشىمىغان مۈلۈكنى نىشان قىلىدۇ: ئېنىقسىزلىق ، ئۆزگەرتىش (تەرجىمە / كۆلەم) قاتارلىقلار. ئەمما بەزىدە زىددىيەتلەر يۈز بېرىدۇ ، بىز ئۇلارنىڭ نېمە ئۈچۈن ۋە قانداق بىر تەرەپ قىلىشنى بىلىشىمىز كېرەك. ئىككى كارتون ئوخشاش مۈلۈكنى جانلاندۇرماقچى بولغاندا - مەسىلەن ، ھەرىكەتچان كۆلەم ياكى ھەر ئىككى جانسىزلىقى - نەتىجىسى سىز ئويلىغاندەك بولمايدۇ. سۈكۈت بويىچە ، كارتون فىلىم ئىچىدىكى ئەڭ ئاخىرقىسى بۇ خاسلىققا پەقەت بىر كارتون قوللىنىلىدۇ. بۇ CSS نىڭ ئوخشاش بىر مۈلۈكتىكى كۆپ خىل كارتوننى قانداق بىر تەرەپ قىلىدىغانلىقىنىڭ چەكلىمىسى. مەسىلەن ، بۇ كۆڭۈلدىكىدەك ئىشلىمەيدۇ ، چۈنكى پەقەت kf-pulse كارتونسىلا قوللىنىلىدۇ. .bad-combo { animation: kf-zoom 0.5s ئالدىغا ، kf-pulse 1.2s چەكسىز ئالمىشىش; --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; }
Animation Addition ئوخشاش مۈلۈككە تەسىر كۆرسىتىدىغان كۆپ خىل كارتوننى بىر تەرەپ قىلىشنىڭ ئەڭ ئاددىي ۋە ئەڭ بىۋاسىتە ئۇسۇلى كارتون-تەركىب خاسلىقىنى ئىشلىتىش. يۇقىرىدىكى ئەڭ ئاخىرقى مىسالدا ، kf-pulse كارتون فىلىمى kf-zoom كارتوننىڭ ئورنىنى ئالىدۇ ، شۇڭا بىز دەسلەپكى چوڭايتىشنى كۆرمەيمىز ھەمدە مۆلچەردىكى كۆلەمنى 1.2 گە يەتكۈزەلمەيمىز. كارتون-تەركىبنى قوشۇش ئارقىلىق ، توركۆرگۈچكە ھەر ئىككى كارتوننى بىرلەشتۈرۈشنى دەيمىز. بۇ بىزگە لازىملىق نەتىجىنى بېرىدۇ. .component-two { animation-composition: add; }
Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 8 نى كۆرۈڭ. بىز ئوخشاش مۈلۈككە بولغان تەسىرىنى بىرلەشتۈرمەكچى بولغان كۆپىنچە ئەھۋاللاردا بۇ ئۇسۇل ياخشى ئىشلەيدۇ. كارتوننى تۇراقلىق مۈلۈك قىممىتى بىلەن بىرلەشتۈرۈشكە توغرا كەلگەندە ، ئۇمۇ پايدىلىق. مەسىلەن ، ئەگەر بىزدە تەرجىمە خاسلىقىنى ئىشلىتىپ ئۆزىمىز خالىغان ئورۇنغا توغرىلايدىغان ئېلېمېنت بولسا ، ئاندىن ئۇنى kf- سىيرىلما كۇنۇپكا تاختىسى ئارقىلىق جانلاندۇرماقچى بولساق ، كارتون-تەركىبسىز ناچار كۆرۈنگەن سەكرەشكە ئېرىشىمىز. Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 9 نى كۆرۈڭ. كارتون-تەركىب قوشۇشقا تەڭشەلگەندە ، كارتون ھازىرقى بىلەن ئوڭۇشلۇق بىرلەشتۈرۈلگەنئۆزگەرتىش ، شۇڭا ئېلېمېنت جايىدا تۇرىدۇ ۋە مۆلچەردىكىدەك جانلىنىدۇ. Animation Stagger كۆپ خىل كارتوننى بىر تەرەپ قىلىشنىڭ يەنە بىر ئۇسۇلى ئۇلارنى «تىترەش» ، يەنى بىرىنچىسى تاماملانغاندىن كېيىن ئىككىنچى كارتوننى ئازراق باشلاش. ئۇ ھەر بىر ئەھۋالغا ماس كېلىدىغان ھەل قىلىش چارىسى ئەمەس ، ئەمما بىزدە كىرىش كارتون بار ، ئاندىن ئۇدا كارتون ئىشلىتىلگەندە پايدىلىق. / * سۇس تومۇردا سۇسلاش * / .notification { animation: kf-fade-in 2s ئاسان ، kf-pulse 0.5s 2s ئاسانلىقچە چەكسىز ئالمىشىدۇ. --kf-pulse-opacity-to: 0.5; }
Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 10 نى كۆرۈڭ. زاكاز ئىشلىرى بىز ئىشلەۋاتقان كارتونلارنىڭ زور بىر قىسمى ئۆزگەرتىش خاسلىقىنى ئىشلىتىدۇ. كۆپىنچە ئەھۋاللاردا ، بۇ تېخىمۇ قۇلايلىق. ئۆزگەرتىش كارتونلىرى GPU نى تېزلەتكىلى بولىدىغان بولغاچقا ، ئۇنىڭ ئىقتىدار ئەۋزەللىكىمۇ بار. ئەمما بىز ئۆزگەرتىشنى ئىشلەتسەك ، بىزنىڭ ئۆزگەرتىش تەرتىپىمىزنىڭ مۇھىملىقىنى قوبۇل قىلىشىمىز كېرەك. نۇرغۇن. ھازىرغا قەدەر ئاچقۇچلۇق رامكىمىزدا يەككە ئۆزگەرتىشلەرنى قوللاندۇق. سەپلىمىگە ئاساسەن ، بۇلار ھەمىشە مۇقىم تەرتىپتە قوللىنىلىدۇ: بىرىنچى ، ئېلېمېنت تەرجىمە بولىدۇ ، ئاندىن ئايلىنىدۇ ، ئاندىن كۆلەملىشىدۇ. بۇ ئەقىلگە مۇۋاپىق ، كۆپىنچىمىز ئۈمىد قىلغىنىمىز. قانداقلا بولمىسۇن ، ئۆزگەرتىش خاسلىقىنى ئىشلەتسەك ، ئىقتىدارلارنىڭ يېزىلىش تەرتىپى ئۇلارنىڭ قوللىنىلىش تەرتىپىدۇر. بۇ خىل ئەھۋال ئاستىدا ، ئەگەر بىز X ئوقىدا 100 پېكسىللىق نەرسىنى يۆتكىسەك ، ئاندىن ئۇنى 45 گرادۇس ئايلاندۇرساق ، ئۇ ئالدى بىلەن 45 گرادۇس ئايلاندۇرۇپ ، ئاندىن 100 پېكسىل يۆتكىگەن بىلەن ئوخشاش بولمايدۇ. / * ھالرەڭ كۋادرات: ئالدى بىلەن تەرجىمە قىلىڭ ، ئاندىن ئايلاندۇرۇڭ * / .example-one { transform: translateX (100px) ئايلىنىش (45deg); }
/ * يېشىل كۋادرات: ئالدى بىلەن ئايلىنىدۇ ، ئاندىن تەرجىمە قىلىڭ * / .example-two { transform: rotate (45deg) translateX (100px); }
Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 11 نى كۆرۈڭ. ئەمما ئۆزگەرتىش تەرتىپىگە ئاساسەن ، بارلىق يەككە ئۆزگەرتىشلەر - بىز ئاچقۇچلۇق رامكا بەلگىسى ئۈچۈن ئىشلەتكەن نەرسىلەرنىڭ ھەممىسى ئۆزگەرتىش فۇنكسىيەسىدىن ئىلگىرى يۈز بېرىدۇ. دېمەك ، ئۆزگەرتىش خاسلىقىغا قويغان ھەر قانداق نەرسە كارتوندىن كېيىن يۈز بېرىدۇ. ئەمما سىز تەڭشىسىڭىز ، مەسىلەن kf-spin كۇنۇپكا تاختىسى بىلەن تەرجىمە قىلسىڭىز ، تەرجىمە كارتوندىن بۇرۇن يۈز بېرىدۇ. گاڭگىراپ قالدىمۇ ؟! بۇ تۇراقلىق قىممەتنىڭ ئوخشاش كارتون ئۈچۈن ئوخشىمىغان نەتىجىنى كەلتۈرۈپ چىقىرىدىغان ئەھۋاللارنى كەلتۈرۈپ چىقىرىدۇ:
/ * ھەر ئىككى ئايلانما ئۈچۈن ئورتاق كارتون * / .spinner { كارتون: kf-spin 1s سىزىقلىق چەكسىز; }
/ * ھالرەڭ ئايلانما: ئايلىنىشتىن بۇرۇن تەرجىمە قىلىڭ (يەككە ئۆزگەرتىش) * / .spinner-pink { تەرجىمە: 100% 50%; }
/ * يېشىل ئايلانما: ئايلاندۇرۇڭ ئاندىن تەرجىمە قىلىڭ (ئىقتىدار تەرتىپى) * / .spinner-green { ئۆزگەرتىش: تەرجىمە قىلىش (100% ، 50%); }
Amit Sheen نىڭ قەلەم ئاچقۇچ كۇنۇپكىسى - Demo 12 نى كۆرۈڭ. سىز تۇنجى ئايلانما (ھالرەڭ) نىڭ kf- ئايلىنىشتىن بۇرۇن يۈز بېرىدىغان تەرجىمىگە ئېرىشىدىغانلىقىنى كۆرەلەيسىز ، شۇڭا ئۇ ئالدى بىلەن ئۆز ئورنىغا يۆتكىلىپ ئاندىن ئايلىنىدۇ. ئىككىنچى ئايلانما (يېشىل) يەككە ئۆزگىرىشتىن كېيىن يۈز بېرىدىغان تەرجىمە () فۇنكسىيەسىگە ئېرىشىدۇ ، شۇڭا ئېلېمېنت ئاۋۋال ئايلىنىدۇ ، ئاندىن ئۇنىڭ ھازىرقى بۇلۇڭىغا قاراپ ھەرىكەت قىلىدۇ ، بىز بۇ كەڭ ئوربىتا ئۈنۈمىگە ئېرىشىمىز. ياق ، بۇ خاتالىق ئەمەس. ئۇ پەقەت CSS ھەققىدە بىلىشكە تېگىشلىك بولغان ئىشلارنىڭ بىرى ، كۆپ خىل كارتون ياكى كۆپ خىل ئۆزگەرتىشلەر بىلەن ئىشلىگەندە ئەستە تۇتۇشىمىز كېرەك. ئەگەر ئېھتىياجلىق بولسا ، سىز يەنە بىر يۈرۈش kf-spin-alt كۇنۇپكا تاختىسىنى قۇرالايسىز ، ئۇ ئايلانما () فۇنكسىيەسىنى ئىشلىتىپ ئېلېمېنتلارنى ئايلاندۇرىدۇ. ھەرىكەتنى ئازايتتى بىز باشقا ئاچقۇچلۇق رامكىلارنى سۆزلەۋاتقاندا ، «كارتون يوق» تاللاشنى نەزەردىن ساقىت قىلالمايمىز. ئاچقۇچلۇق بەلگە بەلگىسىنى ئىشلىتىشنىڭ ئەڭ چوڭ ئارتۇقچىلىقى شۇكى ، زىيارەت قىلىشچانلىقىنى پىشۇرغىلى بولىدۇ ، ئەمەلىيەتتە قىلىش بىر قەدەر ئاسان. ئاچقۇچلۇق رامكىمىزنى قولايلىقلىقىنى كۆزدە تۇتۇپ لايىھىلەش ئارقىلىق ، ھەرىكەتنى ئازايتىشنى ياخشى كۆرىدىغان ئىشلەتكۈچىلەرنىڭ ئارتۇقچە خىزمەت ياكى كود كۆپەيتمەي تۇرۇپ ، تېخىمۇ راۋان ، دىققىتى چېچىلىدىغان تەجرىبىگە ئېرىشىشىگە كاپالەتلىك قىلالايمىز. «ئازايتىلغان ھەرىكەت» نىڭ ئېنىق مەنىسى بىر كارتوندىن يەنە بىر كارتونغا ، تۈردىن تۈرگە ئازراق ئۆزگىرىدۇ ، ئەمما بۇ يەردە ئەستە تۇتۇشقا تېگىشلىك بىر قانچە مۇھىم نۇقتىلار بار: Muting Keyframes بەزى كارتونلارنى يۇمشاتقىلى ياكى ئاستىلاتقىلى بولسىمۇ ، ئەمما ھەرىكەتنى ئازايتىش تەلەپ قىلىنغاندا پۈتۈنلەي يوقىلىشى كېرەك. تومۇر كارتونلىرى بۇنىڭ ياخشى مىسالى. بۇ كارتونلارنىڭ ھەرىكەت ھالىتىدە ئىجرا بولماسلىقىغا كاپالەتلىك قىلىش ئۈچۈن ، بىز ئۇلارنى مۇۋاپىق مېدىيا سوئالىغا ئوراپ قويساق بولىدۇ.
@media (قىسقارتىلغان ھەرىكەتنى ياخشى كۆرىدۇ: ياقتۇرمايدۇ) { @keyfrmaes kf-pulse { دىن { كۆلەم: var (- kf-pulse-scale-from, 1); opacity: var (- kf-pulse-opacity-from, 1); } to { كۆلەم: var (- kf-pulse-scale-to, 1); opacity:var (- kf-pulse-opacity-to, 1); } } }
بۇ ئارقىلىق ئازايتىش-تۆۋەنلىتىش ھەرىكىتىنى تەڭشىگەن ئابونتلارنىڭ كارتوننى كۆرمەسلىكىگە ۋە ئۇلارنىڭ ياقتۇرۇشىغا ماس كېلىدىغان تەجرىبىگە ئېرىشىشىگە كاپالەتلىك قىلىدۇ. Instant In كىرىش كارتونلىرى دېگەندەك بىز ئۆچۈرەلمەيدىغان بەزى ئاچقۇچلۇق رامكىلار بار. قىممىتى چوقۇم ئۆزگىرىشى ، جانلاندۇرۇشى كېرەك. بولمىسا ، ئېلېمېنتنىڭ توغرا قىممىتى بولمايدۇ. ئەمما ھەرىكەتنى ئازايتىشتا ، دەسلەپكى قىممەتتىن بۇ ئۆتكۈنچى پەيت بولۇشى كېرەك. بۇنى ئەمەلگە ئاشۇرۇش ئۈچۈن ، قىممەت تېزلىكتە ئاخىرقى ھالەتكە سەكرىگەن قوشۇمچە بىر يۈرۈش ئاچقۇچلۇق رامكىلارغا ئېنىقلىما بېرىمىز. بۇلار بىزنىڭ كۆڭۈلدىكى ئاچقۇچلىرىمىزغا ئايلىنىدۇ. ئاندىن ، بىز ئالدىنقى مىسالدىكىگە ئوخشاش ، مايىللىق تۆۋەنلىتىلگەن ھەرىكەتنى ياقتۇرمايدىغان قىلىپ تەڭشىگەن مېدىيا سوئاللىرىنىڭ ئىچىگە دائىملىق ئاچقۇچلۇق رامكىلارنى قوشىمىز. / * ھەرىكەتنى ئازايتىش ئۈچۈن دەرھال سەكرەپ چىقىڭ * / @keyframes kf-zoom { دىن { كۆلەم: var (- kf-zoom-to, 1); } }
@media (قىسقارتىلغان ھەرىكەتنى ياخشى كۆرىدۇ: ياقتۇرمايدۇ) { / * ئەسلى چوڭايتىش كۇنۇپكىسى * / @keyframes kf-zoom { دىن { كۆلەم: var (- kf-zoom-from, 0.8); } to { كۆلەم: var (- kf-zoom-to, 1); } } }
بۇنداق بولغاندا ، ھەرىكەتنى ئازايتىشنى ياخشى كۆرىدىغان ئابونتلار ئېلېمېنتنىڭ ئاخىرقى ھالىتىدە دەرھال پەيدا بولىدىغانلىقىنى كۆرىدۇ ، باشقىلار بولسا جانلىق ھالەتكە كېلىدۇ. The Soft Approach بىز بەزى ھەرىكەتلەرنى ساقلاپ قېلىشنى خالايدىغان ، ئەمما ئەسلىدىكى كارتونغا قارىغاندا تېخىمۇ يۇمشاق ۋە تەمكىن بولغان ئەھۋاللار بار. مەسىلەن ، قاڭقىش كىرىش ئېغىزىنى مۇلايىم سۇسلاش بىلەن ئالماشتۇرالايمىز.
@keyframes kf-bounce { / * ھەرىكەتنى ئازايتىش ئۈچۈن يۇمشاق سۇسلاش * / }
@media (قىسقارتىلغان ھەرىكەتنى ياخشى كۆرىدۇ: ياقتۇرمايدۇ) { @keyframes kf-bounce { / * ئەسلى قاڭقىش ئاچقۇچ رامكىسى * / } }
ھازىر ، ھەرىكەت ئىقتىدارى تۆۋەنلىگەن ئابونتلار يەنىلا تاشقى كۆرۈنۈش تۇيغۇسىغا ئېرىشىدۇ ، ئەمما قاڭقىش ياكى ئېلاستىك كارتوننىڭ كۈچلۈك ھەرىكىتى بولمايدىكەن. ئىمارەتلەر جايىدا بولغاچقا ، كېيىنكى مەسىلە ئۇلارنى قانداق قىلىپ ئەمەلىي خىزمەت ئېقىمىغا ئايلاندۇرۇش. ئەۋرىشىم ئاچقۇچ يېزىش بىر ئىش ، ئەمما ئۇلارنى چوڭ تۈردە ئىشەنچلىك قىلىش ئۈچۈن مەن جاپالىق ئۇسۇلنى ئۆگىنىشىم كېرەك بولغان بىر قانچە ئىستراتېگىيىلەرنى تەلەپ قىلىدۇ. يولغا قويۇش ئىستراتېگىيىسى ۋە ئەڭ ياخشى ئەمەلىيەت بىزدە ئاچقۇچلۇق رامكىلارنىڭ مۇستەھكەم كۇتۇپخانىسى بولغاندىن كېيىن ، ھەقىقىي رىقابەت ئۇلارنى كۈندىلىك خىزمەتكە قانداق ئېلىپ كىرىش.
قىزىقتۇرۇش بارلىق ئاچقۇچلۇق رامكىلارنى بىراقلا تاشلاپ ، مەسىلىنىڭ ھەل قىلىنغانلىقىنى ئېلان قىلىش ، ئەمما ئەمەلىيەتتە مەن ئەڭ ياخشى نەتىجىنىڭ تەدرىجىي بېقىۋېلىشتىن كەلگەنلىكىنى بايقىدىم. ئەڭ كۆپ ئۇچرايدىغان كارتون فىلىملەردىن باشلاڭ ، مەسىلەن سۇسلاش ياكى تام تەسۋىر. بۇلار چوڭ قايتا يېزىشنى تەلەپ قىلمايلا دەرھال قىممىتىنى كۆرسىتىپ بېرىدىغان ئاسان غەلىبە. ئىسىم قويۇش دىققەت قىلىشقا ئەرزىيدىغان يەنە بىر نۇقتا. ئىزچىل ئالدى قوشۇلغۇچى ياكى ئىسىم بوشلۇقى قايسى كارتونلارنىڭ بەلگە ، قايسىسىنىڭ يەرلىك تاق تاق ئىكەنلىكىنى ئېنىق كۆرسىتىپ بېرىدۇ. ئۇ يەنە تاسادىپىي سوقۇلۇشنىڭ ئالدىنى ئالىدۇ ۋە يېڭى گۇرۇپپا ئەزالىرىنىڭ ئورتاق سىستېمىنى بىر قاراپلا تونۇشىغا ياردەم بېرىدۇ. ھۆججەتلەر كودنىڭ ئۆزىگە ئوخشاشلا مۇھىم. ھەر بىر كۇنۇپكا تاختىسىنىڭ ئۈستىدىكى قىسقا باھامۇ بىر نەچچە سائەت پەرەزنى تېجەپ قالالايدۇ. بىر پروگرامما ئاچقۇچى ھۆججەت ھۆججىتىنى ئېچىپ ، ئېھتىياجلىق ئۈنۈمنى سايىلەپ ، ئىشلىتىش ئەندىزىسىنى بىۋاسىتە ئۇلارنىڭ زاپچاسلىرىغا كۆچۈرەلەيدىغان بولۇشى كېرەك. جانلىقلىق بۇ ئۇسۇلنى تىرىشىشقا ئەرزىيدۇ. سەزگۈر خاسلىق خۇسۇسىيەتلىرىنى ئاشكارىلاش ئارقىلىق ، گۇرۇپپىلارغا سىستېمىنى بۇزماي كارتوننى ماسلاشتۇرۇشقا ئورۇن بېرىمىز. شۇنىڭ بىلەن بىر ۋاقىتتا ، ئارتۇقچە قىلماسلىققا تىرىشىڭ. مۇھىم بولغان تۈگۈنلەرنى تەمىنلەڭ ، قالغانلىرىنى ئويلاڭ. ئاخىرىدا ، قولايلىقلىقىنى ئېسىڭىزدە تۇتۇڭ. ھەر بىر كارتون فىلىمنىڭ كېمەيتىلگەن ھەرىكەت ئورنىغا ئېھتىياجلىق ئەمەس ، ئەمما نۇرغۇنلىرى ئېھتىياجلىق. بۇ تەڭشەشلەرنى بالدۇر پىشۇرۇش دېگەنلىك ، بىز ئۇلارنى كېيىن قايتا ئۆزگەرتمەسلىكىمىزدىن دېرەك بېرىدۇ ، ئۇ ئىشلەتكۈچىلەر دىققەت قىلمىغان دەرىجىدىكى دىققەت دەرىجىسىنى كۆرسىتىپ بېرىدۇ.
مېنىڭ تەجرىبەمگە ئاساسلانغاندا ، ئاچقۇچلۇق بەلگە بەلگىسىنى لايىھىلەش بەلگە خىزمەت ئېقىمىمىزنىڭ بىر قىسمى سۈپىتىدە بىر تەرەپ قىلىش ئۇلارنى چىڭ تۇتقان نەرسە. ئۇلار جايىغا كەلگەندىن كېيىن ، ئۇلار ئالاھىدە ئۈنۈمدەك ھېس قىلىشنى توختىتىدۇ ۋە لايىھىلەش تىلىنىڭ بىر قىسمى بولۇپ قالىدۇ ، بۇ مەھسۇلاتنىڭ ھەرىكەتلىنىشى ۋە ئىنكاسىنىڭ تەبىئىي كېڭىيىشى. Wrapping Up كارتون فىلىم قۇرۇلۇش يۈزىنىڭ ئەڭ خۇشاللىنارلىق قىسمىنىڭ بىرى بولالايدۇ ، ئەمما قۇرۇلمىسى بولمىسا ، ئۇلارمۇ ئۈمىدسىزلىنىشنىڭ ئەڭ چوڭ مەنبەسىگە ئايلىنالايدۇ. ئاچقۇچلۇق رامكىلارغا بەلگە سۈپىتىدە مۇئامىلە قىلىش ئارقىلىق ، ئادەتتە قالايمىقان ۋە باشقۇرۇش تەس بولغان نەرسىنى ئېلىپ ، ئۇنى ئېنىق ، ئالدىن پەرەز قىلغىلى بولىدىغان سىستېمىغا ئايلاندۇرىسىز. ھەقىقىي قىممەت پەقەت بىر نەچچە قۇر كودنى تېجەپلا قالماستىن. سۇسلاش ، سىيرىلىش ، چوڭايتىش ياكى ئايلىنىشنى ئىشلەتكەندە ، ئۇنىڭ پۈتۈن تۈردە قانداق ھەرىكەت قىلىدىغانلىقىنى ئېنىق بىلىسىز. ئۇ تۈگىمەس ئۆزگىرىشلەرنىڭ قالايمىقانچىلىقى بولماي تۇرۇپ خاسلىق خۇسۇسىيىتىدىن كەلگەن جانلىقلىقتا. ھەمدە ئۇ قوشۇلغاندىن كۆرە ، ئاساسقا سېلىنغان قولايلىق ھالەتتەبىر ئويلىنىش. مەن بۇ پىكىرلەرنىڭ ئوخشىمىغان گۇرۇپپىلار ۋە ئوخشىمىغان كود يەشكۈچلەردە ئىشلەۋاتقانلىقىنى كۆردۈم ، ئەندىزە ھەمىشە ئوخشاش. بەلگە ئورنىتىلغاندىن كېيىن ، كۇنۇپكا تاختىسى چېچىلىپ كەتكەن ھىيلە-مىكىرلەر توپلىمى بولۇپ ، لايىھىلەش تىلىنىڭ بىر قىسمى بولۇپ قالىدۇ. ئۇلار مەھسۇلاتنى تېخىمۇ قەستەن ، تېخىمۇ ئىزچىل ۋە تېخىمۇ جانلىق ھېس قىلدۇرىدۇ. ئەگەر سىز بۇ ماقالىدىن بىر نەرسىنى ئالسىڭىز ، ئۇ مۇنداق بولسۇن: كارتون فىلىم بىز ئاللىبۇرۇن رەڭ ، مەتبەئە ۋە بوشلۇققا بەرگەن غەمخورلۇق ۋە قۇرۇلمىغا لايىق. ھەر بىر كۆرۈنمە يۈزىڭىز يۆتكىگەندە ئاچقۇچلۇق بەلگە بەلگىسىگە ئازراق مەبلەغ سېلىنىدۇ.
