Closed oojr closed 10 years ago
I just tested this, and it works, so please tell me if it works for you as well.
<fa-modifier fa-size="[100, 100]" fa-origin="[0.5, 0]" fa-translate="bouncy.get()">
<fa-surface fa-click="buttonFlyDown()" fa-background-color="'rgb(5,22,48)'">
</fa-surface>
</fa-modifier>
var Transitionable = $famous['famous/transitions/Transitionable'];
var SpringTransition = $famous['famous/transitions/SpringTransition'];
Transitionable.registerMethod('spring', SpringTransition);
var spring = {
method: 'spring',
period: 1000,
dampingRatio: 0.3
};
$scope.bouncy = new Transitionable([0,0,0]);
$scope.buttonFlyDown = function(){
$scope.bouncy.set([200, 200, 0], {method : 'spring', dampingRatio : 0.5, period : 500});
};
With fa-translate, pass bouncy.get(), a function that returns the interpolated state of a transition, so in this case, [0,0,0]. By binding it to the scope this way, if bouncy changes, the view will reflect that immediately.
In the controller, with $scope.bouncy, pass an array to instantiate the Transitionable, because it expects [x, y, z] values as the first argument, in the case of a translate.
With $scope.bouncy.set(), pass it the end state of the transition, with [x,y,z] values. You can change those to anything you'd like.
Also, I noticed there was nothing triggering the animation, so I added an fa-click="buttonFlyDown()" to your fa-surface.
One last note, it's better to set fa-size on the modifier rather than on the fa-surface itself. In Famous, modifiers affect all child elements below it.
Hope this helps!
Edit: I just noticed that you called $scope.buttonFlyDown() in your controller, and that would trigger the animation.
Nice @thuongvu , it works for me too, one thing though, I am trying to start the spring transitions on page load instead of click
Great explanation, @thuongvu. @oojr, you should just be able to call $scope.buttonFlyDown() from your controller and it will execute on page load.
Thanks I have the famous spring animations working
<fa-app class="full-screen">
<fa-modifier fa-size="[100, 100]" fa-origin="[0.5, 0]" fa-translate="bouncy.get()">
<fa-surface fa-background-color="'rgb(5,22,48)'"></fa-surface>
</fa-modifier>
</fa-app>
'use strict';
angular.module('famousAngularStarter')
.controller('MainCtrl', function ($scope, $famous) {
var Transitionable = $famous['famous/transitions/Transitionable'];
var SpringTransition = $famous['famous/transitions/SpringTransition'];
Transitionable.registerMethod('spring', SpringTransition);
var spring = {
method: 'spring',
period: 1000,
dampingRatio: 0.3
};
$scope.bouncy = new Transitionable([0,0,0]);
$scope.buttonFlyDown = function(){
$scope.bouncy.set([0, 300, 0], {method : 'spring', dampingRatio : 0.5, period : 1000});
};
$scope.buttonFlyDown();
});
trying to use spring animations but not sure how to set up the controller or html