Adăugarea de animație bazată pe fizică la aplicațiile Android. Crearea de animații de tranziție între Activitate în Android
În acest articol ne vom uita la cum să animați elementele de interfață în Android. Sub elementele de interfață în în acest caz, aceasta înseamnă toți descendenții clasei View (o listă completă a descendenților poate fi găsită în documentația clasei View). Animația este o modalitate ușoară de a face o aplicație mai plină de viață :)
1.
Să începem prin a crea un site de testare. Să facem o aplicație simplă cu un buton și o imagine în mijlocul ecranului. Nu voi da codul, este simplu, dacă este ceva, uitați-vă la surse (sunt la sfârșitul articolului).
2.
În directorul /res/anim, creați un fișier anim.xml și scrieți acolo
xml
version
=
"
1.0
"
encoding
=
"
utf-8
"
?>
<
set
xmlns:android="
http
:
//
schemas.android.com
/apk/res/android
"
android:shareInterpolator="
false
"
>
<
alpha
android:fromAlpha="
0.0
"
android:toAlpha="
1.0
"
android:duration="
1000
"
/>
set
>
Aceasta este descrierea animației pe care o vom aplica imaginii noastre. Ne vom uita la ceea ce se întâmplă aici mai detaliat mai jos, dar pentru moment îl vom copia doar într-un fișier.
3.
Pentru a încărca o animație de la fișier xml folosit metoda statica clasa AnimationUtils
loadAnimation (context context, int id), Unde context este contextul actual și id- identificatorul resursei cu animație. Metoda returnează o instanță a clasei Animation.
Animație - o clasă abstractă pentru reprezentarea animației într-o aplicație.
Pentru ao aplica, instanța rezultată a clasei Animation este transmisă metodei
startAnimation(animație de animație) clasa View (și toți descendenții săi).
4.
Să scriem în fișierul AnimationTestActivity.java:
clasă publică AnimationTestActivity extinde Activitatea ( imagine ImageView; Buton Button; Animation animație; @Override protected void onCreate(Bundle savedInstanceState) ( super .onCreate(savedInstanceState); setContentView(R.layout.main); imagine = (ImageView)findViewById(R. id.image); buton = (Button )findViewById(R.id.button); onClick(Vizualizare v) ( image.startAnimation(anim); //2 ) ) )
1) Citiți fișierul cu identificatorul R.anim.anim (care corespunde fișierului /res/anim/anim.xml) și obțineți o instanță a clasei Animation.
2) Făcând clic pe butonul, aplicăm animație imaginii.
5. Puteți lansa aplicația noastră. Când apăsați butonul, imaginea va dispărea și apoi va începe încet să apară înapoi.
6.
Acum să aruncăm o privire mai atentă asupra modului în care este creată animația într-un fișier xml.
Există 4 tipuri de animație:
- alfa(transparență, vizibilitate)
- scară(scalare)
- roti(întoarce)
- Traduceți(mișcare)
Pentru a crea animație, trebuie să descriem stările inițiale și finale ale obiectului, iar sistemul însuși va decide cum să treacă de la o stare la alta. În exemplul nostru
<
alpha
android:fromAlpha="
0.0
"
android:toAlpha="
1.0
"
android:duration="
1000
"
/>
descriem animația alfa, adică schimbăm vizibilitatea obiectului. Setați starea inițială fromAlpha="0.0"(complet invizibil) și finit toAlpha="1.0"(pe deplin vizibile). Specificați durata animației duration="1000"(în milisecunde). Și orice altceva, adică cum să schimbi vizibilitatea unui obiect pentru a-l transforma din invizibil în vizibil într-o secundă, sistemul se face singur. Aceasta se calculează folosind interpolare- în matematica computațională, o metodă de găsire a valorilor intermediare ale unei mărimi dintr-un set discret de valori existent. Pentru fiecare animație puteți seta un interpolator
-AccelerateDecelerateInterpolator(@android:anim/accelerate_decelerate_int erpolator) - rata de schimbare este scăzută la început și la sfârșit și accelerează la mijloc
-AccelerateInterpolator(@android:anim/accelerate_interpolator) - rata de schimbare începe scăzută și apoi accelerează
-Antipolator(@android:anim/anticipate_interpolator) - modificările încep la reversul apoi mergi repede înainte
-Anticipate OvershootInterpolator(@android:anim/anticipate_overshoot_inte rpolator) - modificările încep în direcția opusă, apoi se deplasează rapid înainte și zboară deasupra valorii finale, apoi revin la valoarea finală
- BounceInterpolator(@android:anim/bounce_interpolator) - rata de schimbare crește la sfârșit
-CycleInterpolator(@android:anim/cycle_interpolator) - repetă animația de un număr specificat de ori. Rata de schimbare urmează o undă sinusoidală
-DecelerateInterpolator(@android:anim/decelerate_interpolator) - rata de schimbare scade la sfârșit
-Interpolator liniar(@android:anim/linear_interpolator) - rata de schimbare este constantă
-Depășirea interpolatorului(@android:anim/overshoot_interpolator) - modificările avansează brusc și zboară deasupra valorii finale, apoi revin la valoarea finală
Interpolatorul este setat folosind atributul android:interpolator. De exemplu
android:interpolator="@android:anim/cycl e_interpolator". Valoarea implicită este LinearInterpolator.
7. Descrierea stărilor inițiale și finale
1) alfa (transparență, vizibilitate)
- Android: de la Alpha- valoarea inițială a transparenței. 0,0 - complet transparent (invizibil), 1,0 - complet opac (vizibil)
- android:toAlpha - valoarea finală transparenţă
2) scară
- android:fromXScale- valoarea inițială a scalei de-a lungul axei X (unde dimensiunea curentă corespunde valorii 1.0)
- android:toXScale- valoarea finală a scalei de-a lungul axei X
- android:de la YScale- valoarea inițială a scării de-a lungul axei Y (unde dimensiunea curentă corespunde valorii 1.0)
- android:toYScale- valoarea finală a scalei de-a lungul axei Y
- android:pivotX- coordonata x a punctului, care va rămâne neschimbată după scalare
- android:pivotY- coordonata y a punctului, care va rămâne neschimbată după scalare
Valori posibile pentru pivotX și pivotY:
în pixeli în raport cu marginea din stânga (sau de sus pentru coordonatele Y) a elementului (de exemplu, „5”)
ca procent în raport cu marginea din stânga (sus) (de exemplu, „5%”)
ca procent față de marginea din stânga (sus). element părinte(de exemplu „5%p”)
De exemplu, dacă pivotX=0, pivotY=0 (care corespunde colțului din stânga sus al elementului), atunci scalarea va redimensiona elementul în jos și la dreapta. Dacă pivotX=50%, pivotY=50%, atunci punctul se află în centrul elementului și dimensiunea se schimbă în toate direcțiile, în timp ce centrul va rămâne într-un punct.
3) roti
- Android: de la Degrees - Valoarea initiala unghi de rotație (în grade, valoare negativă posibilă)
- Android:toDegrees- valoarea finală a unghiului de rotaţie
- android:pivotX- coordonatele x ale centrului de rotație.
- android:pivotY- coordonata y a centrului de rotație.
Valori posibile ale pivotX și pivotY ca în animația la scară
4) traduce (muta)
- android:de la XDelta- coordonata x a punctului de plecare al mișcării. Valori posibile:
în pixeli în raport cu poziția inițială (de exemplu „5”)
ca procent în raport cu lățimea elementului (de exemplu, „5%”)
ca procent în raport cu lățimea elementului părinte (de exemplu „5%p”)
- android:toXDelta- coordonata x a punctului final al mișcării
- android:de la YDelta- coordonata y a punctului de plecare al mișcării
- android:toYDelta- coordonata y a punctului final al mișcării
8. Opțiuni suplimentare
Există, de asemenea, atribute comune tuturor celor patru tipuri de animație, dintre care cele mai utile sunt:
- android: durată- durata animației (în milisecunde)
- android:interpolator- definește interpolatorul pentru animație
- android:repeatCount- numărul de repetări suplimentare de animație. Exact altele, adică animația se va executa oricum o dată. Valoarea implicită este „0” - aceasta înseamnă că animația va fi executată o singură dată. O valoare de „1” înseamnă că animația va fi executată de două ori (o dată cea principală și o dată cea secundară). Valoarea „-1” sau „infinit” înseamnă repetiție nesfârșită.
- android:repeatMode- determină comportamentul animației când a ajuns la sfârșit, iar parametrul repeatCount nu este egal cu 0. Există două valori: „restart” - animația începe din nou și „reverse” - animația va merge în ordine inversă .
- android:startOffset- întârziere înainte de începerea animației (în milisecunde)
9. Combinarea mai multor animații
Puteți aplica mai multe tipuri de animații unui element în același timp. De exemplu, dacă scriem:
xml
version
=
"
1.0
"
encoding
=
"
utf-8
"
?>
<
set
xmlns:android="
http
:
//
schemas.android.com
/apk/res/android
"
>
<
alpha
android:fromAlpha="
0.0
"
android:toAlpha="
1.0
"
android:duration="
1000
"
/>
<
rotate
android:fromDegrees="
0
"
android:toDegrees="
360
"
android:pivotX="
50%
"
android:pivotY="
50%
"
android:duration="
1000
"
/>
set
>
Imaginea va schimba transparența în 1 secundă (de la complet transparentă la opac) și, în același timp, se va roti la 360 de grade.
Animațiile pot fi setate la durate diferite, de exemplu, să setăm durata=5000 pentru rotirea animației. Acum imaginea se va roti mult mai încet, iar transparența se va schimba în continuare într-o secundă.
Prin utilizarea startOffset, puteți face animațiile secvențiale. Adăugați atributul de rotație startOffset="1000"(adică vom face o întârziere egală cu durata primei animații). Acum imaginea va deveni mai întâi vizibilă în 1 secundă, apoi se va roti doar la 360 de grade.
Mai multe animații pot fi combinate în seturi folosind eticheta. O astfel de etichetă va fi întotdeauna în fișier și este eticheta rădăcină. Puteți seta următoarele atribute pentru un set:
- durată(durată), Mod Repetare(modul de repetare) - aceste atribute vor fi aplicate fiecărei animații din set
- interpolator- defineşte interpolatorul de animaţie şi shareInterpolator- dacă acest interpolator va fi aplicat pentru fiecare animație din set (valorile posibile sunt „adevărat” și „fals”)
- startOffset(întârziere) - întârziere pentru întregul set de animații.
Din păcate, atributul nu poate fi aplicat setului repeatCount, adică repetarea unui set de animații de mai multe ori nu va funcționa.
Seturile pot fi de orice cuibărit.
10. Crearea de animație fără xml
Animația poate fi creată fără a utiliza xml, direct în codul programului. Pentru aceasta, sunt folosite clasele descendente Animation:
1) AlphaAnimation pentru a crea animație alfa. Constructorul clasei arată ca
AlphaAnimation (float fromAlpha, float toAlpha) unde fromAlpha și toAlpha sunt valorile inițiale și, respectiv, finale ale transparenței (de la 0,0 la 1,0)
11.
Să creăm o animație în cod care, atunci când apăsați un buton, va roti imaginea cu un unghi aleatoriu (de la 0 la 360) și o va mări la o dimensiune aleatorie (nu mai mult de două ori). În acest scop am adăugat un alt buton randomButton
randomButton.setOnClickListener(new OnClickListener() ( @Override public void onClick(View v) ( Aleatoriu aleatoriu = nou Aleatoriu (); //1 RotateAnimation rotire = nou RotateAnimation (0, (float )random.nextInt(360), Animație. RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f; //2 rotate.setDuration(1000); ); //6 float size = random.nextFloat() + 1.0; //7 ScaleAnimation scale = new ScaleAnimation(1.0f, size, 1.0f, size, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF , 0.5f); //8 scale.setDuration(1000); /12 ) );
1) Creați un obiect Random pentru a genera numere aleatorii. Puteți citi mai multe despre Random în documentație acum ne interesează metodele int nextInt(int n) - generarea unui număr întreg în intervalul de la 0 la n. Și se generează metoda float nextFloat(). numar real de la 0 la 1.
2) Creați o animație de rotație. Unghiul de început = 0, unghiul de final = Număr aleatoriu de la 0 la 360. Animație.RELATIVE_TO_SELF înseamnă că vom indica punctul central de rotație ca procent în raport cu lățimea elementului. Nu uitați că valoarea 1,0 corespunde la 100%, ceea ce înseamnă că 0,5f este 50%. Aceasta înseamnă că centrul de rotație va fi în mijlocul imaginii.
3) Setați durata animației la 1000 de milisecunde (aceasta este de 1 secundă)
4) Definim modul de repetitie ca Animation.REVERSE, adica la repetarea animatiei, vom merge in ordine inversa.
5) Setați numărul de repetări suplimentare = 1. Aceasta înseamnă că animația se va repeta de două ori, o dată în ordine înainte și o dată în sens invers.
6) Metoda lung computeDurationHint() calculează cât va dura animația în total. Există o metodă getDuration(), dar pur și simplu returnează valoarea duratei pe care o setăm cu metoda setDuration(). În cazul nostru, setăm valoarea duratei la 1000, iar metoda getDuration() va returna 1000 și nu va ține cont de faptul că animația se va repeta de două ori, ceea ce înseamnă că va dura de fapt 2000 de milisecunde. Metoda computeDurationHint() va calcula durata luând în considerare reîncercări și întârzieri.
7) Calculam dimensiune nouă Poze. Valoarea 1.0 este scara actuală a imaginii, deci valoarea 2.0 înseamnă că imaginea este dublată. Generăm un număr de la 0.0 la 1.0 și adăugăm 1, ceea ce înseamnă că obținem un număr de la 1.0 la 2.0
8) Creați o animație de scalare de la dimensiunea actuală a imaginii la un număr generat aleatoriu de la 1,0 la 2,0
9) Setați o întârziere egală cu durata totală a animației de rotație. Astfel încât a doua animație să înceapă imediat după sfârșitul primei
10) Creați un set de animații.
11) Adăugați două animații create la set
12) Aplicați un set de animații imaginii
12.
O altă metodă interesantă a clasei de animație
setAnimationListener (ascultător de animație.AnimationListener)- setează un ascultător pentru modificările stării animației. Interfața Animation.AnimationListener definește următoarele metode:
onAnimationStart (animație de animație)- apelat când începe animația
onAnimationRestart (animație de animație)- apelat când animația se repetă
onAnimationEnd(animație de animație)- sunat la sfârșitul animației
De exemplu:
anim = AnimationUtils.loadAnimation(this, R.anim.anim); anim.setAnimationListener(new AnimationListener () ( @Override public void onAnimationEnd(Animation animation) ( Log.d("MY" , "animation final" ); ) @Override public void onAnimationRepeat(animation animation) ( Log.d("MY") " , "repetare animație" ); ) @Override public void onAnimationStart(animație animație) ( Log.d("MY" , "animation start" ); ) ));
Nu facem nimic util atunci când schimbăm starea animației, doar o scriem în jurnal.
Asta e tot. Ți-am spus elementele de bază, e mai bine să înveți restul prin experimente :)
Sursele pot fi descărcate aici
La ribot, ne pasă să creăm experiențe frumoase și semnificative pentru oameni, în care mișcarea joacă un rol important.
După ce am asistat la o discuție inspirată la Droidcon Londra, am decis să aprofundez elementele de mișcare ale Android. Având în vedere acest lucru, am compilat toate descoperirile mele pentru a ajuta dezvoltatorii și designerii să știe cât de ușor este să adăugați mișcare frumoasă la aplicațiile Android.
Dacă doriți să încercați să realizați singuri aceste animații, fiecare dintre aceste exemple este împachetat într-o aplicație Android pe Github.
Iubesc mișcarea, nu numai că mărește interacțiunea, dar dă imediat capul. Gândiți-vă la aplicațiile pe care le utilizați și la grafica în mișcare, în special la cât de frumos, ușor, gratuit și natural arată.
Falcon Pro: Chiar și mișcările subtile pot face o diferență uriașă în experiența utilizatorului
Acum compară-le cu aplicațiile pe care le iubești și care nu trezesc aceleași sentimente.
Mediu: Oricât de mult îmi place aplicația Medium, chiar îi lipsește mișcarea în zonele pe care merită să o aibă.
Totul este în detalii
Putem folosi aceste efecte de mișcare în diferite moduri:
- Transferați utilizatori prin contextul de navigare
- Întăriți ierarhia elementară
- Explicați modificările dintre componentele afișate pe ecran
Scopul acestui articol este să vă arate cât de ușor este să implementați mișcarea în aplicațiile dvs. unde poate aduce beneficii semnificative - așa că să începem.
Feedback la atingere
Securitate părere, atunci când utilizatorul atinge ecranul, ajută la comunicarea într-o manieră vizuală, astfel încât să aibă loc interacțiunea. Aceste animații nu ar trebui să distragă atenția utilizatorului, dar ar trebui să ofere distracție, claritate și să încurajeze explorarea ulterioară.
Cadrul Android oferă o stare de ondulare pentru acest strat de feedback, care poate fi folosit pentru a seta fundalul animației la una dintre următoarele:
Android:attr/selectableItemBackground - Afișează un efect de ondulare în limitele imaginii.
Pulsația începe în punctul de contact, umplând fundalul imaginii prezentate
?android:attr/selectableItemBackground Borderless- Afișează un efect de pulsație care depășește limitele imaginii prezentate.
Un efect de pulsație circulară începe la punctul de contact, umplând o rază dincolo de imaginea prezentată
Vizualizați animator de proprietate
View Property Animator a fost introdus la nivelul API 12, care vă permite să efectuați simplu și eficient operațiuni de animație (în paralel) pe mai multe proprietăți de imagine folosind o singură instanță Animator.
Aici fac animații pe toate proprietățile prezentate mai jos.
alpha() - Setează valoarea alfa pentru a face animația
ScaleX() & ScaleY() - Echilibrează vizualizarea pe axa X și/sau Y
translationZ() - Traduce vizualizarea pe axa sa Z
setDuration() - Setează durata animației
setStartDelay() - Setează întârzierea animației
setInterpolator() - Setează interpolarea animației
setListener() - Setează un ascultător să știe când începe, se termină, se repetă sau se anulează animația.
Notă: Când ascultătorul a fost setat la imaginea asta, iar dacă efectuați alte animații în același punct și nu doriți să utilizați această funcție de apel invers, atunci trebuie să setați ascultătorul la NULL.
Acest lucru este, de asemenea, simplu și ordonat de implementat programatic:
mButton.animate():
TraducereZ(10f)
SetInterpolator(nou FastOutSlowInInterpolator())
SetStartDelay(200)
SetListener(nou Animator.AnimatorListener() (
public void onAnimationStart(animația animatorului) ( )
public void onAnimationEnd(animația animatorului) ( )
public void onAnimationCancel(animația animatorului) ( )
public void onAnimationRepeat(animația animatorului) ( )
Notă: De fapt, nu trebuie să apelăm start() pe generatorul nostru de animație, deoarece animația pornește automat de îndată ce oprim declararea animației în același timp. Dacă acesta este cazul, atunci animația nu va începe până la următoarea actualizare din coada de evenimente de instrumentare a interfeței.
Notă: Pentru compatibilitate cu versiunea anterioară, puteți utiliza clasa ViewCompat pentru a implementa ViewPropertyAnimator de la Android API versiunea 4 și mai sus.
La fel ca View Property Animator, Object Animator ne permite să animam diverse proprietăți ale imaginii țintă (atât în cod, cât și în resurse de fișier XML). Cu toate acestea, există câteva diferențe:
Object Animator permite ca o animație să existe doar într-o singură stare, de exemplu, o scară X urmată de o scară Y
Cu toate acestea, permite animației să existe în starea sa normală, cum ar fi culoarea primului plan a imaginii.
Folosind proprietăți sau stări personalizate pentru a anima imaginea la scară și pentru a schimba culoarea primului plan, putem realiza următoarele:
Folosind Proprietatea personalizată, putem crea o singură instanță a Object Animator apelând ObjectAnimator.ofInt() unde afirmăm:
Vizualizare - Vizualizare pentru a aplica animația
Proprietate - Proprietate pentru animație
Culoare inițială - Culoarea cu care începe vizualizarea animației.
Culoare țintă - Culoarea cu care imaginea asta trebuie să prindă viață
private void animateForegroundColor(@ColorInt final int targetColor) (
Animator ObjectAnimator =
ObjectAnimator.ofInt(YOUR_VIEW, FOREGROUND_COLOR, Color.TRANSPARENT, targetColor);
animator.setEvaluator(nou ArgbEvaluator());
animator.setStartDelay(DELAY_COLOR_CHANGE);
animator.start();
}
Apoi setăm evaluatorul (folosim ArgbEvaluator deoarece facem animația între valorile de culoare), setăm întârzierea și pornim() animația.
Instanțiăm ObjectAnimator folosind ofFloat() deoarece nu animăm valori întregi atunci când lucrăm cu dimensiunile imaginii
În loc de proprietate personalizată, folosim proprietățile imaginii - atât View.SCALE_X, cât și View. SCALE_Y
private void resizeView() (
final float widthHeightRatio = (float) getHeight() / (float) getWidth();
resizeViewProperty(View.SCALE_X, .5f, 200);
resizeViewProperty(View.SCALE_Y, .5f / widthHeightRatio, 250);
}
private void resizeViewProperty(Proprietate
float targetScale,
int durationOffset) (
ObjectAnimator animator = ObjectAnimator.ofFloat(this, property, 1f, targetScale);
animator.setInterpolator(nou LinearOutSlowInInterpolator());
animator.setStartDelay(DELAY_COLOR_CHANGE + durationOffset);
animator.start();
}
În cele din urmă, trebuie să ne animam imaginea redimensionată în afara ecranului. În acest caz, folosim un AdapterViewFlipper pentru a ne adapta imaginile pe care le animam în afara ecranului. Folosind acest lucru înseamnă că putem apela showNext() pe instanța ViewFlipper și va anima imagini în afara ecranului folosind animația pe care am definit-o. Apoi, următoarea imagine va prinde automat viață pe ecran, folosind și animația de intrare pe care am definit-o și noi.
Interpolatoare
Un interpolator poate fi folosit pentru a determina rata de schimbare pentru o animație, ceea ce înseamnă că viteza, accelerația și comportamentul animației pot fi modificate. Există mai multe tipuri diferite de interpolatoare disponibile și diferențele dintre unele dintre ele sunt subtile, așa că vă sugerez să le încercați pe acest dispozitiv.
- Fără interpolator - Vederea prinde viață fără variații ale ratei de schimbare
- Rapid - În afara liniei - În interior
Imaginea începe animația și se termină cu mișcare liniară
- Rapid - Incet - Inauntru
Imaginea începe rapid animația și încetinește spre final
- Linear - Lent - În interior
Imaginea începe cu mișcări liniare și încetinește spre final
- Accelerație - Decelerație
Imaginea începe să accelereze la începutul animației și încetinește treptat pe măsură ce se termină.
- Accelerează - imaginea accelerează treptat până când animația se termină
- Frânare - Imaginea încetinește treptat până la sfârșitul animației
- Lead - Imaginea începe cu o ușoară rotație a animației specificate înainte de a se muta într-o manieră standard
- Anticipați - Omiteți - La fel ca Plumb, dar mișcarea de „tragere înapoi” care apare în timpul animației este puțin mai exagerată
- Jumping Interpolator - Imaginea prinde viață cu un efect de „săritură” înainte de a ajunge la linia de sosire
- Interpolator liniar - O imagine prinde viață de la început până la sfârșit cu o mișcare liniară și lină
- Skipping Interpolator - Imaginea „revitalizează” exagerarea valoare dată, revenind la valoarea cerută
Animație circulară
Animația CircularReveal folosește un cerc decupat fie pentru a dezvălui, fie pentru a ascunde un grup de elemente interfața cu utilizatorul. Pe lângă faptul că ajută la asigurarea continuității vizuale, este și o interacțiune plăcută care ajută la îmbunătățirea acesteia cu utilizatorul.
După cum se arată mai sus, începem prin a folosi View Property Animator pentru a ascunde butonul Floating Action înainte de a începe să animam animația în fața ochilor noștri. Configurarea cercului nostru de revigorare necesită definirea doar a câtorva atribute:
- startView - vizualizarea de la care va porni CircularReveal (adică vizualizarea comprimată)
- centerX - Coordonatele centrale pentru axa X atunci când este apăsat
- centerY- Coordonatele centrale pentru axa Y atunci când este apăsat
- targetView - Vederea de creat
- finalRadius - Raza de tăiere a cercului, egală cu ipotenuza valorilor noastre - centerX și centerY
int centerX = (startView.getLeft() + startView.getRight()) / 2;
int centerY = (startView.getTop() + startView.getBottom()) / 2;
float finalRadius = (float) Math.hypot((dublu) centruX, (dublu) centruY);
Animator mCircularReveal = ViewAnimationUtils.createCircularReveal(
targetView, centerX, centerY, 0, finalRadius);
Tranziții de fereastră
Personalizarea tranzițiilor utilizate pentru a naviga între tranzacții permite conexiuni vizuale mai puternice între stările aplicației. În mod implicit, putem configura următoarele tranziții:
- input - Definește modul în care imaginile tranzacției intră în scenă
- exit - Determină modul în care imaginile tranzacției ies din scenă
- enter din nou - Definește modul în care o tranzacție va intra din nou după ce a ieșit anterior
- elemente partajate - Definește modul în care imaginile de tranziție sunt schimbate între tranzacții
Ca și în cazul API Level 21, au apărut și au fost introduse mai multe tranziții noi:
Tranziția explozivă permite imaginilor să iasă din toate părțile ecranului, creând un efect exploziv atunci când sunt apăsate.
Efectul de rafală funcționează foarte bine pe planșele bazate pe grilă.
Acest efect este ușor de implementat - pentru început, trebuie să creați următoarea tranziție în directorul RES res/tranziție.
Tot ce am făcut aici:
- Tranziție explozivă anunțată
- Setați durata la 300 de milisecunde
Sau programatic:
Transition explode = TransitionInflater.from(this).inflateTransition(R.transition.explode);
getWindow().setEnterTransition(explode);
Slide
Tranziția prin glisare vă permite să introduceți sau să ieșiți dintr-o tranzacție cu oricare dintre acestea partea dreapta, sau din partea de jos a ecranului. Deși este posibil să fi ajuns la asta înainte, această nouă tranziție este mult mai flexibilă.
Tranziția cu diapozitive vă permite să alunecați secvențial în imaginile copil
Această tranziție este probabil să fie obișnuită la schimbarea tranzacțiilor, mi-a plăcut în special slide-ul potrivit datorită stării sale asemănătoare lichidului. Din nou, acest lucru este ușor de făcut:
android:slideEdge="end“/>
Aici noi:
- Se anunță tranziția de diapozitiv
- Setați slideEdge de tranziție să se termine acolo (pe dreapta), astfel încât diapozitivele să meargă la dreapta - slide-ul de jos ar trebui să fie setat în partea de jos
Decolorare
O tranziție de estompare vă permite să treceți la o tranzacție intern sau extern folosind efectul de estompare.
Tranziția de decolorare este simplă, deși tranziția de decolorare este plăcută ochiului.
Crearea acestuia este chiar mai ușoară decât tranzițiile anterioare:
Aici noi:
- Anunțăm tranziția care se estompează
- Setați durata la 300 de milisecunde
Optimizarea tranziției
În ciuda experimentelor, am găsit câteva abordări care pot ajuta la îmbunătățirea efectelor de tranziție menționate mai sus.
Permite tranzițiile conținutului ferestrei- trebuie să activați următorul atribut în temele care moștenesc din tema materialului:
Activați/dezactivați tranzițiile de potrivire- La tranziție, poate exista o întârziere în care o acțiune așteaptă ca alta să își finalizeze tranziția înainte de a putea începe propria. În funcție de cazul de utilizare, tranzițiile vor arăta în general mai fluide și mai naturale dacă activați aceste atribute:
Excluderea imaginilor din tranziții- Uneori este posibil să nu dorim să creăm tranziții pentru toate imaginile tranzacțiilor noastre. Am descoperit că, în majoritatea cazurilor, bara de stare și bara de instrumente au cauzat erori de tranziție. Din fericire, putem exclude anumite specii care au fost incluse în tranzițiile noastre:
Bara de instrumente și bara de acțiuni- Când trecem între acțiuni folosind Bara de acțiuni la utilizarea Barei de instrumente (și invers), uneori am constatat că tranziția nu a fost întotdeauna lină. Pentru a remedia acest lucru, m-am asigurat că cele două activități implicate în tranziție foloseau aceeași componentă.
Durata tranziției- Nu doriți ca utilizatorul să aștepte prea mult, dar nici nu doriți să creați componente care să apară cu viteza luminii. Aceasta depinde de tranziția pe care o utilizați, deci cel mai bine este să experimentați, dar am constatat că o durată de 200-500 ms funcționează în majoritatea cazurilor.
Elemente comune de tranziție
Elementele de tranziție partajate vă permit să animați tranzițiile între imaginile partajate într-o tranzacție, creând tranziții mai plăcute și oferind utilizatorului o mai bună perspectivă a călătoriei sale.
Aici, imaginea din prima noastră acțiune este scalată și tradusă în imaginea antet în a doua noastră acțiune
În layout-urile noastre, trebuie să asociem orice imagini comune folosind atributul transitionName - aceasta stabilește relații de tranziție între imagini. Mai jos sunt imagini generale din animația de mai sus:
Acestea sunt imagini partajate, ceea ce înseamnă că vor prinde viață între ele în timpul tranzițiilor de acțiune
Pentru a trece între acestea două, începem prin a declara numele tranziției comune, făcută folosind atributul transitionName în layout-urile XML.
android:transitionName="@string/transition_view“/>
android:transitionName="@string/transition_view“/>
Odată ce s-a făcut acest lucru, creăm un obiect Pair la pasul 1) care conține imaginea noastră de tranziție și transiția sa. Apoi îl transmitem la eșantion de opțiuni de tranzacție, cum ar fi (ActivityOptionsCompat), astfel încât ambele activități să cunoască componentele comune. De acolo vom începe tranzacția noastră, prin opțiunea exemplu:
Participanți pereche = pereche nouă<>(mSquareView, ViewCompat.getTransitionName(mSquareView));
ActivityOptionsCompat transitionActivityOptions =
ActivityOptionsCompat.makeSceneTransitionAnimation(
SharedTransitionsActivity.this, participanți);
ActivityCompat.startActivity(SharedTransitionsActivity.this,
intentie, transitionActivityOptions.toBundle());
Separarea acestor imagini în timp ce tranziția are loc într-adevăr ajută la finalizarea tranziției.
Iată trecerea între aceste două imagini, dar cum rămâne cu imaginile din actul al doilea care alunecă de jos?
(Cei din stanga)
Ma bucur ca ai intrebat! Acest lucru este, de asemenea, ușor de realizat, după cum se arată mai jos:
Slide slide = slide new(Gravity.BOTTOM);
slide.addTarget(R.id.view_separator);
slide.addTarget(R.id.text_detail);
slide.addTarget(R.id.text_close);
getWindow().setEnterTransition(slide);
După cum puteți vedea, creăm un nou șablon de diapozitiv de tranziție adăugând vederi țintă pentru tranziție și setând diapozitivul ca tranziție de intrare a tranzacției.
Tranziții personalizate
Avem, de asemenea, capacitatea de a ne crea propriile tranziții folosind oricare dintre animațiile din API-ul pe care l-am acoperit până acum. De exemplu, putem duce tranzițiile elementului partajat cu un pas mai departe pentru a deveni o imagine de tranziție - acest lucru poate fi util atunci când dorim să afișăm casete de dialog (sau imagini pop-up similare), așa cum se arată mai jos:
Această mișcare ajută la direcționarea atenției utilizatorului între stările componente
Să aruncăm o privire rapidă la ce se întâmplă aici:
- Începem prin a crea un SharedTransition, trecând în starea apăsată împreună cu numele tranziției pentru a face referire la componenta partajată
- Apoi creăm o instanță ArcMotion, aceasta ne permite să creăm efect curbat mișcare la trecerea între două imagini
- Apoi extindem ChangeBounds pentru a crea o tranziție personalizată și a transforma cele două forme (avem o clasă separată pentru buton și FAB). Aici suprascriem diferite metode din clasă, astfel încât să putem anima proprietățile necesare. Vom folosi un ViewPropertyAnimator pentru a anima transparența imaginilor de dialog, un ObjectAnimator pentru a anima imaginile între cele două culori și un exemplu de AnimatorSet, astfel încât să putem anima ambele efecte împreună.
Vector animat al coeficientului de intrare
Începând cu versiunea API 21 (Lollipop), AnimatedVectorDrawable poate fi folosit pentru a anima proprietățile VectorDrawable pentru a produce o animație a desenului.
Acum este ușor să faci mai multe tipuri variate animație pe coeficientul de intrare
Dar cum facem asta? Ei bine, să aruncăm o privire la asta:
Este format din mai multe fișiere diferite și începem prin a crea cele două fișiere vectoriale separate, fiecare cu mai multe proprietăți:
- Înălțime și lățime - dimensiune reală imagine vectorială
- Înălțimea și lățimea ferestrei - Declara dimensiunea pânzei virtuale pe care sunt desenate traseele vectoriale
- Nume grup - Declarați grupul căruia îi aparține piesa
- Pivot X și Y - Declarați pivotul utilizat pentru scara grupului și rotație
- Traiectoria culorii Umplere-Culoare umplere cale vectorială
- Path Data - Declarați datele căii vectoriale utilizate pentru a desena vectorul
Notă: Toate proprietățile linkului sunt stocate într-un fișier linie comun, care ajută la menținerea elementelor organizate și ordonate.
android:width="56dp"
android:viewportWidth="24.0“>
android:pivotX="12"
android:pivotY="12“>
android:pathData="@string/path_add“/>
Vectorul este generat din fișierul nostru ic_add.xml (mai jos)
android:width="56dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0“>
android:pivotX="12"
android:pivotY="12“>
android:pathData="@string/path_remove“/>
Vectorul este generat din fișierul nostru ic_remove.xml (mai jos)
Apoi declarăm fișierele Animated Vector Drawable, care setează atât Vector Drawable, cât și animațiile folosite pentru fiecare stare de „întindere” (Add sau Remove). Privind vectorul de animație adăugat sau eliminat, declarăm ținta:
Animație de la o stare la alta
Animație de rotație a coeficientului introdus
android:drawable="@drawable/ic_add“>
android:animation="@animator/add_to_remove“ />
android:animation=“@animator/rotate_add_to_remove“ />
Apoi trebuie să creăm fiecare dintre fișierele menționate în aceste scopuri.
Modificarea stării coeficientului introdus
În add_to_remove.xml folosim ObjectAnimator pentru a transforma formele folosind următoarele proprietăți:
- PropertyName - Proprietate animație
- valueFrom- Valoarea inițială pentru calea vectorială
- valueTo- Valoarea țintă pentru calea vectorială
- Duration - Durata animației
- interpolator - Interpolator folosit pentru animație
- ValueType - Tipul de valoare pe care îl animam
android:propertyName=“pathData“
android:valueFrom="@string/path_add“
android:valueTo=“@string/path_remove“
android:interpolator=„@android:interpolator/fast_out_slow_in“
android:valueType=“pathType“ />
Rotiți formularul
Folosim o abordare similară pentru a roti forma folosind proprietatea de rotație și magnitudine:
android:propertyName=„rotație“
android:valueFrom="-180"
android:valueTo=“0“
android:duration="@integer/duration“
android:interpolator="@android:interpolator/fast_out_slow_in“ />
Animația inversă (de la Eliminare la Adăugare) funcționează la fel, doar cu valorile de animație inversă.
Vectorul nostru de coeficient de intrare animat finalizat arată grozav, nu-i așa!
Si in concluzie…
Deși doar zgârie suprafața, sper că acest articol a oferit o perspectivă asupra modului în care puteți crea o mișcare semnificativă în aplicațiile dvs. Aștept cu nerăbdare să învăț cum le pot împinge mai departe și să îmbunătățesc modul în care arată și se simt designurile mele.
Dacă v-a plăcut acest articol, vă rugăm să faceți clic pe „Recomandă”!
Mi-ar plăcea să aud părerile voastre despre asta și despre unde folosiți aceste animații - vă rugăm să lăsați o recenzie sau să mă scrieți pe Twitter!
Începând cu Android 4.4, dezvoltatorii au un instrument suplimentar pentru crearea de animații - Transitions Framework. Inițial, a fost destinat să creeze animații de schimbare a stării unei aplicații prin manipularea mai multor vizualizări. Odată cu lansarea Android 5.0, setul de animații disponibile pentru utilizare a fost extins pentru a corespunde conceptului Material Design introdus în același timp.
Transitions Framework vă permite să creați rapid și fără durere diverse animații. Prin urmare, în procesul de lucru la iFunny, a fost imposibil să ignorați acest set de instrumente. Cititorii sunt invitați la un caz special de utilizare a API-ului Transitions - crearea de animație a tranziției între Activitate cu un efect „fără întreruperi”.
Din punct de vedere vizual, animațiile de tranziție între Activități prezentate în cadrul Transitions Framework pot fi împărțite în două tipuri: animații obișnuite și animații cu un element comun. Conceptul de animație cu un element comun este demonstrat într-o figură furată sincer de pe developer.android.com. 1. Elementele comune de pe acesta sunt avatarul și numele persoanei de contact.
Orez. 1. Animație de tranziție între Activitate cu elemente comune
Dar nimănui nu-i plac prezentările lungi, așa că să trecem imediat la povestea despre cum au fost create animații de acest tip în aplicația iFunny. Ca prim exemplu, luați în considerare animația prezentată în Fig. 2. Pentru a-l folosi, avem nevoie de versiunea Android 5.0 și o versiune ulterioară.
Orez. 2. Animație de tranziție între Activități pe ecranul de autentificare a utilizatorului
Din punctul de vedere al utilizatorului, nu este nimic neobișnuit aici: un ecran, animație simplă. Dar, după cum probabil ați ghicit, „sub capotă” este tranziția între două ecrane cu un element comun.
Primul pas pentru a crea o astfel de tranziție este, în mod ciudat, selectarea acestui element și determinarea locației acestuia în aspectul ambelor Activități. După aceasta, trebuie să adăugați atributul android:transitionName la descrierea fiecărei vizualizări care afișează elementul selectat și, de asemenea, să le atribuiți un android:id dacă lipsește.
În cazul nostru, acestea sunt ImageViews obișnuite de următoarea formă:
Există două puncte importante care merită remarcate aici. În primul rând, ambele ImageViews trebuie setate la același transitionName, ceea ce este logic. În al doilea rând, din moment ce folosim ImageView, conținutul lor trebuie să fie același, deoarece utilizarea a două resurse diferite poate duce la consecințe neașteptate (cel puțin la clipirea vizualizării animate la începutul și la sfârșitul animației).
În al doilea pas, trebuie să adăugați opțiuni pentru (a doua) Activitate lansată, indicând faptul că o animație ar trebui să fie lansată când începe.
Notă. Prin „a doua” înțelegem Activitatea lansată, a cărei tranziție trebuie efectuată, iar prin „întâi” înțelegem Activitatea de lansare.
Acest lucru se face după cum urmează:
Bundle bundle = nul; if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) ( Vizualizare v = activity.findViewById(R.id.auth_logo); if (v != null) ( Opțiuni ActivityOptions = ActivityOptions.makeSceneTransitionAnimation(activitate) , v, activity.getString(R.string.email_auth_transition)); if (pachet == null) ( activity.startActivity(intent); ) else ( activity.startActivity(intent, bundle); )
In urmatoarea lista:
- R.id.auth_logo - ImageView din prima Activitate, folosită în animație;
- activitate - prima Activitate;
- R.string.email_auth_transition - o etichetă lăsată anterior în aspectul ambelor ImageViews;
- SecondActivity.class - a doua Activitate.
Și acum cititorul atent poate fi perplex: în introducere am vorbit despre utilizarea nivelului API 19, în exemplu era nivelul API 21, iar în lista de mai sus există o restricție la nivelul API 22. Din păcate, atunci când scrieți codul s-a dovedit că animațiile de tranziție cu un element comun se pot comporta incorect pe telefoanele cu nivelul API 21. Acest lucru se manifestă sub formă de încetiniri ale animației în general și artefacte pe vizualizarea animată în special. Dacă sunteți deja familiarizat cu subiectul, cunoașteți motivele acestui comportament și/sau modalitățile de rezolvare a problemei descrise, spuneți-ne despre aceasta în comentarii.
La al treilea pas, este necesar să descriem animația de tranziție, adică. indica calea parcursă de Vederea animată și transformarea Vederii în sine. Pentru asta vom crea dosar separat projectName/src/main/res/transitions/email_auth_transition.xml cu următorul conținut:
Puțină teorie. Eticheta transitionSet este destinată să descrie mai multe transformări aplicate vizualizării animate simultan. Parametrul transitionOrdering controlează ordinea în care sunt aplicate aceste transformări. În cazul nostru, acestea sunt aplicate simultan. Există mai multe tipuri de transformări pre-construite furnizate în cadrul de tranziții. CU lista plina poate fi găsit pe această pagină. Ne vom concentra pe două specifice: changeBounds și changeImageTransform.
Prima este pentru transformarea dimensiunii Vizualizării. Al doilea funcționează numai cu ImageView și, împreună cu primul, vă permite să schimbați nu numai dimensiunea, ci și forma ImageView-ului. Folosind datele de transformare, obținem animația de ieșire a modificării dimensiunii imaginii, prezentată în Fig. 2. Dacă nu specificați tipul de mișcare a vizualizării animate, atunci aceasta se va deplasa pe calea cea mai scurtă. Mai mult mod interesant Vom lua în considerare mișcarea în al doilea exemplu.
Ultimul pas în crearea unei animații este declararea acesteia în temele ambelor Activități. Pentru a face acest lucru, editați descrierea temelor după cum urmează (sau creați altele noi în folderul projectName/src/main/res/values-v22/theme.xml):
- android:windowActivityTransitions permite animațiile de tranziție;
- android:windowSharedElementEnterTransition indică un fișier care descrie animația tranziției de la prima activitate la a doua;
- android:windowSharedElementExitTransition indică un fișier care descrie animația de tranziție la întoarcerea de la a doua activitate la prima.
Trebuie remarcat faptul că pentru versiunile OS sub 5.1 este necesar să se creeze teme cu stiluri identice pentru a evita consecințele destul de așteptate ale prăbușirii aplicației. De exemplu, să le punem în fișierul projectName/src/main/res/values/theme.xml:
Deci, pentru a crea o animație a tranziției de la activitate la activitate, trebuie să:
- Descrieți animațiile (în cazul nostru într-un fișier xml);
- Adăugați aceste animații la descrierea xml a temei Activitate;
- Marcați elementul comun animat (View) în marcaj;
- Când lansați a doua activitate, specificați în parametrii de lansare de care are nevoie pentru a activa animația de tranziție.
După cum puteți vedea, crearea unor astfel de animații nu este deloc dificilă, cu excepția unor restricții menționate în primul exemplu. Acum să ne uităm la al doilea, mai mult exemplu complex. Aici ne interesează trecerea de la secțiunea de comentarii la profilul utilizatorului (Fig. 3).
Orez. 3. Animarea trecerii de la comentarii la profilul utilizatorului
Toți pașii de tranziție discutați mai sus se aplică și acestei animații. Dar transformarea elementului comun este implementată puțin diferit. Lista de mai jos descrie mutarea unui element generic „de-a lungul unui arc” în timp ce se modifică dimensiunea acestuia.
Care este dificultatea celui de-al doilea exemplu? În primul caz, a fost folosită o imagine din resursele aplicației în sine, dar aici imaginea este descărcată din rețea. În plus, pentru comentarii, imaginea avatarului utilizatorului este realizată la o rezoluție mai mică decât pentru profil. Prin urmare, este necesar nu numai să se acorde celei de-a doua activități acces la imaginea utilizată în prima, ci și să se încarce imaginea necesară la o calitate superioară la finalizarea animației. Acest lucru creează două probleme.
Pentru a o rezolva pe prima, ai putea să memorezi imaginea pe disc sau să-i treci adresa în parametrul celei de-a doua activități. Cu toate acestea, soluția la această problemă a fost mutată către biblioteca utilizată în aplicația de încărcare a imaginilor - Glide. Când încărcați o imagine, adăugați pur și simplu parametrul diskCacheStrategy(DiskCacheStrategy.SOURCE) și acesta va fi stocat în cache de biblioteca în sine (relevant pentru versiunea Glide 3.x). Prin urmare, atunci când accesăm din nou această resursă din a doua Activitate, va fi folosit fișierul stocat în cache, ceea ce ne va ajuta să evităm clipirea imaginii animate ImageView.
A doua problemă este, de asemenea, rezolvată destul de simplu. În timp ce animația de tranziție este efectuată, profilul utilizatorului împreună cu avatarul la o rezoluție mai mare este descărcat din rețea și așteaptă finalizarea acestuia. Odată ce ambele condiții sunt îndeplinite (animația completă și încărcarea completă), avatarul utilizatorului este actualizat. Puteți obține acest comportament dacă utilizați un Ascultător special, care implementează apeluri care sunt apelate atunci când starea animației se schimbă. Pentru a face acest lucru, în Fragmentul care aparține celei de-a doua activități, vom seta același Ascultător:
@Override public void onViewCreated(View View, @Nullable Bundle savedInstanceState) ( super.onViewCreated(view, savedInstanceState); if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) ( getActivity().getWindow ).getSharedElementEnterTransition() .addListener(mEnterTransitionListener) setAvatar();
Iată ce se întâmplă:
- Folosind getSharedElementEnterTransition().addListener(), un Ascultător este setat pentru a anima aspectul Activității;
- Metoda setAvatar() încearcă să încarce și să instaleze un avatar (care este deja în cache).
Să vedem cum este implementat Ascultătorul:
Private Transition.TransitionListener mEnterTransitionListener = new Transition.TransitionListener() ( @Override public void onTransitionStart(Tranziție de tranziție) ( ) @Override public void onTransitionEnd (Tranziție de tranziție) ( onProfileUpdated(); ) @Override public void (onTransition transition) (onTransition public void) @Override public void onTransitionPause(Tranziție de tranziție) ( ) @Override public void onTransitionResume (Tranziție de tranziție) ( ) );
În metoda onProfileUpdated() actualizăm conținutul profilului, inclusiv. și avatar.
Merită menționat separat cazul în care un element comun iese de pe ecran. Particularitatea sa este că, contrar (sau poate conform) logicii, animația de tranziție va fi în continuare efectuată și va arăta destul de amuzant (Fig. 4).
Orez. 4. Animație de întoarcere de la profil la comentarii
Pentru a evita acest comportament, este suficient să-l setați la o altă vizibilitate decât View.VISIBLE atunci când elementul comun părăsește ecranul.
În general, putem spune că Transitions Framework este un instrument simplu și puternic pentru crearea de animații. Nu se limitează doar la animațiile de tranziție între Activitate - articolul a considerat doar un caz special de utilizare a acestuia. De asemenea, este de remarcat faptul că, pe lângă transformările oferite, este posibil să vă creați propria, dar aceasta este o poveste complet diferită, demnă de o postare separată.
P.S. Și puteți citi despre cum au fost inventate animațiile pentru iFunny.
Desemnarea conductelor metalice. Să ne uităm la denumirile celor mai comune conducte metalice conform GOST. Țevi de apă și gaz din oțel conform GOST Denumirea țevii indică diametrul nominal, lungimea (când se folosesc țevi cu lungime măsurată) și grosimea peretelui. Să luăm în considerare un exemplu de desemnare a unei țevi cu un diametru nominal de 32 mm, o grosime a peretelui de 2,8 mm, fără acoperire cu zinc: țeavă 32x2,8 GOST Prezența unui strat de zinc este indicată de litera C, care este plasată după cuvântul „țeavă”.
Dacă este necesar, în denumirea țevii este indicat un semn care indică prezența filetelor. Marcarea țevilor de oțel conform GOST se efectuează în fabrică după producție și conține informații despre dimensiunea, calitatea oțelului din care este fabricată țeava, precum și marca comercială a producătorului. Mărimea literelor și numerelor mărcii este direct proporțională cu dimensiunea produsului și poate fi aplicată folosind mai multe metode.
Cele mai comune sunt branding-ul și vopseaua impermeabilă. Tipurile de control și denumirea lor în etichetarea produsului sunt discutate în tabel (Tabel); Următorul element „” indică grosimea peretelui în milimetri; A patra valoare indică lungimea produsului în milimetri de la tăiere la tăiere, în acest caz este „”.
Cum să descifrați marcajele țevilor de oțel: diametrul, gradul de oțel și alți indicatori conform GOST. Simbolurile imprimate pe țeava de oțel oferă informații complete despre produs.
Marcarea este un fel de pașaport al unui produs, din care devine clar cine, unde și în ce scopuri a fost fabricat. Acest articol vă va spune cum să descifrați corect toate simbolurile de marcare pe țevi.
Notă. Marcarea țevilor din oțel (și fontă) este reglementată de GOST Nr. al anului. Acest document definește toate nuanțele aplicării inscripțiilor explicative, dimensiunile acestora, distanțele dintre numere etc.
Țevi din oțel fără sudură deformate la rece GOST (Asortiment) Acest standard se aplică țevilor fără sudură deformate la rece pentru uz general, fabricate din oțel carbon și aliat. Diametre: 5 - mm. În simbolurile țevilor, indicele A sau B este plasat înaintea clasei de oțel. Țevile sunt fabricate fie tratate termic, fie fără tratament termic.
Capetele țevilor trebuie tăiate în unghi drept. Metode de marcare a țevilor de oțel: standarde GOST, exemple de simboluri de decodare. Citind numerele de pe produs, un specialist poate determina dimensiunea țevii, tipul acesteia, calitatea oțelului, rezistența, producătorul și alți parametri ai produsului.
Marcarea țevilor de oțel cu destinație specială conține marcaje suplimentare. Produsele cu destinație specială includ: Țevi din oțel aliat. 4. REFERINȚE Documente de reglementare și tehnice. Denumirea NTD. la care este dat linkul. W s g -80 GOST yu S1 Număr articol. Schimbarea nr. 2 GOST - 91 Țevi de oțel sudate drepte electrosudate.
Sortiment Adoptat de Consiliul Interstatal pentru Standardizare, Metrologie și Certificare prin corespondență (protocol nr. 45- datat) Înregistrat de Biroul de Standarde IGU Nr. Organismele naționale de standardizare din următoarele state au votat pentru adoptarea modificării: BY, KG , RU, TJ [coduri alfa 2 conform MK (ISO)].
Vânzare și cumpărare. Denumire țevi de oțel. Țevi de oțel cu cusătură dreaptă sudate electric. Sortiment. Editura GOST IPK cu standarde. Standardul de stat al Uniunii URSS. Țevi de oțel sudate electric cu îmbinare directă. Cu ornament. Lubrifii de linie de sudare din oțel sudate electric. Gamă. GOST Data introducerii 1. Acest standard stabilește o gamă de țevi din oțel sudate electric cu cusături drepte.
2. Dimensiunile tevilor trebuie sa corespunda tabelului. 1. 3. După lungimea conductei se realizează: de lungime nemăsurată Desemnarea documentaţiei ştiinţifice şi tehnice la care se face referire. Numărul de articol. GOST
Categorii Post navigareDe ceva timp în Android este posibil să se utilizeze resurse vectoriale în loc de felii png. Această oportunitate a apărut odată cu lansarea Android 5.0 Lollipop și API 21. Pentru versiunile anterioare ale sistemului, putem folosi AppCompat (biblioteca de compatibilitate), datorită căreia un vector static va funcționa cu API 7 (Android 2.1) și unul animat. cu API 11 (Android 3.0 Honeycomb).
Resursele vectoriale, spre deosebire de tăierea convențională, ocupă de aproximativ 10 ori mai puțin spațiu. Nu este nevoie să adaptați grafica la diferite densități de ecran. În plus, puteți reutiliza resursa în diferite contexte, dimensiuni și culori.
Pentru alții avantaj important este capacitatea de a adăuga animație. Da, desigur, animația poate fi făcută folosind png — de exemplu, animația sprite, dar o astfel de animație va ocupa de zeci de ori mai mult spațiu, ținând cont de suportul pentru toate rezoluțiile.
Vector pentru Android?
Înainte de a începe să creați elemente vectoriale, trebuie să înțelegeți ce este un vector pe Android. Înțelegerea structurii este foarte importantă, deoarece în prezent nu există instrumente pentru crearea convenabilă și controlul vizual al animației.
Din păcate (sau din fericire), nu puteți folosi fișiere svg direct în Android, cel puțin fără a utiliza biblioteci terțe. Motivul este foarte simplu și este că formatul SVG este foarte complex și bogat în capacități, iar susținerea unei astfel de funcționalități bogate este complexă și nu practică pentru lucruri atât de simple precum pictogramele și nu uitați de problema performanței și a compatibilității. De aceea, în Android folosesc un format mai simplu, care, totuși, este în multe privințe similar cu svg.
Grafica vectorială este reprezentată ca două clase, VectorDrawable și AnimatedVectorDrawable. Din numele claselor este clar că prima este responsabilă pentru un vector static, iar a doua pentru animația acestuia. Clasele sunt descrise de o resursă XML obișnuită.
Mai întâi, să ne uităm la un VectorDrawable, care are următoarea structură:
În element
Pentru a adăuga animație, folosim clasa ObjectAnimator, pe care o aplicăm pur și simplu obiectelor VectorDrawable. Putem aplica animația atât unui grup general, cât și unui anumit grup
Anterior, pentru a implementa animația într-o aplicație, era necesar să se folosească cel puțin 3 fișiere xml: 1 fișier pentru VectorDrawable care trebuie animat, altul pentru animatorul care descrie animația și ultimul fișier care combină direct animatorul și VectorDrawable. . Cum animație mai complexă, acestea mai multe fișiere trebuia creat, ceea ce ducea adesea la confuzie.
La Google I/O 2016, a fost introdus un nou format - pachetul XML. Vă permite să descrieți animația vectorială într-un singur fișier.
Exemplu XML Pachet
În esență, plasăm toate informațiile necesare în AnimatedVectorDrawable. Este foarte ușor să asamblați un astfel de fișier, piesele sunt evidențiate în imagine, care sunt pur și simplu decupate din resursele corespunzătoare și introduse între etichetele speciale aapt.
Pregătirea unui vector pentru Android
Mai întâi avem nevoie de oricine editor grafic, care poate scoate un fișier svg. Din fericire, există foarte multe dintre ele: Photoshop, Illustrator, Sketch, Inkscape, Affinity Designer etc.
Când creați o imagine vectorială, trebuie să utilizați cel mai mult instrumente de bază, deoarece umbrele și alte filtre pur și simplu nu vor funcționa.
De exemplu, am făcut o pictogramă de castel simplă și am împărțit-o în două forme (grupuri) pentru animația ulterioară. Îl salvăm ca svg și asigură-te că verificăm corectitudinea exportului. Foarte des apar probleme cu lovitura și cuibărirea excesivă a obiectelor. De regulă, încercați să combinați totul într-un singur obiect cât mai mult posibil și traduceți accidentul vascular cerebral în formă (contur).
Convertiți SVG în XML
Există mai multe moduri de a face conversie svg fișier în xml.
Prima modalitate este să faci totul manual. Acest lucru, desigur, nu este foarte convenabil, dar nu este nimic complicat aici. Doar transferați bucăți din svg în xml folosind nume corecte parametrii. Mai jos am evidențiat piese care sunt aproape complet identice.
A doua metodă — B Android Studio Există un instrument numit Vector Asset Studio care vă permite să traduceți automat un fișier SVG în XML. Puteți selecta resurse din biblioteca de pictograme sau puteți specifica propriul fișier SVG. Datorită previzualizării, puteți evalua imediat corectitudinea exportului. Există setări utile.
A treia modalitate este de a folosi instrumente online, De exemplu