使用Famo.us和Angular创建一个移动应用

最新推荐文章于 2024-09-08 20:23:27 发布

cunjie3951

最新推荐文章于 2024-09-08 20:23:27 发布

阅读量191

点赞数

文章标签：数据库 python java javascript 编程语言 ViewUI

我喜欢高性能JavaScript，也喜欢分享我认为真正的潜力。在本教程中，我想重点介绍Famo.us，它可以让您在屏幕上流畅播放动画的同时，保持每秒60帧的柔滑流畅。

Famo.us通过使用CSS3原语-webkit-transform: matrix3d ，该框架使框架能够计算复合矩阵并跳过浏览器的渲染器。没有插件，没有下载，没有黑客。通过将其附加到每个DIV，开发人员可以渲染复合矩阵并直接进入GPU。

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

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

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

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

特征

该移动应用程序通过Cordova在iOS和Android上运行。
Windows 10通用应用程序可以在Windows 10上本地运行。
该项目也可以作为托管网站运行，尽管我对其进行了缩放，以使其最适合移动设备。

要求

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

建立

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

打开项目

启动您的Web服务器。
导航至Famous-Angular-Pokemon / app / 。

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

这个怎么运作

击中数据库

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

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

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通过创建面，它们是包含文字，图片等元素具有绘画的内容到屏幕上的两个波：

JavaScript
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>

这是在前屏幕上的Pokémon上方的名称。

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

起源

这是任何表面上的参考点。如果要绘制一个矩形并将其在屏幕上移动，则需要确定该矩形上的哪个点将是我的起点。 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实现。如果您已经对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>

该按钮出现在第一个屏幕上，并且只是从数据库中提取另一个Pokémon。您熟悉的所有ng （Angular）指令都在这里，例如ng-click 。我在这里有多种功能。请注意，它们不是用逗号分隔的。

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

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

angular.module('famousAngularStarter')

  .controller('PokemonCtrl', ['$scope', '$http', '$famous', function ($scope, $http, $famous) {



    /* 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'] 

});

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

Famo.us + Angular似乎已被弃用（现在）

在该项目进行到一半时，我看到Famo.us正在开发包含混合模式的框架的改进版本。 Famo.us + Angular至少还没有利用这些附加功能。这并不意味着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）
使网络正常工作的边缘渲染引擎（来自Jacob Rossi）
使用WebGL释放3D渲染（来自David Catuhe，包括Vorlon.js和Babylon.js项目）
托管的Web应用程序和Web平台创新（来自Kevin Hill和Kiril Seksenov，包括歧管项目）

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

翻译自: https://code.tutsplus.com/tutorials/create-a-mobile-app-using-famous-and-angular--cms-24721

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Famo.us和Angular创建一个移动应用

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

扫一扫