Question

我正在使用HTML5画布创建教学幻灯片。每张幻灯片都有动画2D元素，可以移动缩放和指向每张幻灯片的导航。最终，我想在不使用Animate CC的情况下创建它，只是因为程序消失了，如果需要进行编辑（如边缘文件），我必须从头开始。我想用HTML5，CSS和JavaScript手动编写代码，最好使用CreateJS。

我找到了关于简单幻灯片和动画过渡的教程，但我还在寻找每个幻灯片或场景中发生的动画。

这可能吗？那里有教程吗？先感谢您。

Answer 1

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

以下是使用CreateJS的@ hadders代码的修订版。请注意，您需要使用1.0来获取“yoyo”效果，TweenJS将其调用"bounce"

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值。然后可以使用此tweened coord对象定位/动画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();

希望有所帮助

在幻灯片中创建包含动画的HTML5交互式幻灯片

2 个答案: