Animazione implicita

L'animazione implicita è un concetto nella progettazione dell'interfaccia utente in cui le animazioni possono essere programmate o disegnate entro vincoli preesistenti. Si distingue dall'animazione esplicita poiché implica la costruzione degli oggetti di animazione, impostando le loro proprietà e quindi applicando tali oggetti di animazione per l'oggetto che il progettista desidera sia animato.

Esempi d'uso

Core Animation della Apple

Core Animation è un API per la visualizzazione dei dati, usata sotto il sistema operativo macOS per produrre un'interfaccia utente animata^[1].

class ViewController: UIViewController {     var myView: UIView!          override func viewDidLoad() {         super.viewDidLoad()         let frame = CGRect(origin: CGPoint.zero, size: CGSize(width: 100, height: 100))         myView = UIView(frame: frame)         myView.backgroundColor = .black         view.addSubview(myView)     }     override func viewDidAppear(_ animated: Bool) {         super.viewDidAppear(animated)                  let animation = CABasicAnimation(keyPath: "position.x")         animation.fromValue = CGPoint.zero         animation.toValue = view.bounds.size.width         animation.duration = 0.5         animation.beginTime = CACurrentMediaTime() + 0.3         animation.repeatCount = 4         animation.autoreverses = true          myView.layer.add(animation, forKey: nil)    } }

Transizioni e Trasformazioni CSS

Logo di CSS

Il CSS (sigla di Cascading Style Sheets, in italiano fogli di stile a cascata), in informatica, è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, ad esempio i siti web e relative pagine web^[2].

div {   transition: transform 1s; }  div:hover {   transform: scale(2); }

Flutter

Logo di Flutter

Flutter è un framework open-source creato da Google per la creazione di interfacce native per iOS e Android, oltre ad essere il metodo principale per la creazione di applicazioni per Google Fuchsia^[3].

import 'package:flutter/material.dart';  const mela_url = 'mela.jpg';  class FadeInDemo extends StatefulWidget {   _FadeInDemoState createState() => _FadeInDemoState(); }  class _FadeInDemoState extends State<FadeInDemo> {   @override   Widget build(BuildContext context) {     return Column(children: <Widget>[       Image.network(mela_url),       TextButton(           child: Text(             'Mostra dettagli',             style: TextStyle(color: Colors.blueAccent),           ),           onPressed: () => null),       Container(         child: Column(           children: <Widget>[             Text('Tipo: mela'),             Text('Sapore: dolce'),             Text('Colore: rosso'),           ],         ),       )     ]);   } }  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       debugShowCheckedModeBanner: false,       home: Scaffold(         body: Center(           child: FadeInDemo(),         ),       ),     );   } }  void main() {   runApp(     MyApp(),   ); }

WebGL

WebGL è una libreria grafica per il web (Web-based Graphics Library). È un contesto di HTML che fornisce un'API di grafica 3D per i browser web. Le specifiche sono ancora in costruzione. WebGL è gestito dal Khronos Group, un'organizzazione non profit^[4].

chiavi var = [0, 0.25, 1]; valori var = [new THREE.Vector3 (0, 0, 0),     nuovo TRE.Vettore3 (0, 1, 0),     nuovo TRE.Vettore3 (0, 2, 5)];

SVG

Scalable Vector Graphics (formato in .svg), indica un particolare formato che è in grado di visualizzare oggetti di grafica vettoriale e quindi di salvare immagini in modo che siano ingrandibili e rimpicciolibili a piacere senza perdere in risoluzione grafica.^[5]

<svg width="500" height="100">   <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />      <animate             xlink:href="#orange-circle"            attributeName="cx"            from="50"            to="450"             dur="1s"            begin="click"            fill="freeze" /> </svg>

Canvas HTML5

Esempio di animazione ottenibile con Canvas

Canvas è un elemento dello standard HTML5 che permette il rendering dinamico di immagini bitmap attraverso un linguaggio di scripting^[6].

this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}; this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};

Note

^ (EN) Introduction to Core Animation: Step-by-step Guide, su Mobindustry - App Development, 22 giugno 2019. URL consultato il 25 febbraio 2021.
^ (EN) CSS Transitions and Transforms for Beginners, su thoughtbot, 24 agosto 2015. URL consultato il 25 febbraio 2021.
^ (EN) Implicit animations, su flutter.dev. URL consultato il 25 febbraio 2021.
^ (EN) 4. Animation - WebGL: Up and Running [Book], su oreilly.com. URL consultato il 25 febbraio 2021.
^ (EN) A Guide to SVG Animations (SMIL), su CSS-Tricks, 13 ottobre 2014. URL consultato il 25 febbraio 2021.
^ (EN) Create Beautiful HTML5 Animations With the Canvas Element, su Cloudinary. URL consultato il 25 febbraio 2021.

[1] (EN) Introduction to Core Animation: Step-by-step Guide, su Mobindustry - App Development, 22 giugno 2019. URL consultato il 25 febbraio 2021.

[2] (EN) CSS Transitions and Transforms for Beginners, su thoughtbot, 24 agosto 2015. URL consultato il 25 febbraio 2021.

[3] (EN) Implicit animations, su flutter.dev. URL consultato il 25 febbraio 2021.

[4] (EN) 4. Animation - WebGL: Up and Running [Book], su oreilly.com. URL consultato il 25 febbraio 2021.

[5] (EN) A Guide to SVG Animations (SMIL), su CSS-Tricks, 13 ottobre 2014. URL consultato il 25 febbraio 2021.

[6] (EN) Create Beautiful HTML5 Animations With the Canvas Element, su Cloudinary. URL consultato il 25 febbraio 2021.

[1]

[2]

[3]

[4]

[5]

[6]