the wingman project

§II.09 · ՄՈՈՒՇՆ ԵՎ ԱՆԻՄԱՑԻԱ · ԱՐՀԵՍՏԸ ԵՐԿՈՒ ՊՈԶԱՆԵՐԻ ՄԻՋԵՎ

Անիմացիան՝այն ամենը,ինչ կատարվում էերկու պոզաներիմիջև։

Շարժումն այն է, ինչից բրենդը ժամանակակից է թվում։ Այն Ձեր կայքի սքրոլի, հավելվածի անցումների, սոցիալական լուպերի, գովազդի մեջ է։ Երբ ճիշտ է արված, այն անտեսանելի է. մարդիկ զգում են կենդանի բրենդ և չեն կարող ասել՝ ինչու։ Երբ սխալ է արված, այն համացանցի ամեն դեկորատիվ բեռնման անիվն է։ Տարբերությունը երբեք պոզաների մեջ չէ։ Այն միջանկյալ կադրերի մեջ է՝ դյուրացում, նախապատրաստում, շարունակություն, կշիռ։ Դա է արհեստը, որ մենք վաճառում ենք։

Շարժման մեջ դնել Տեսնել կորերը

⟢ այս ժամանումը · հինգ տող՝ 90ms քայլով · cubic-bezier(0.16, 1, 0.3, 1) · սկզբունք՝ նախապատրաստում · ամեն տող ետ է թեքվում՝ նախքան նստելը

kf·02 · ժամանակային գծապատկերը

Դյուրացումը տարբերությունն է շարժվածի և շարժվողի միջև։

Երկու հիմնակադրը փաստ է։ Նրանց միջև կորը՝ կարծիք. կշռի, վստահության, այն մասին, թե որքան է Ձեր բրենդը պատրաստ շտապել։ Գծային շարժումը մեխանիզմ է հիշեցնում, դյուրացվածը՝ մտադրություն։ Մենք այդ կորը դիտավորյալ ենք նախագծում ամեն սքրոլով կառավարվող հաջորդականության, hover վիճակի, անցման և անիմացված դեմոյի համար, հետո կարգավորում ենք, մինչև դադարեք նկատել։ Շարժումը ծառայում է ուղերձին։ Երբեք չի զարդարում դրա շուրջը։

f-1 · ժամանակային գծապատկերարժեքն ըստ ժամանակի · 0 → 1000ms0%100%0ms2505007501000msպոզա aպոզա b04 · գծային. միայն մեքենաների համար05 · steps(8). պոզա առ պոզա, անիմացիայի ամենահին դյուրացումը02 · ease-in-out · cubic-bezier(0.65, 0, 0.35, 1)03 · զսպանակ. անցում և նստեցում01 · ease-out expocubic-bezier(0.16, 1, 0.3, 1). արագ դուրս է գալիս, մեղմ նստումհավասար բաշխումդյուրացված բաշխում= մետրոնոմ= կենդանի բան
f-1 · ժամանակային գծապատկերարժեքն ըստ ժամանակի · 0 → 1000ms0%100%0ms1000ms010203040501 · ease-out expo02 · ease-in-out03 · զսպանակ. անցում և նստեցում04 · գծային. միայն մեքենաների համար05 · steps(8). պոզա առ պոզահավասարդյուրացված
  • 01ease-out expocubic-bezier(0.16, 1, 0.3, 1)

    Ժամանումը։ Արագ դուրս է գալիս, մեղմ նստում. այսպես են վստահ բաները սենյակ մտնում։

  • 02ease-in-outcubic-bezier(0.65, 0, 0.35, 1)

    Անցումը։ Հեռանում է վճռական, վայրէջք է կատարում պլանավորված։ Վիճակների միջև շարժումների համար։

  • 03զսպանակգերանցում, հետո նստեցում

    Բնավորություն։ Մի քանի տոկոս նշագծից այն կողմ, հետո տուն։ Խնայողաբար կիրառված, միշտ հիշվող։

  • 04 · 05linear և steps()ազնիվները

    Գծայինը՝ մեխանիզմների համար. թիքերներ, սքրաբեր, առաջընթաց։ Քայլայինը՝ պոզա առ պոզա. անիմացիայի ամենահին դյուրացումը։

⟢ այս չորս վանդակը · կասկադի ուշացումներ 0 / 110 / 220 / 330ms · նույն ease-out-ը, որ վերևում նարնջագույն է գծված · սկզբունք՝ դանդաղ մուտք, դանդաղ ելք

