|
<html ng-app="myAppName">
<head>
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/famous-angular/dist/famous-angular.js"></script>
<script src="../bower_components/famous/dist/famous-global.js"></script>
<!-- endbower -->
<script>
angular.module('myAppName', ['famous.angular'])
.controller('Lesson1Ctrl', function($scope, $famous, $timeline) {
$scope.data = {message: "Hello"};
var Transitionable = $famous['famous/transitions/Transitionable'];
var Easing = $famous['famous/transitions/Easing'];
$scope.t = new Transitionable(0);
$scope.translation = $timeline([
[0, [100, 100, 0], Easing.inOutQuad],
[0.25, [400, 200, 0], Easing.inOutQuad],
[0.5, [300, 300, 0], Easing.inOutQuad],
[0.75, [200, 500, 0], Easing.inOutQuad],
[1, [100, 100, 0], Easing.inOutQuad],
]);
$scope.t.delay((1000), function(){ // we will delay each animation based on index
$scope.t.set(1, {duration: 3400}, function(){
}); // we will set each Transitionable to 1 == which is the index of the $timeline to transition to
});
});
</script>
</head>
<body >
<fa-app ng-controller='Lesson1Ctrl' id="app">
<ui-view>
<fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" >
<fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'">
{{data.message}}
</fa-surface>
</fa-modifier>
</fa-app>
</body>
</html>
|
