Создать HTML5 интерактивное слайд-шоу с анимацией в слайдах - PullRequest
Новая
       30

Создать HTML5 интерактивное слайд-шоу с анимацией в слайдах

0 голосов
/ 16 мая 2018

Я создаю учебное слайд-шоу с помощью HTML5 canvas. Каждый слайд имеет анимированные 2D-элементы, перемещающие масштабирование и навигацию, указывающую на каждый слайд. В конечном счете, я хотел бы создать это без использования Animate CC, просто если программа исчезнет, ​​и мне придется начинать с нуля, если необходимо внести изменения (например, файлы Edge). Я хотел бы вручную написать это с HTML5, CSS и JavaScript, предпочтительно используя CreateJS.

Я разместил учебные пособия по простым слайд-шоу и анимированным переходам, но я также ищу анимацию в каждом слайде или сцене.

Возможно ли это? Там есть учебник? Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Вам абсолютно не нужно использовать Adobe Animate для создания анимированного контента с помощью CreateJS.

Вот пересмотренная версия кода @ hadders с использованием CreateJS. Обратите внимание, что вам нужно использовать 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/

Приветствия

0 голосов
/ 17 мая 2018

Используйте библиотеку, такую ​​как 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();

надеюсь, что поможет

...