如何将 Adobe Animate CC 生成的 HTML5 动画添加到 Ionic 2 项目页面?

问题描述 投票:0回答:2

我使用 Adobe Animate CC 作为 HTML 5 画布项目制作了一个动画。我可以通过多种方式发布动画:

  • as html:1个html文件,1个js文件,几个包含文件的目录。页面是包容性的(head、body、包括库),将其包含在 Ionic 页面中意味着解压 html(对吗?)。我正在尝试,但似乎有点复杂。
  • 作为电影.mov,但就文件大小而言有点贵

在这两种情况下,我不确定如何将发布的结果包含在 Ionic 页面中,我认为我遗漏了一些东西。

那么,如何在 Ionic 2 Framework 页面中包含 Adobe Animate CC 动画?

更新:我尝试解压 html。尝试将动画发布为 HTML5 动画,发布设置为“在 HTML 中包含 javascript”。这样,所有必需的 js 都放在发布过程输出的 html 文件中。然后我拿了那个js(

中包含的那个)
<script> some js here </script> 

导入库后立即 createjs) 并将其放入 /assets/js/mylibrary.js 中的 mylibrary.js 文件中。这样,我就可以将它导入到一个离子页面的 ts 文件中,例如

import mylibrary from '../../assets/js/mylibrary'

然后尝试像

那样初始化动画
  ionViewDidLoad(){
     mylibrary.init()
  }

在原始文件中,init()函数在主体上被调用,就像

<body onload="init()">

不幸的是它不起作用。抛出的错误是

cjs.Bitmap is not a constructor

这并不是真正重要的错误,如果不是明确指出库 createjs 没有以正确的方式导入,因为它无法关联包含类似函数的 mylibrary.js 的 cjs 变量

(function (lib, img, **cjs**, ss, an) {
… (all code here)
})(lib = lib||{}, images = images||{}, **createjs = createjs||{}**, ss = ss||{}, AdobeAn = AdobeAn||{});

创建库的js变量。我的意思是,评论 cjs.Bitmap 行,它开始抱怨后续的 cjs.Rectangle 不存在。 所以我尝试包含该库,首先从 Animate 生成的 html 中获取包含内容

<script src="libs/createjs-2015.11.26.min.js"></script>

并将其放入我的主“index.html”应用程序文件中(在 asset/js 中复制包含该文件的目录 lib)。没有工作。尝试过库的实时版本

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

没用。 甚至尝试添加所有其他库(链接到 createjs 的不必要的库,如 easejs 等https://code.createjs.com/)。没有工作。 然后我尝试在 ts 文件中添加库,在导入 mylibrary 之前添加

import createjs from '../../assets/js/createjs'

没用。 甚至尝试 npm 安装 createjs、createjs-module 和 createjs-easeljs 并导入它们。

import easeljs from 'createjs-easeljs';
import createjs-module from 'createjs-module';
import createjs from 'createjs';

你猜怎么着?没有工作。 每当我说“不起作用”时,问题都是同样的错误“cjs.Bitmap 不是构造函数”。目前我找不到将通过 Adobe Animate CC 生成的动画导入 Ionic 的方法。

html animation ionic-framework createjs
2个回答
2
投票

对于路过的人来说,这不是一个优雅的解决方案,但至少是一个。

您可以在 Adobe Animate 中将动画保存为视频(“mov”文件),并使用 Adobe Media Converter 或您喜欢的任何其他程序优化其大小和格式。在这种情况下,我已将其转换为 mp4。

注意:当您发布视频时,如果有音轨,则仅当从动画的第二帧开始时,它才会包含在视频中。发现起来有点棘手,所以值得一说。

一旦您有了“mp4”文件,请将其添加到您的应用程序资源中,然后您就可以以经典的 html 方式将其包含到 Ionic 页面中。就我而言,这是一个全屏播放的视频,所以这是我的代码:

<ion-content padding>
  <div id="videocontainer">
    <video fullscreen="fullscreen" autoplay="true" (ended)="onVideoEnded()">
      <source src="assets/video/your_video_name.mp4" type="video/mp4">
    </video>
  </div>
</ion-content>

0
投票

这里真正的答案(仍有待探索)实际上是访问 html5 canvas 元素及其关联的 javascript 文件。 播放视频适用于此用例,但嵌入 canvas 元素并能够在其中操作 javascript 将是一个更有价值的过程。

© www.soinside.com 2019 - 2024. All rights reserved.