示例项目：使用Famo.us和Angular创建一个移动应用程序-CSDN博客

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

我喜欢高性能JavaScript，也喜欢分享我认为它的真正潜力。在本教程中，我想重点介绍Famo.us –它可以让您在屏幕上流畅播放动画的同时，保持每秒60帧的柔滑效果。 Famo.us通过使用CSS3原语-webkit-transform：matrix3d来完成此任务，该框架使框架能够计算复合矩阵并跳过浏览器的渲染器。没有插件，没有下载，没有黑客。通过将此附加到每个DIV，开发人员可以渲染复合矩阵并直接进入GPU。

在此博客文章中讨论Famo.us的来龙去脉时，我会更加深入。再次感谢Zack Brown在此方面的所有协助！让我们开始吧：

在该项目结束时，您将能够：

了解Angular如何在Famo.us应用程序上下文中工作
充分利用JavaScript和HTML5的强大功能
??创建流畅的动画

我对该项目的目标是说明如何轻松创建HTML5 / JS项目，这些项目在移动应用程序上以接近本机的速度运行。

特征

移动应用程序通过Cordova在iOS和Android上运行
Windows 10通用应用程序可以在Windows 10本机上正常运行
这个项目也可以作为托管网站运行，尽管我最适合移动设备

要求

PC或Mac
网络服务器
跨平台测试矩阵（例如EdgeHTML的BrowserStack，IDE或免费虚拟机，Microsoft Edge的呈现引擎以及Windows 10上托管的Web应用程序内容）。

设定

1. 从GitHub下载源代码
2.下载并安装Web服务器（我在OS X上使用MAMP，在Windows上使用带有Visual Studio的内置IIS服务器）

打开项目

1.启动您的Web服务器
2.导航到著名的角度口袋妖怪/应用程序/

该项目旨在在移动设备上工作，因此请在浏览器中使用移动模拟器来获得正确的视图。这是通过Chrome桌面浏览器（375×667）在模拟器中的iPhone 6上的外观：

通过Chrome桌面浏览器在模拟器中的iPhone 6上，Pokedex应用程序的外观

怎么运行的

击中数据库

我从PokeAPI提取了所有信息， PokeAPI有一个文档齐全的API，但是每个Pokémon都缺少图像。对于图像，我只需拉出当前选择的神奇宝贝的名称并将其附加到此URL的末尾即可： http : //img.pokemondb.net/artwork/ 。例如： http ://img.pokemondb.net/artwork/venusaur.jpg将带您到Vanosaur的图片。漂亮，对不对？可悲的是，他们没有可用的API。

每次用户按下“ 下一步”按钮时，都会在我定义的最小值/最大值之间（例如1-20）生成一个随机数，并从数据库中提取一个与该数字匹配的神奇宝贝。看起来是这样的：

http://pokeapi.co/api/v1/pokemon/1/返回Bulbasaur的JSON对象。您可以在此处使用其API。

遍历数据

然后，我遍历该JSON对象，并使用$ Scope对象将在那里找到的属性设置为Angular中的变量。

这是一个例子：

/*
 * Grab Pokemon from the DB
 */
$scope.getPokemon = function () {  

  // Generate a random num and use it for the next pokemon
  getRandomInt($scope.minVal, $scope.maxVal);

  // Retrieve data from DB and draw it to screen
  $http.get($scope.dbURL + $scope.pokemonNum + "/")
    .success(function(data) {
      $scope.name       = data.name;
      $scope.imageUrl   = $scope.imgDbURL + $scope.name.toLowerCase() + '.jpg';

      /* 1) Empty out the current array to store the new items in there
       * 2) Capitalize the first character for each ability from the database
       * 3) Store that ability in a new abilityObj & add it into the abilities array
       */
      $scope.abilities.length = 0;
      for (var i = 0; i < data.abilities.length; i++){
       var capitalizedString = capitalizeFirstLetter(data.abilities[i].name);
       var abilityObj        = {name: capitalizedString };
        $scope.abilities.push(abilityObj);
      }

      $scope.hitPoints  = data. hp;
      var firstType     = data.types[0].name;
      $scope.types.name = capitalizeFirstLetter(firstType);
      determineNewBgColor();
    })
    .error(function(status){
      console.log(status);
      $scope.name = "Couldn't get Pokemon from the DB";
    });
};

