Animation: Difference between revisions

2,293 bytes added ,  4 years ago
m (→‎{{header|MiniScript}}: added "works with" tag)
Line 490:
 
=={{header|Dart}}==
{{libheader|Flutter}}
view it on dartpad!
<lang javascript>import 'package:flutter/material.dart';
import 'dart:htmlasync' show Timer;
 
void main() {
<lang dart>
import 'dart:html';
var timer = const Duration( milliseconds: 75 ); // How often to update i.e. how fast the animation is
runApp(MaterialApp (
home: Scaffold (
body: Center (
child: AnimatedText( timer )
)
)
));
}
 
class AnimatedText extends StatefulWidget {
final Duration period; // Time period for update
AnimatedText( this.period );
@override
_AnimatedText createState() => _AnimatedText( period );
}
 
 
class _AnimatedText extends State<AnimatedText> {
bool forward = true; // Text should go forward?
Timer timer; // Timer Objects allow us to do things based on a period of time
// We want to get an array of characters, but Dart does not have a char type
// Below is the equivalent code
var _text = 'Hello World! '.runes // .runes gives us the unicode number of each character
.map( (code) => String.fromCharCode(code) ) // Map all these codes to Strings containing the single character
.toList(); // Conver to a List
_AnimatedText( Duration period ){
timer = Timer.periodic( period , (_){
setState((){ // Set state forces the gui elements to be redrawn
shiftText();
});
});
}
String get text => _text.join(''); // Getter, joins the list of chars into a string
void shiftText() {
if (forward) { // If we should go forward
var last = _text.removeLast(); // Remove the last char
 
_text.insert( 0, last); // Insert it at the front
} else { // If we should go backward
var first = _text.removeAt(0); // Remove the first char
_text.insert( _text.length, first ); // Insert it at the end
}
}
@override
Widget build(BuildContext context) {
return GestureDetector( // GestureDetector lets us capture events
onTap: () => forward = !forward, // on Tap (Click in browser) invert the forward bool
child: Text(
text, // Call the text getter to get the shifted string
style: TextStyle( // Styling
fontSize: 50,
color: Colors.grey[600]
)
)
);
}
}
</lang dart>
 
{{libheader|Html Dom}}
<lang javascript>import 'dart:html';
import 'dart:async';