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

Question

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

as html: 1个文件html, 1个js文件, 几个包含文件的目录。页面是包罗万象的（头部、主体，包括库）并且将其包含在 Ionic 页面中意味着解压缩 html（对吗？）。我正在尝试，但它似乎有点复杂。
作为电影.mov，但就文件大小而言有点贵

在这两种情况下，我都不确定如何将发布的结果包含在 Ionic 页面中，我想我遗漏了什么。

那么，如何在 Ionic 2 框架页面中包含 Adobe Animate CC 动画？

更新：我试图解压 html。尝试将动画发布为 HTML5 动画，发布设置为 "Included javascript in HTML"。这样，所有必需的 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 上被调用，如

<body onload="init()">

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

cjs.Bitmap is not a constructor

如果不是明确说明库 createjs 没有以正确的方式导入，因为它无法关联其包含函数 [=22] 的 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/）。不工作。然后我尝试在导入 mylibrary

之前在 ts 文件中添加库

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

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

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

你猜怎么着？不工作。任何时候我说 "did not work" 问题都是同样的错误 "cjs.Bitmap is not a constructor"。目前我找不到将通过 Adobe Animate CC 生成的动画导入 Ionic 的方法。

Answer 1

只是为了路过的人，不是一个优雅的解决方案，但至少是一个。

您可以在 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>

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

How to add an HTML5 animation generated with Adobe Animate CC to a Ionic 2 project page?

html

animation

ionic-framework

createjs

如何将使用 Adob​​e Animate CC 生成的 HTML5 动画添加到 Ionic 2 项目页面？

How to add an HTML5 animation generated with Adobe Animate CC to a Ionic 2 project page?

html

animation

ionic-framework

createjs

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