使用幻灯片中的动画创建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值。 然后，可以使用该补间的坐标对象对canvas元素进行定位/设置动画。

这似乎是一个足够体面的示例： 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();

希望能有所帮助