դաս · kf·03 · պոզա առ պոզա

Պոզաներն էժան են։ Միջանկյալներն են արհեստը։

f-2 · մեկ ցատկ · 28 կադր @ 24fpsոչինչ չի դանդաղում, այն դյուրանում էΔ նվազում է= ease-outf01 · նախապատրաստում. սեղմում 0.74×, ետ թեքումձգում 1.2×, ծավալը պահպանվածf13 · գագաթբաշխումն այստեղ սեղմվում է. դա է դյուրացումըf24 · հպում. սեղմում 0.74×f27–28 · շարունակություն, նստեցումf01f04f07f10f16f19f22f13f28
f-2 · մեկ անկում · 24 կադր @ 24fpsf01 · պահումձգումն աճում է,բաշխումը լայնանում է= ease-inf20 · հպումսեղմում 0.74×f22 · ետ ցատկf24 · նստեցում010509131720
P.01

Նախապատրաստում

Ետ թեքվելը շարժումից առաջ։ Մեկ պիքսել ետ թեքում գնում է մեկ մղոն հավատալիություն։ Այս քարտը ետ թեքվեց՝ նախքան նստելը։

−6px ետ թեքում · 90ms
P.02

Գերանցում

Նշագծից այն կողմ, հետո նստեցում։ Վստահությունն իներցիա ունի. այս քարտը դիտավորյալ հինգ տոկոս մեծ եկավ։

scale 1.05 → 1.00
P.03

Երկրորդական շարժում

Առարկան և նրա կողքինը։ Հետևեք կետին. այն նստում է քարտից մեկ հարված ուշ, և քարտը դրանից ավելի ծանր է թվում։

հետևորդ · +220ms
P.04

Բեմադրում

Մի պահին մի բան է շարժվում, որ աչքը միշտ իմանա, որտեղ լինել։ Այս քարտը սպասեց իր հերթին։

ուշացում 540ms · վերջինը
P.05

Ռիթմ

Հարված, որ կարելի է հաշվել։ Այս քարտը եկավ չորս առանձին կադրով, պոզա առ պոզա, կարծես երկուսով նկարված։

steps(4) · չորս հաշիվ
P.06

Իներցիա

Զանգվածը հետք է թողնում։ Ծանր բաները գալիս են ուշ և ազնիվ։ Այս քարտն ամենաերկար ճանապարհն անցավ, և Դուք դրան ամենաշատը հավատացիք։

900ms · հետին եզր

⟢ վերևի ամեն քարտ եկավ այն սկզբունքով, որը սովորեցնում է. նախապատրաստումը ետ թեքվեց, գերանցումը գերանցեց, իսկ իներցիան ամենաերկար ճանապարհն անցավ

kf·04 · լույսերն անջատված

Որոշ շարժում բացատրում է։ Որոշ շարժում պարզապես մուտք է գործում։

Լոգոյի բացումներ։ Քեյսերի ինտրոներ։ Վերնագրային քարտեր, որոնք եռամսյակային ներկայացումը պրեմիերա են դարձնում։ Եվ մուտքերի արանքում՝ բացատրականները. բաղադրիչների սխեմաներ, որոնք իրենք իրենց կառուցում են, հավելվածի հոսքեր, որոնք առաջնորդում են օգտատիրոջը, «ինչպես է աշխատում» հաջորդականություններ, որոնք ասում են այն, ինչ Ձեր վաճառքի էջը չի կարող։ Երբ բանը բարդ է, շարժումն այն ակնհայտ է դարձնում։ Երբ բանը Ձերն է, շարժումն այն անմոռանալի է դարձնում։

⟢ այս բացումը · գծերը գծվում են մեկ անգամ՝ ժամանելիս · 1.4վ · 0 / 400 / 800ms քայլով · հետո պահվում է։ ժամանումը մեկ անգամ է լինում, ինչպես առաջին տպավորությունը

f-4 · բացումը · էկրան + տախտակներմեկ անգամ է նվագում · ինչպես առաջին տպավորությունըrectc 00:00:01:12Ձեր նշանը. գծված մեկ անգամ, հետո պահվածպահում 6fգծում 18f · ease-out expoնստեցում 8fպահում, թող նստի6fb1 · սև · պահումb2 · փայլը մտնում էb3 · գծերը գծվում ենb4 · նստեցում + պահում
f-4 · բացումըrectc 01:12Ձեր նշանը. գծված մեկ անգամպահում 6fգծում 18f · ease-out expoնստեցում 8fպահում, թող նստիb1 · սև · պահումb2 · փայլը մտնում էb3 · գծերը գծվում ենb4 · նստեցում + պահում

