Animazione implicita

Lanimazione implicita è un concetto nella progettazione dell'interfaccia utente in cui le animazioni possono essere programmate o disegnate entro vincoli preesistenti. Si distingue dallanimazione 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.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

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

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

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

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" />

Canvas HTML5

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

Note

Categoria:CSS Categoria:Interfaccia utente Categoria:Design pattern

Animazione implicita

Źródło i licencja