创建带有幻灯片动画的HTML5交互式幻灯片

Question

我正在使用HTML5画布创建一个教学幻灯片。每张幻灯片都有动画 2D 元素，移动缩放比例和指向每张幻灯片的导航。最终，我想在不使用 Animate CC 的情况下创建它，以防程序消失，如果需要进行编辑(如 Edge 文件)，我必须从头开始。我想用HTML5，CSS和JavaScript手动编码，最好使用CreateJS。

我已经找到了有关简单幻灯片和动画过渡的教程，但我更喜欢寻找每张幻灯片或场景中发生的动画。

这可能吗？那里有教程吗？提前谢谢你。

Answer 1

您绝对不必使用 Adobe Animate 即可使用 CreateJS 创建动画内容。

以下是使用 CreateJS 的 @hadders 代码的修订版本。请注意，您需要使用 1.0 才能获得"yoyo"效果，TweenJS 称之为"弹跳">

var stage, bmp;
function init() {
stage = new createjs.Stage("canvas");
createjs.Ticker.on("tick", stage);
bmp = new createjs.Bitmap("https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog_1_small.jpg");
bmp.set({ x: 50, y: 50, alpha: 1});
stage.addChild(bmp);
createjs.Tween.get(bmp, {loop:-1, bounce:true}).to({
alpha: 0, 
x:500, 
y:400
}, 1000);
}
init();

这是它在行动的小提琴：https://jsfiddle.net/8xmy6xuw/

干杯

Answer 2

使用像 GSAP 这样的库。创建一个包含坐标的对象，您将使用这些坐标来定位画布元素，例如 {x：100， y：100}，然后使用 GSAP 补间对象的 x/y 值。然后，可以使用此补间坐标对象对画布元素进行定位/动画处理。

这似乎是一个足够体面的例子： https://codepen.io/jonathan/pen/ychlf

.HTML

<div id="canvas-wrapper">
<canvas id="canvas" width="800" height="600">canvas not supported</canvas> 
</div>

.JS

var ctx, img;
function init() {
ctx = document.getElementById("canvas").getContext("2d");
img = new Image();
img.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog_1_small.jpg";
img.xpos = 50;
img.ypos = 50;
img.globalAlpha = 1.0;
img.onload = function() {
TweenLite.ticker.addEventListener("tick",loop);
}
TweenMax.to(img, 1 ,{
   globalAlpha:0, 
   xpos:500, 
   ypos:400, 
   repeat:-1, 
   yoyo:true
});
}
function loop(){
ctx.clearRect(0,0,800,600);
ctx.globalAlpha = img.globalAlpha;
ctx.drawImage(img, img.xpos, img.ypos);
}
init();

希望有帮助