kf·05 · հանձնվող նյութերի ժապավենը

Ամեն հարթակ ստանում է իր բնիկ տարբերակը։

Շարժման մեկ լեզու՝ արտահանված ամեն ֆորմատով և կադրային հաճախությամբ, որ հարթակը պահանջում է։ Շարժումը մեկ անգամ եք նկարագրում, և ներքևի ժապավենն այն է, ինչ վերադառնում է։

3fr·00լիդեր · սկիզբfr·01սքրոլի տեսարանfr·02ապրանքի բացվածքfr·03հավելվածի անցումfr·04բաղադրությունwmp մոուշն ժապավեն · 24fps · safetyկարդալ լույսի դիմաց →123fr·05ինչպես է աշխատում1:1fr·06սոց. լուպ · 1:19:16fr·07սոց. լուպ · 9:16fr·08քեյսի ինտրո360°fr·09փաթեթի պտույտ
3fr·00լիդեր · սկիզբfr·01սքրոլի տեսարանfr·02ապրանքի բացվածքfr·03հավելվածի անցումfr·04բաղադրություն123fr·05ինչպես է աշխատում1:1fr·06սոց. լուպ · 1:19:16fr·07սոց. լուպ · 9:16fr·08քեյսի ինտրո360°fr·09փաթեթի պտույտ
  • .lottieվեբին բնիկ · անկշիռ · մաքուր փոխանցվող
  • .mp4սոցցանց · գովազդ · ամենուր, որտեղ լենտա կա
  • .webmվեբ վիդեո · թափանցիկ ալֆա
  • .gifորտեղ հինը դեռ պահանջում է

Ձեր սկավառակի վրա, երբ ավարտենք

  • Շարժման նյութեր ամեն հարթակի համար
  • Lottie վեբի համար
  • MP4 սոցցանցերի համար
  • Ելակետային ֆայլեր՝ հետագա աշխատանքի

⟢ վերևի չիպերը · 70ms տարբերությամբ, մեկ-մեկ · սկզբունք՝ բեմադրում · աչքը միշտ գիտի, որտեղ լինել

kf·06 · էքսպոզիցիոն թերթիկը

Ինչպես է ընթանում աշխատանքը՝ կադր առ կադր։

AԾԱՌԱՅԵԼ

Շարժումը ծառայում է ուղերձին։ Երբեք չի զարդարում դրա շուրջը։ Թերթիկի ամեն շարժում գործ ունի. նրանք, որոնք չունեն, ջնջվում են՝ նախքան Դուք դրանք կտեսնեք։

կադր 001–024
BԿԱՌՈՒՑԵԼ

Սքրոլով կառավարվող հաջորդականություններ, hover վիճակներ, անցումներ, անիմացված դեմոներ՝ բեմադրված այն մակերևույթներում, որտեղ իրականում ապրում են, ոչ թե հետո կպցված։

կադր 024–072
CԲԱՑԱՏՐԵԼ

Բարդ բաղադրիչների սխեմաներ, հավելվածի հոսքեր, «ինչպես է աշխատում» հաջորդականություններ։ Երբ բանը դժվար է ասել, շարժումն այն ակնհայտ է դարձնում։

կադր 072–108
DԱՐՏԱՀԱՆԵԼ

Ամեն ֆորմատ և ամեն կադրային հաճախություն, որ պետք է հարթակին, բնիկ ամեն տեղադրման համար, երբեք սխալի մեջ սեղմված։

կադր 108–132
EՓՈԽԱՆՑԵԼ

Lottie վեբի համար, որ ոչինչ չծանրացնի Ձեր էջը։ Ելակետային ֆայլերը մնում են Ձեզ մոտ, որ հաջորդ քայլը երբեք զրոյից չսկսվի։

կադր 132–144

⟢ տողերը նստեցին 80ms տարբերությամբ ease-out-ով · սկզբունք՝ ռիթմ · հարված, որ կարելի է հաշվել

KF·ՎԵՐՋ · ՆՍՏԵՑՈՒՄԸ

Ձեր բրենդը երկու պոզա ունի՝ որտեղ է և ուր է գնում։

Մենք անիմացնում ենք միջանկյալը։

Սկսել միջանկյալը

⟢ ելք՝ պահում։ ոչ մի անիմացիա չի մնում ավելի երկար, քան ցանկալի է։