Animație implicită
Animația implicită este un concept în proiectarea interfeței utilizator în care animațiile pot fi programate sau desenate în cadrul constrângerilor preexistente. Se diferențiază de animația explicită prin faptul că implică construirea de obiecte de animație, setarea proprietăților acestora și apoi aplicarea acestor obiecte de animație la obiectul pe care designerul dorește să-l animeze.
Exemple de utilizare
Core Animation de la Apple
Core Animation este un API de vizualizare a datelor, utilizat sub sistemul de operare macOS pentru a produce o interfață de utilizator animată [1] .
clasa ViewController : UIViewController {
var myView : UIView !
suprascrie func viewDidLoad () {
super . viewDidLoad ()
let frame = CGRect ( origine : CGPoint . zero , dimensiune : CGSize ( lățime : 100 , înălțime : 100 ))
myView = UIView ( cadru : cadru )
myView . backgroundColor = . negru
vedere . addSubview ( myView )
}
suprascrie func viewDidAppear (_ animate: Bool) {
super . viewDidAppear ( animat )
let animation = CABasicAnimation ( keyPath : "position.x" )
animatie . fromValue = CGPoint . zero
animatie . toValue = vizualizare . limite . dimensiune . lăţime
animatie . durata = 0,5
animatie . beginTime = CACurrentMediaTime () + 0.3
animatie . repeatCount = 4
animatie . autoreverse = adevărat
myView . strat . adăugați ( animație , forKey : nil )
}
}
CSS3 Tranziții și transformări
CSS (abreviere pentru Cascading Style Sheets, în italiană cascading style sheets), în informatică , este un limbaj folosit pentru a defini formatarea documentelor HTML , XHTML și XML , cum ar fi site-uri web și pagini web conexe [2] .
div {
tranziție : transformă 1 s ;
}
div : hover {
transforma : scala ( 2 );
}
Flutură
Flutter este un cadru open-source creat de Google pentru crearea de interfețe native pentru iOS și Android , precum și metoda principală pentru construirea aplicațiilor pentru Google Fuchsia [3] .
import 'pachet: flutter / material.dart' ;
const mela_url = 'apple.jpg' ;
clasa FadeInDemo extinde StatefulWidget {
_FadeInDemoState createState () => _FadeInDemoState ();
}
clasa _FadeInDemoState extinde Starea < FadeInDemo > {
@ suprascrie
Construire widget ( context BuildContext ) {
return Coloana ( copii : < Widget > [
Imagine . rețea ( mela_url ),
TextButton (
copil : Text (
„Afișează detaliile” ,
stil : TextStyle ( culoare : Culori . albastruAccent ),
),
onPressed : () => null ),
Container (
copil : Coloană (
copii : < Widget > [
Text ( „Tip: măr” ),
Text ( „Aromă: dulce” ),
Text ( „Culoare: roșu” ),
],
),
)
]);
}
}
clasa MyApp extinde StatelessWidget {
@ suprascrie
Construire widget ( context BuildContext ) {
returnează MaterialApp (
debugShowCheckedModeBanner : fals ,
acasă : Schelă (
corp : centru (
copil : FadeInDemo (),
),
),
);
}
}
void main () {
runApp (
MyApp (),
);
}
WebGL
WebGL este o bibliotecă grafică pentru web ( G raphics L ibrary bazată pe web ). Este un context HTML care oferă o API grafică 3D pentru browserele web. Specificațiile sunt încă în construcție. WebGL este administrat de Khronos Group , o organizație non-profit [4] .
chei var = [ 0 , 0,25 , 1 ];
valori var = [ TREI noi . Vector3 ( 0 , 0 , 0 ),
TREI noi . Vector3 ( 0 , 1 , 0 ),
TREI noi . Vector3 ( 0 , 2 , 5 )];
SVG
Grafică vectorială scalabilă (format în .svg ), indică un anumit format care este capabil să afișeze obiecte grafice vectoriale și, prin urmare, să salveze imagini, astfel încât să poată fi mărite și reduse după cum doriți, fără a pierde rezoluția grafică . [5]
< svg width = "500" height = "100" >
< circle id = "orange-circle" r = "30" cx = "50" cy = "50" fill = "orange" />
< animat
xlink: href = "# orange-circle"
attributeName = "cx"
din = "50"
până la = "450"
dur = "1s"
begin = "click"
fill = "congela" />
</ svg >
Pânză HTML5
Canvas este un element al standardului HTML5 care permite redarea dinamică a imaginilor bitmap printr-un limbaj de scriptare [6] .
aceasta . rand = function ( rMi , rMa ) { return ~~ (( Math . random () * ( rMa - rMi + 1 )) + rMi );};
aceasta . hitTest = funcție ( x1 , y1 , w1 , h1 , x2 , y2 , w2 , h2 ) { return ! ( x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1 );};
Notă
- ^ (RO) Introducere în animația de bază: ghiduri pas cu pas despre Mobindustry - Dezvoltarea aplicațiilor, 22 iunie 2019. Accesat la 25 februarie 2021.
- ^ (RO) CSS Transitions and Transforms for Beginners , on Thoughtbot, 24 august 2015. Adus 25 februarie 2021.
- ^ (EN) Animații implicite , pe flutter.dev. Adus la 25 februarie 2021 .
- ^ (RO) 4. Animație - WebGL: Up and Running [Book] pe www.oreilly.com. Adus la 25 februarie 2021 .
- ^ (EN) A Guide to SVG Animations (SMIL) , CSS-Tricks, 13 octombrie 2014. Accesat la 25 februarie 2021.
- ^ (RO) Creați animații frumoase cu elementul HTML5 Canvas pe Cloudinary. Adus la 25 februarie 2021 .