您可能会注意到，我在这里还有其他一些功能，例如capitalizeFirstLetter正是这样做的。我希望能力和类型（例如：毒药，草，飞行）的首字母大写，因为它从数据库中以所有小写字母返回。

我还将遍历这些能力并将其推送到一个能力对象，如下所示：

   $scope.abilities       = [
    { name: "Sleep"},
    { name: "Eat"  }
  ];

该数据库还返回某些神奇宝贝的多种类型，例如飞行与射击一样的Charizard。为了使事情简单，我只想从数据库中返回一个。

  $scope.types      = { name: "Grass" };   
  var firstType     = data.types[0].name;

绘制到屏幕上

Famo.us通过创建“表面”（包含您的文本，图像等元素），有两波将绘画内容绘制到屏幕上的过程：

1.JavaScript
2.FA指令（HTML）

我没有在该应用程序中使用JavaScript绘制表面，而是选择仅使用FA（著名角）指令，例如：

<!-- Name-->
    <fa-modifier
        fa-origin    ="origin.center"
        fa-align     ="align.frontName"
        fa-size      ="size.frontName"
        fa-translate ="trans.topLayer">
        <fa-surface
            class    ="front-name-text">
            {{name}}
        </fa-surface>
    </fa-modifier>

在前屏幕上的神奇宝贝上方的名字。

您会注意到表面被fa-modifier包裹。您可以在此处阅读有关这些内容的信息，但它们实际上会调整曲面的属性，例如对齐方式，大小和原点。我花了一些时间来解决对齐方式和原点之间的区别，所以这是我了解的方式：

原点任何表面上的参考点。如果要绘制一个矩形并将其在屏幕上移动，则需要确定该矩形上的哪个点将是我的起点。 Famo.us文档对此进行了很好的解释。值的布局如下：

  $scope.origin          = {
                         // X    Y 
   topLeft:                [0,   0  ],
   topRight:               [1,   0  ],
   center:                 [0.5, 0.5],
   bottomLeft:             [0,   1  ],
   bottomRight:            [1,   1  ]
  };

对齐曲面在屏幕上的位置。更改路线时，它将以原点为起点。

   $scope.align          =  {
                          // X        Y 
    frontName:             [0.50,    0.10],
    frontImg:              [0.50,    0.40],
    backImg:               [0.5,     0.38],
    center:                [0.50,    0.50]
  };

角度终于出现在哪里

现在，您可以在这里将所有角度技能和数据绑定与Angular实现一起使用。如果您已经对Angular有所了解，那么这里并没有太大的不同。

   <!-- Next button -->
    <fa-modifier
        fa-origin    ="origin.center"
        fa-align     ="align.nextBtn"
        fa-size      ="size.btn"
        fa-scale     ="scale.nextBtn.get()"
        fa-translate ="trans.topLayer">
        <fa-surface
            class    ="one-edge-shadow center-align next-btn"
            ng-click ="getPokemon(); nextBtnPressAnim(); frontImgAnim()">
            {{nextBtn}}
        </fa-surface>
    </fa-modifier>

该按钮出现在第一个屏幕上，只需从数据库中提取另一个神奇宝贝。您熟悉的所有ng（角度）指令都在这里，例如ng-click。 我在这里有多种功能（注意：它们之间没有逗号分隔）。

我还将$ scope.nextBtn的值绑定到HTML中的{{nextBTn}} 。

为了允许Famo.us和Angular一起工作，我们需要在JavaScript文件顶部包含$ Famo.us。这是您的操作方式：

