在幻灯片中使用动画（HTML5 Canvas Document）

Question

我想在幻灯片中使用3种不同的动画。对于幻灯片，我使用了uikit（基于html，css，javascript和jQuery在LESS＆SASS中开发的前端框架），并在iframe中嵌入了在Adobe Animate CC中创建的动画。

一切都很完美，但问题是所有3个动画都在同一时间加载。因为它们都包含声音元素，我可以听到3种不同的声音，而只有第一个动画可见。是否有可能为动画本身定义动画时间轴仅在动画可见时才开始播放？

让我展示一个代码片段，也许这将解释我的问题：

Codesnippet

这是幻灯片放映的第一个编码部分。 'slide01.html'文件是第一个直接显示给用户的动画。在代码中还有一个slide02.html和slide03.html也是动画。所以我没有在Adobe Animate CC中构建完整的幻灯片，但是我创建了3个不同的动画，这些动画是分开实现的。因此iframe中有3个不同的html文件，一旦整个网站完全加载就开始播放。

Answer 1

您可以尝试使用Javascript创建动画

function myMove() {
    var elem = document.getElementById("myAnimation");
    var pos = 0;
    var id = setInterval(frame, 10);
    function frame() {
        if (pos == 350) {
            clearInterval(id);
        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
        }
    }
}

<!DOCTYPE html>
<html>
<style>
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button> 
</p>

<div id ="myContainer">
<div id ="myAnimation"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("myAnimation");   
  var pos = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}
</script>

</body>
</html>

在幻灯片中使用动画（HTML5 Canvas Document）

问题描述投票：0回答：1

1个回答

最新问题

在幻灯片中使用动画（HTML5 Canvas Document）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1