我使用 Adobe Animate CC 作为 HTML 5 画布项目制作了一个动画。我可以通过多种方式发布动画:
在这两种情况下,我不确定如何将发布的结果包含在 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 的方法。
对于路过的人来说,这不是一个优雅的解决方案,但至少是一个。
您可以在 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>
这里真正的答案(仍有待探索)实际上是访问 html5 canvas 元素及其关联的 javascript 文件。 播放视频适用于此用例,但嵌入 canvas 元素并能够在其中操作 javascript 将是一个更有价值的过程。