angular.module（'famousAngularStarter'）
.controller（'PokemonCtrl'，['

/* Inject famo.us to DOM */
var View           = $famous['famous/core/View'                 ];
var Modifier       = $famous['famous/core/Modifier'             ];
var Surface        = $famous['famous/core/Surface'              ];
var Transform      = $famous['famous/core/Transform'            ];
var Transitionable = $famous['famous/transitions/Transitionable'];
var Timer          = $famous['famous/utilities/Timer'           ];

动画制作

如果没有动画，高性能应用会是什么样？ Famo.us包含很多内容，因此入门非常容易。这是一个使正面图像动起来的动画。

  /*
   * @OnClick: Sets the opacity and scale for the front image when user clicks "Next" btn
   * 1) Turns opacity invisible quickly before returning to original opacity, revealing new Pokemon
   * 2) Turns scale down before quickly turning it back up to original size
   */
  $scope.frontImgAnim = function() {
    var hideDuration   =  200;
    var returnDuration = 1300;

    $scope.opac.imgFront.    set(0,           {duration: hideDuration,   curve: "easeIn"},
      function returnToOrigOpacity() {
        $scope.opac.imgFront.set(1,           {duration: returnDuration, curve: "easeIn"})
      }
    );
    $scope.scale.imgFront    .set([0.5, 0.5], {duration: hideDuration,   curve: "easeIn"},
      function returnToOrigSize() {
        $scope.scale.imgFront.set([0.8, 0.8], {duration: returnDuration, curve: "easeIn"})
      }
    )
  };

您可以在此处使用几种曲线类型。查看文档以获取更多信息。我还使用了一个回调函数returnToOrigSize来使图像放大，然后缩小到原始大小。

挫败点

在此过程中，我遇到了一些问题。

FA目录的属性设置为字符串
```
fa-origin    ="origin.center"
```

如果您有拼写错误，则该应用将仅使用该属性的默认值。这使我迷住了好几次，这就是为什么您看到我将所有属性设置为对象（例如align.frontName ，以便于阅读。

添加课程

在FA指令中，您将多个类添加为字符串，并且它们之间没有逗号分隔。

<fa-surface
                class    ="one-edge-shadow center-align next-btn"
                ng-click ="infoBtnPressAnim(); flip()">
                {{infoBtnText}}
</fa-surface>

如果尝试通过在JavaScript中创建表面来添加类，则会传入一个字符串数组：

var logo = new Surface({
    properties: {
         ...
    },
    classes: ['backfaceVisibility, class-two'] 
});

我花了一段时间才明白这一点，因为我只是在该线程中找到了解决方案。

Famo.us + Angular似乎已贬值（目前）

在该项目进行到一半时，我看到Famo.us正在开发包含混合模式的框架的改进版本。著名+角度（至少）尚未利用这些附加功能。这并不意味着FA可以运用于任何地方，因为它可以很好地工作，只是您不会获得最新功能。

资源资源

使用JavaScript进行更多操作

本文是Microsoft技术宣传人员撰写的Web开发系列文章的一部分，内容涉及实用的JavaScript学习，开源项目以及互操作性最佳实践，包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎。

我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试，包括Microsoft Edge（Windows 10的默认浏览器）：

我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习：

Microsoft Edge Web Summit 2015 （新浏览器，受支持的新网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么）
哇，我可以在Mac和Linux上测试Edge和IE！（来自Rey Bango）
在不中断网络的情况下推进JavaScript （摘自Christian Heilmann）
使Web正常工作的Edge渲染引擎（来自Jacob Rossi）
使用WebGL释放3D渲染（来自David Catuhe，包括vorlon.JS和babylonJS项目）
托管的Web应用程序和Web平台创新（来自Kevin Hill和Kiril Seksenov，包括歧管 .JS项目）

Web平台的更多免费跨平台工具和资源：

From: https://www.sitepoint.com/sample-project-use-famo-us-and-angular-to-create-a-mobile-application/