Famous / famous-angular

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.
https://famo.us/angular
Mozilla Public License 2.0
1.92k stars 275 forks source link

Create an faPerspective attribute directive requiring the faApp directive. #151

Closed trusktr closed 10 years ago

trusktr commented 10 years ago

In vanilla famo.us, perspective is something you apply to you famous context.

    var mainContext = Engine.createContext();
    mainContext.setPerspective(1200);

It would seem appropriate to make an faPerspective attribute directive for use on the 'faApp' directive like so:

<fa-app fa-perspective="1200" class="full-screen">
    ...
</fa-app>
zackbrown commented 10 years ago

Thanks for suggesting this! This was implemented a couple of weeks ago in d99b39beb8b3 but it may not yet be in a tagged release (latest is 0.1.0.) We're due for another release soon, but if you'd like it sooner you can pull it directly from master in the meantime.

trusktr commented 10 years ago

Sweet. I was going to suggest simply adding

            isolate.context.setPerspective(scope.$eval(attrs.faPerspective));

right after createContext() for starters, but that won't update dynamically.

subtubes-io commented 9 years ago

This doesn't seem to work anymore

jd-carroll commented 9 years ago

Can you please provide more details as how this is not working...

@zackbrown This should be moved to parseInt(scope.$eval(attrs.faPerspective)) or something similar.

rohanrehman commented 9 years ago
<fa-app ng-controller="famousCtrl" style="width: auto; height: 800px" fa-perspective="1000">

@zackbrown setting a rotation

   $scope.box.rotate.set(-45 * Math.PI/180, {duration: 1200, curve: Easing.inOutExpo});

and an fa-modifier

  fa-rotate-y="box.rotate.get()"

the box will rotate with no perspective applied until chrome (Version 41.0.2272.118 (64-bit)) is resized, resizing chrome before the animation is called makes no difference.

Bug is not reproduced in Safari.