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.

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

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.

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.

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.

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

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);};