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

IMessage, esempio di Core Animation

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|CSS3

Logo di CSS3

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

Screenshot di animazione 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

Esempio di animazione 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

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.